I made a line chart with multiple series (4). So the chart displays 4 lines. All the series are displayed in the chart legend and can be enabled/disabled by clicking them.
I want to add plotlines on the Y-axis with the maximum value of each series. This is easy to achieve by just defining 4 plotlines. He comes the tricky part. When a series gets disabled (hidden), how can I hide the corresponding plotline on the Y-axis?
I found this fiddle adding plotlines dynamically when you click the chart, but I need them to be added/removed when clicking a series in the legend.
http://jsfiddle.net/jugal/wHnnE/
var myPlotLineId="myPlotLine";
var chartingOptions = {
chart: {
renderTo: 'container',
events: {
click: function(evt) {
var xValue = evt.xAxis[0].value;
var xAxis = evt.xAxis[0].axis;
$.each(xAxis.plotLinesAndBands,function(){
if(this.id===myPlotLineId)
{
this.destroy();
}
});
xAxis.addPlotLine({
value: xValue,
width: 1,
color: 'red',
//dashStyle: 'dash',
id: myPlotLineId
});
}
}
}
};
chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(), chartingOptions);
var chart = new Highcharts.StockChart(chartingOptions);