javascript - Labels are not rendering for plotLines highcharts - Stack Overflow

admin管理员组

文章数量:1416661

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

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

• javascript
• highcharts

Share Improve this question Follow asked Oct 3, 2018 at 7:15 adithya vinadithya vin 6711 silver badge77 bronze badges 3

• In this fiddle everything works fine. Maybe you have some CSS/JS code rendering the label in white. – Core972 Commented Oct 3, 2018 at 7:43
• @Core972 Please note that Highcharts 6.0.3. is not the newest version. The fiddle is using 6.1.4 I think. – user9420984 Commented Oct 3, 2018 at 8:01
• 1 @adithya vin, if it's a bug from highcharts the only solution is to update to a newer version. This bug have been fixed in the 6.1.1 version Fixed #8477, plot line labels didn't work in browsers that support Array.prototype.flat. – Core972 Commented Oct 3, 2018 at 8:41

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

This problem is a bug and it is reported here: https://github./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/BlackLabel/grpwztL3/

本文标签： javascriptLabels are not rendering for plotLines highchartsStack Overflow