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

<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.