CODEWITHSUNDEEP
javascriptjqueryjsonhighcharts
suma
suma

Reputation: 49

how to get dynamic color change based on values in highcharts

I am trying to plot a graph using high charts. I need to get colour changed based on the flag values .

I tried using this but I am getting only points are changed based on the flag, but I am not getting the line coloured .

here is my code.

$(function () {
var getColor = {'g' : '#008000',
            'r' : '#FF0000',
            'b' : '#000000'};
$('#container').highcharts({
    title: {
        text: 'Monthly Average Temperature',
        x: -20 //center
    },
    subtitle: {
        text: 'Source: WorldClimate.com',
        x: -20
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
        title: {
            text: 'Temperature (°C)'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: '°C'
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    }, series: [{
        name: 'London',
        data: [{y:3.9,flag:0,color:'#000000'},{y:4.2,flag:0,color:'#000000'},{y:5.7,flag:1,color:'#008000'},{y:8.5,flag:0,color:'#000000'},{y:11.9,flag:0,color:'#000000'},{y:15.2,flag:0,color:'#000000'},{y:17.0,flag:0,color:'#000000'},{y:16.6,flag:0,color:'#000000'},{y:14.2,flag:2,color:'#ff0000'},{y:10.3,flag:0,color:'#000000'},{y:6.6,flag:1,color:'#008000'},{y:4.8,flag:2,color:'#ff0000'}]
    }]
}/*,function(chart){
$.each(chart.series[0].data,function(i,data){

    if(data.flag == 0){
    console.log('green');
    color : getColor['g']}
    if(data.flag ==1){
    console.log('black');
    color : getColor['b']}
    if(data.flag == 2){
    console.log('red');
    color : getColor['r']}
    });

}*/);
 });

please help me out. need to get the colored line along with the point.. i m not getting where i m doing wrong, plzzzz help me.

Upvotes: 0

Views: 2116

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

You can use Multicolor series plugin, for example: http://jsfiddle.net/sz0esszz/11/

Simply change type of the series to coloredline and for each of the points set segmentColor, which defines line color between current point and next point.

Upvotes: 3

Related Questions