CODEWITHSUNDEEP
highcharts
ampedo
ampedo

Reputation: 253

Update color of plotline label on change highcharts

is there a way to change color of the plotline label when the movement goes up and change it again in different font color when movement goes down?

      yAxis.addPlotLine({
        value: 66,
        color: 'red',
        width: 2,
        id: 'plot-line-1',
  label: {
                text: 66,
                align: 'right',
                style: {
                 color: 'red',
                  fontWeight: 'bold'
                },
                y: newY,
                x: 0
            }
      });

Here is a working file http://jsfiddle.net/kttfv1h3/9/ thanks for the help

Upvotes: 2

Views: 1009

Answers (2)

Constantine
Constantine

Reputation: 554

You can add css style options to your plotLabel like to a simple object; docs 

var prev_val = 0; // global

        plotlabel = yAxis.plotLinesAndBands[0].label;
        if(prev_val <= y) {
            plotlabel.css({'color':'blue'});    
        } else {
            plotlabel.css({'color':'green'});   
        }
        prev_val = y;

My jsFiddle: http://jsfiddle.net/kttfv1h3/12/

Upvotes: 3

ewolden
ewolden

Reputation: 5803

After playing around a bit with the different settings I found a way to achieve what you are seeking.

By delcaring a new variable oldY And doing the following in setInterval, the label color changes depending on if the value is increasing or decreasing:

if(y < oldY) {
    yAxis.plotLinesAndBands["0"].label.element.style.fill = 'red';
} else {
    yAxis.plotLinesAndBands["0"].label.element.style.fill = 'green';
}
oldY = y;

See jsfiddle for a working example based on the one you supplied.

Upvotes: 0

Related Questions