I'm trying to render plotLines on Highcharts. But somehow I'm not able to render labels on plotLines.
Here is the code snippet:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'view_content',
type: 'line'
},
title: {
text: 'Dummy Data by Region'
},
xAxis: {
categories: ['Africa', 'America', 'Asia']
},
yAxis: {
plotLines:[{
value:450,
color: '#ff0000',
width:2,
zIndex:4,
label:{text:'goal',verticalAlign: 'bottom',
textAlign: 'right',}
}]
},
series: [{
name: 'Year 1800',
data: [107, 31, 50]
},
{
name: 'Goal',
type: 'scatter',
marker: {
enabled: true
},
data: [450]
}]
});
And after chart is rendered I'm calling addPlotLines function.
chart.yAxis[0].addPlotLine({
value: 35.5,
color: 'green',
width: 2,
id: 'plot-line-1',
label:{text:"Testing"}
});
Plotlines is getting rendered but label on it is not rendering. Here is the screenshot:
Am I missing anything here?
Jquery Version: 3.1.0
Highcharts Version: 6.0.3
This problem is a bug and it is reported here: https://github.com/highcharts/highcharts/issues/8477
To make it work in versions lower than 6.1.1 use this workaround:
Highcharts.wrap(Highcharts.Axis.prototype, 'getPlotLinePath', function(proceed) {
var path = proceed.apply(this, Array.prototype.slice.call(arguments, 1));
if (path) {
path.flat = false;
}
return path;
});
Live demo: https://jsfiddle.net/BlackLabel/grpwztL3/
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