Highchart - Change Color Of One X-axis Label Only

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/samp

Solution 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 {
            returnthis.value;
        }
    }
}

Solution 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 = newHighcharts.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

Solution 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:

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

Solution 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)) {
                returnthis.y > 0.1 ? '<span style="fill: red;">' + this.point.name + ': ' + this.y + '% ' + '</span>' : null;
            } else {
                returnthis.y > 0.1 ? '<span style="fill: #006400;">' + this.point.name + ': ' + this.y + '% ' + '</span>' : null;
           }
        }
    }

Solution 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 {
                    returnthis.value;
                }
            }
        }
    },