I am trying to add a plot line to a bar chart but it isn't showing up. All of the examples of plot lines I have found have to do with line charts but I don't see anything in the documentation that says plotlines don't work with bar. I tried adding the plotline when I initialized the chart and adding it after the fact and neither way works.
Here is the example I am testing with.
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
legend: {
layout: 'vertical',
floating: true,
backgroundColor: '#FFFFFF',
align: 'right',
verticalAlign: 'top',
y: 60,
x: -60
},
plotLines: [{
color: '#FF0000',
width: 2,
value: 80,
zIndex: 5
}],
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
series: [{
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]
}]
});
});
An array of lines stretching across the plot area, marking a specific value on one of the axes. In styled mode, the plot lines are styled by the . highcharts-plot-line class in addition to the className option.
Plot Bands are colored ranges in RadHtmlChart, the purpose of which is to highlight areas of the chart by changing its background in a predefined axis range. Telerik introduced the plot bands in the Q1 2014 release.
But from what I see, it's only possible in Highcharts to either have all lines on one y-axis or each line has its own y-axis.
You can also check the addPlotLine or addPlotBand methods (http://api.highcharts.com/highcharts#Axis.addPlotLine and http://api.highcharts.com/highcharts#Axis.addPlotBand). It may be easier and quicker to use than drawing a SVG path, unless your line isn't straight.
plotLines
is a sub-option of the yAxis or xAxis config and not a base option as you have it:
<SNIP>
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
plotLines: [{
color: '#FF0000',
width: 2,
value: 80,
zIndex: 5
}]
},
<SNIP>
Update fiddle here.
Axis.addPlotLine() api allows to add a line in the axis after the chart has been rendered .
var plotOption = {
color: '#FF0000',
dashStyle: 'ShortDash',
width: 2,
value: 1000,
zIndex: 0,
label : {
text : 'Goal'
}
};
this.lineChart.yAxis[0].addPlotLine(plotOption) ;
//where lineChart is the reference to the existing chart
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With