HighStock HighCharts Setting Flag on Click Event

Question

I'm using the HighStock version of HighCharts to create a series of data in charts. I've got a candlestick graph, on top of a bar graph, on top of a histogram. The candlestick points are clickable. I want to add a flag to the point on the candlestick chart that they just clicked on.

Here is some of the code I've tried playing with:

// create the chart
        chart = new Highcharts.StockChart({
            chart: {
                renderTo: 'container',
                alignTicks: false
            },

            rangeSelector: {
                selected: 1
            },

            title: {
                text: 'DJIA Historical'
            },

            yAxis: [{
                title: {
                    text: 'OHLC'
                },
                height: 300,
                lineWidth: 2
            }, {
                title: {
                    text: 'Volume'
                },
                top: 400,
                height: 100,
                offset: 0,
                lineWidth: 2
            }, {
                title: {
                    text: 'MACD'
                },
                top: 520,
                height: 100,
                offset: 0,
                lineWidth: 1
            }],

            series: [{
                type: 'candlestick',
                name: 'DJIA',
                data: ohlc,
                events: {
                    click: function(event) {

                        console.log(chart);
                        chart.series[6].setData(event.point);
                    }
                },
                dataGrouping: {
                    units: groupingUnits
                }
            }, {
                type: 'column',
                name: 'Volume',
                data: volume,
                yAxis: 1,
                dataGrouping: {
                    units: groupingUnits
                }
            }, {
                type: 'column',
                name: 'Histogram',
                pointPadding: 0,
                groupPadding: 0,
                data: histogram,
                yAxis: 2,
                color: '#666666'
            }, {
                type: 'line',
                name: 'MACD',
                pointPadding: 0,
                groupPadding: 0,
                data: macd,
                yAxis: 2,
                color: '#0000FF'
            }, {
                type: 'line',
                name: 'Signal',
                pointPadding: 0,
                groupPadding: 0,
                data: signal,
                yAxis: 2,
                color: '#000000'
            }, {
                type: 'flags',
                name: 'Active Point',
                data: [],
                onSeries: ohlc,
                shape: 'squarepin'
            }]
        });
    })

The chart doesn't throw any JavaScript errors, but it's not creating the flag. At the very least, it's not showing it. I want to essentially have it draw the flag over the candlestick they clicked. If they click another spot, I want to remove the old flag and draw a new one on the new point. I figured this was best done by adding and removing data from the series but haven't had much luck.

Any help on this would be greatly appreciated!

Jugal Thakkar Jugal Thakkar · Accepted Answer · 2012-08-02T20:07:40

Firstly, A js-fiddle example would be highly appreciate to understand your problem. From the best that I understood about your problem, try this (Assuming 5 is the index of your flag series, your code seems to be using index 6?!)

click: function(event) {
                this.chart.series[5].addPoint({
                    x: event.point.x,
                    title: 'hey you clicked me'
                });
            }

my fiddled code @ http://jsfiddle.net/U2Z2x/1/

Since you seem to be interested in showing only 1 flag, as you were rightly using setData, that seems to be your best bet, just a catch, setData expects an array, and you passing a single value, also the format of the point needs to be slightly redone for flag type series

 click: function(event) {
                this.chart.series[5].setData([{
                    x: event.point.x,
                    title: 'hey you clicked me'
                }]);

fiddle update @ http://jsfiddle.net/U2Z2x/2/

HighStock HighCharts Setting Flag on Click Event

1 Answers