Highchart - change color of one x-axis label only

Question

So I know how to change the color of x-axis labels in Highchart, which is described here.

http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/xaxis/labels-style/

But what if I want to change the color of just ONE label, not all the labels? How do I apply style to individual labels?

Answer 1

You can also use the label-formatter to set the style. Full example on jsfiddle:

labels: {
    formatter: function () {
        if ('Jun' === this.value) {
            return '<span style="fill: red;">' + this.value + '</span>';
        } else {
            return this.value;
        }
    }
}

Answer 2

I understood that you want to change the color for a specific item inside the x-axis.

I looked at the API but i didn't found an easy way to do it.

Since you can set a callback for the "chart ready event":

Chart (Object options, Function callback) :

Parameters

options: Object The chart options, as documented under the heading "The options object" in the left menu.

callback: Function

A function to execute when the chart object is finished loading and rendering. In most cases the chart is built in one thread, but in Internet Explorer version 8 or less the chart is sometimes initiated before the document is ready, and in these cases the chart object will not be finished directly after calling new Highcharts.Chart(). As a consequence, code that relies on the newly built Chart object should always run in the callback. Defining a chart.event.load handler is equivalent.

Returns: A reference to the created Chart object.

You can do it in a dirty way:

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

                style: {
                    color: 'red'
                }
            }
        },

        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]        
        }]
    },
    function(c){

        // this relies in that te xAxis is before the yAxis
        // also, setting the color with color: #ABCDEA didn't work
        // you have to use fill.
        $(".highcharts-axis:first text").each(function(i, label){
            var $label = $(label);
            if($label.children().text() === "Jun") {
                $label.css({fill: "blue"});                        

            }

        });

        // You also can to something like:
        $(".highcharts-axis:first text:eq(6)").css({fill: "green"});

    })
});​

Hope this helps you