jbolanos
jbolanos

Reputation: 625

Highcharts dynamically add/change yAxis plotLines

I'm trying to make it possible for my users to add a max plotLine to a chart and have it change the background color of the chart if a plot goes above that line. I can't seem to get a method to update the plotlines. I've tried:

chart.yAxis[0].update({
    plotLines: [{
        id: 'limit-max',
        color: 'blue',
        dashStyle: 'LongDashDot',
        width: 1,
        value: 45000,
        zIndex: 0
    }]
});

but I get the error:

TypeError: a is undefined

...dBands,function(a){a.render()});n(this.series,function(a){a.isDirty=!0})},setCat...

highcharts.js (line 136)

Upvotes: 9

Views: 13668

Answers (4)

Yifei
Yifei

Reputation: 1944

I tried to assign an id to plotLine,

First remove the plotline completely by removePlotLine(id), then added it back by addPlotLine. It works great for me.

function upgradePlotLine(new_line) {
    chart.yAxis[0].removePlotLine('my_line');
    chart.yAxis[0].addPlotLine(new_line);
}

Upvotes: 0

Akram Kamal Qassas
Akram Kamal Qassas

Reputation: 509

just add this code and then you can use the plotline.update method

    //Add support for update method
    Highcharts.PlotLineOrBand.prototype.update = function (newOptions){
        var plotBand = this;
        Highcharts.extend(plotBand.options, newOptions);
        if (plotBand.svgElem) {
            plotBand.svgElem.destroy();
            plotBand.svgElem = undefined;
            plotBand.render();
        }
    }

Upvotes: 3

Thomas Vo
Thomas Vo

Reputation: 412

Here's what worked for me http://jsfiddle.net/tx1kt0bj/2/

var plotBand = tempAxis.plotLinesAndBands[0];

$.extend(plotBand.options, {
    color: '#000',
    to: 10,
    from: 2
});
plotBand.svgElem.destroy();
plotBand.svgElem = undefined;
plotBand.render();

Upvotes: 1

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

You can only destroy and create new plotLins, because update() function is not available.

Upvotes: 5

Related Questions