Reputation: 958
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]
}]
});
});
Upvotes: 7
Views: 9325
Reputation: 624
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
Upvotes: 5
Reputation: 108512
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.
Upvotes: 7