CODEWITHSUNDEEP
highcharts
JDD
JDD

Reputation: 417

Updating a highchart line using a button

I'd like to update the red dashed line on this highchart plot using the text box and button below it. I'm stuck on how to get it to work. Right now I'm just trying to get the button press to move the line up slightly just so I can see if it's working.

http://jsfiddle.net/tZ8GM/

This is the function I'm trying to use to update it. 

$("#setPtButton").click(function() {
    Highcharts.setOptions({
    yAxis: {
        plotLines: [{
            value : 68.1,
            color : 'red',
            dashStyle : 'longdash',
            width : 2
        }]
    }
    });
});

Upvotes: 1

Views: 145

Answers (1)

Mark
Mark

Reputation: 108512

You should be using a combination of addPlotLine and removePlotLine.

$("#setPtButton").click(function() {
    var chart = Highcharts.charts[0];
    chart.yAxis[0].removePlotLine('setline');     
    chart.yAxis[0].addPlotLine({
            value: $('#setPoint').val(),
            color: 'red',
            width: 2,
            id: 'setline',
            dashStyle : 'longdash'
     });
});

Updated fiddle.

Upvotes: 2

Related Questions