CODEWITHSUNDEEP
javascripthighcharts
Roysh
Roysh

Reputation: 1550

Highcharts - Change line color between points

I have a line chart graph as can be seen on this fiddle http://jsfiddle.net/qjmjd34d/5/

And with this code:

Highcharts.chart('container', {
    plotOptions: {
        series: {
            color: 'purple'
        }
    },

    series: [{
    data: [{x: 1, y: 435, color:'blue'},
           {x: 2, y: 437, color:'blue'}, 
           {x: 3, y: 455, color:'blue'}, 
           {x: 4, y: 475, color:'blue'}, 
           {x: 5, y: 555, color:'blue'},
           {x: 6, y: 435, color:'blue'}]
    }]
});

Modifying the color of the points is oblivious however, how is it possible to change the color of the line between them?

Suppose I want the line in the given example on the fiddle to be green only between x = 3 and x = 5 - how is that possible?

Upvotes: 3

Views: 8912

Answers (1)

ewolden
ewolden

Reputation: 5803

To color part of the graph, you can use zones.

If you include this in the series you have above it will color 3 to 5 red.

zoneAxis: 'x',
zones: [{value: 3}, {value: 5, color: 'red'}]

Zones work by coloring up to value. That means that we have to make one element with value 3 and no color to pass on whatever color is set elsewhere. The element with value 5 will therefore color from 3 to 5.

Working example: http://jsfiddle.net/qjmjd34d/6/

API on series.line.zones: https://api.highcharts.com/highcharts/series.line.zones

Upvotes: 6

Related Questions