CODEWITHSUNDEEP
javascriptjqueryhighcharts
Saad Ahmad
Saad Ahmad

Reputation: 23

Multiple point selection in Highcharts stockChart

I am currently working on a Highcharts stockchart, and wanted to a add a feature to that chart by which user should be able to select multiple points on the line chart and those selected points will have a marker to represent which points on the chart are selected on click. This feature is provided in the Highcharts API by plotOptions.series.allowPointSelect.

This is working perfectly in Highcharts but not working properly in stockCharts.

here is the fiddle

The javaScript code for the chart is:

$(function () {
Highcharts.stockChart('container',{
plotOptions: {
    series: {
        allowPointSelect: true,
        marker: {
            states: {
                select: {
                    fillColor: 'red',
                    lineWidth: 0
                }
            }
        }
    }
},
    title: {
        text: 'Monthly Average Temperature',
        x: -20 //center
    },
    subtitle: {
        text: 'Source: WorldClimate.com',
        x: -20
    },
    yAxis: {
        title: {
            text: 'Temperature (°C)'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: '°C'
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    series: [{
        name: 'Tokyo',
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {
        name: 'New York',
        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
    }, {
        name: 'Berlin',
        data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
    }, {
        name: 'London',
        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    }]
});

});

whenever we are selecting a point on a series the marker is applied but the marker vanishes as soon as I move the cursor to another point on any of the series.

Can anyone of you please suggest a solution to this issue. Thanks in advance

Upvotes: 2

Views: 529

Answers (1)

Kamil Kulig
Kamil Kulig

Reputation: 5826

The clicked point has to have marker.enabled option set to true.

You can enable markers for the whole series like this: http://jsfiddle.net/BlackLabel/te1xjm71/

Upvotes: 0

Related Questions