Reputation: 133
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);
Upvotes: 1
Views: 1248
Reputation: 12717
You'll want to add and remove the plotlines on the series show and hide events.
var chart = Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
plotLines: [{
value: 5.5,
color: 'red',
width: 2,
id: 'plot-line-1'
}]
},
series: [{
events: {
show: function() {
chart.xAxis[0].addPlotLine({
value: 5.5,
color: 'red',
width: 2,
id: 'plot-line-1'
});
},
hide: function() {
chart.xAxis[0].removePlotLine('plot-line-1')
}
},
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
Upvotes: 2