Highcharts JQuery - Changing the Colour of each Dot Point

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

Answer 1

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.