Highcharts JQuery - Changing the Colour of each Do

Question

I have a line graph that is displaying variable information (% figure each month for the last 12 months)

I would like to change the dot colour of each plot based on the result that I recieved from a Ajax call to php function. (refer to the green line)

for example below is my graph: My Graph

if the figure for the month is > 98.5 make the dot green, If the figure is between 96 - 98.5 make the dot amber and anything lower make the dot red.

Is this possible?

i tried returning an array of colours back to my ajax method and tried: name: 'Production Success Rate', color: 'responseJSON.colour, type: 'line', data: responseJSON.percent

the array responseJSON.colour that is returned is an array of hex codes.

however it seems that the color api does not allow an array as it only colours the line with the first colour in the array (unfortunatly)

can anyone help?

Answer 1

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

$(function () {
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            allowPointSelect: true,
            marker: {
                states: {
                    select: {
                        fillColor: 'red',
                        lineWidth: 0
                    }
                }
            }
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }]
});
});

see above as an example of how to change the selected marker colour as demonstrated in this fiddle. you can customise the colours by following these instructions. Good luck!

Hope this helps, Rachel :)

Answer 2

I believe what you want is to leverage the fillColor of each series point.

This can be done by manually building the data that's to be prepared for the chart, a quick example would be:

var figures = [93, 95.8, 99.2, 97.8, 98.3, 96.4, 95, 98.9, 97.2, 94.3, 97.1, 94],
        d = [];

$.each(figures, function (i, figure) {
    if (figure > 98.5) {
        d.push({y: figure, fillColor: 'green', color: 'green'});
    }else if(figure < 98.5 && figure > 96.5){
        d.push({y: figure, fillColor: '#ffbf00', color: '#ffbf00'});  //amber i guess
    }else if(figure < 96.5){
        d.push({y: figure, fillColor: 'red', color: 'red'});   
    }
}); 

Then when you build the chart, simply supply data: d and each of the dots will have a different fill color based on the above conditional..

I think this jsFiddle probably covers most of what you need.