In HighCharts Line Chart, how do I set the colour of a series line depending on its value in relation to the value of a plotline.

For example, if I have a plotline y = 15, how could I make the series colour green when y < 15 and red when y > 15

/

$('#container').highcharts('StockChart', {


    rangeSelector: {
        selected: 1
    },

    title: {
        text: 'KPN Year View'
    },

    yAxis: {
        plotLines: [{ 
            label: {
                text: 'Baseline',
                x: 25
            },
            color: 'orange',
            width: 2,
            value: 15,
            dashStyle: 'longdashdot'
        }],
    },

    series: [{
        name: 'KPN12345',
        data: [
            [1327881600000, 11],
            [1327968000000, 18],
            [1328054400000, 12],
            [1328140800000, 5],
            [1328227200000, 11],
            [1328486400000, 17],
            [1328572800000, 10],
            [1328659200000, 10],
            [1328745600000, 15],
            [1328832000000, 10],
            [1329091200000, 11]
        ]
    }]
});

In HighCharts Line Chart, how do I set the colour of a series line depending on its value in relation to the value of a plotline.

For example, if I have a plotline y = 15, how could I make the series colour green when y < 15 and red when y > 15

http://jsfiddle.net/adamtsiopani/YBMny/

$('#container').highcharts('StockChart', {


    rangeSelector: {
        selected: 1
    },

    title: {
        text: 'KPN Year View'
    },

    yAxis: {
        plotLines: [{ 
            label: {
                text: 'Baseline',
                x: 25
            },
            color: 'orange',
            width: 2,
            value: 15,
            dashStyle: 'longdashdot'
        }],
    },

    series: [{
        name: 'KPN12345',
        data: [
            [1327881600000, 11],
            [1327968000000, 18],
            [1328054400000, 12],
            [1328140800000, 5],
            [1328227200000, 11],
            [1328486400000, 17],
            [1328572800000, 10],
            [1328659200000, 10],
            [1328745600000, 15],
            [1328832000000, 10],
            [1329091200000, 11]
        ]
    }]
});

• javascript
• charts
• highcharts

1 Answer 1

You can do this with a combination of the threshold and negativeColor series options.

      series: [{
        name: 'KPN12345',
        data: [
            [1327881600000, 11],
            etc...
        ],
        threshold: 15,
        negativeColor: 'green',
        color: 'red',
        tooltip: {
            valueDecimals: 2
        }
    }]

Fiddle here.