Highcharts Highstock How to add flags to chart drawn from embedded CSV data?-CodePudding

I want to add flags to line or ohlc charts as shown here:

https://www.highcharts.com/docs/stock/flag-series

I don't understand how to apply the basic documentation shown here:

https://api.highcharts.com/highstock/plotOptions.flags

This is the working snippet of html code without flags.

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<div id="chart-container" style="width: 400px; height: 400px; margin: 0 auto"></div>

<pre id="csv" style="display: none">
date,adj_high,adj_low
2018-02-27,180.48,178.16
2018-02-28,180.615,178.05
2018-03-01,179.775,172.66
2018-03-02,176.3,172.45
2018-03-05,177.74,174.52
2018-03-06,178.25,176.13
2018-03-07,175.85,174.27
2018-03-08,177.12,175.07
2018-03-09,180.0,177.39
2018-03-12,182.39,180.21
2018-03-13,183.5,179.24
2018-03-14,180.52,177.81
2018-03-15,180.24,178.0701
2018-03-16,179.12,177.62
2018-03-19,177.47,173.66
2018-03-20,176.8,174.94
2018-03-21,175.09,171.26
2018-03-22,172.68,168.6
2018-03-23,169.92,164.94
2018-03-26,173.1,166.44
2018-03-27,175.15,166.92
</pre>
<script>
Highcharts.stockChart('chart-container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Line Chart with Flags from CSV?'
    }, 
    data: {
           csv: document.getElementById('csv').innerHTML 
    }
});
</script>

How do I add flags using csv data? Are there two ways to do this? Such as (1) add flag data to the existing csv structure; or (2) create a second csv data block to define flags inside a second tag <pre id="flags">?

CodePudding user response：

The simplest way is to use the same csv and just add another column. Example below:

Highcharts.stockChart('chart-container', {
    ...,
    data: {
        csv: document.getElementById('csv').innerHTML,
        complete: function(options) {
            const flagSeries = options.series[2];
            flagSeries.data = flagSeries.data.filter(
                dataEl => dataEl[1]
            );
        }
    },
    series: [{}, {}, {
        type: 'flags',
        keys: ['x', 'title']
    }]
});

Live demo: http://jsfiddle.net/BlackLabel/8je3yfuc/

API Reference: https://api.highcharts.com/highstock/series.flags.keys

Docs: https://www.highcharts.com/docs/stock/flag-series