adithya vin
adithya vin

Reputation: 67

Labels are not rendering for plotLines highcharts

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

Upvotes: 4

Views: 3387

Answers (1)

ppotaczek
ppotaczek

Reputation: 39149

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/

Upvotes: 7

Related Questions