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

Answer 3

Note that when you use the highcharts exporting server at exporting.highcharts.com to render images for your graphs, javascript formatters will not be executed.

Fortunately highcharts translates some html tags and style attributes of individual label and title strings into equivalent SVG styling, but it is quite finicky about how it parses the html. It will strip tags that are using single quoted attributes, you need to use double quotes. Also, nesting a <br/> tag inside another tag will not work.

So if you want two lines of text colored red for example, you get:

<span style="color: #ff0000">First line</span> <br/> 
<span style="color: #ff0000">Second line</span>

Answer 4

I am using dataLabels in a doughnut pie chart. I wanted to change the label text colors for individual pie slices, based on conditional logic, comparing values.

Just sharing because my search brought me here.

data: outerData,
dataLabels: {
    formatter:
        function () {
            if ((outerData[this.point.x].y > innerData[this.point.x].y) && (this.point.x != 0)) {
                return this.y > 0.1 ? '<span style="fill: red;">' + this.point.name + ': ' + this.y + '% ' + '</span>' : null;
            } else {
                return this.y > 0.1 ? '<span style="fill: #006400;">' + this.point.name + ': ' + this.y + '% ' + '</span>' : null;
           }
        }
    }

Answer 5

 xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        labels: {
            formatter: function () {
                if ('Jan' === this.value) {
                    return '<span style="fill: blue;">' + this.value + '</span>';
                } else {
                    return this.value;
                }
            }
        }
    },