This may sound like a really simple question but I've spent hours trying to acplish this and it's making me feel very frustrated.

Please can someone tell me how to set the colour of the name in a series? I was able to fully configure all other aspects of my chart but the series name remains black.

I saved one of the Highchart examples here / how do I set the text "Meteorological data" in the series to blue or red or anything other than black.

    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],
        name: 'Meteorological data',
        color: "red",
        font-color: "blue" ??? <-- how
}]

Is it simply not possible?

Thank you,

Dan

This may sound like a really simple question but I've spent hours trying to acplish this and it's making me feel very frustrated.

Please can someone tell me how to set the colour of the name in a series? I was able to fully configure all other aspects of my chart but the series name remains black.

I saved one of the Highchart examples here http://jsfiddle/ktnexbcr/ how do I set the text "Meteorological data" in the series to blue or red or anything other than black.

    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],
        name: 'Meteorological data',
        color: "red",
        font-color: "blue" ??? <-- how
}]

Is it simply not possible?

Thank you,

Dan

• javascript
• json
• highcharts

• The 'series' doesn't have a font to apply a color to. Are you referring to the series entry in the legend? If so, look at the API docs for the legend instead of the series. – jlbriggs Commented May 13, 2015 at 14:44

3 Answers 3

Legend is what your after, you need to look in the docs http://www.highcharts./docs/chart-design-and-style/themes

$(function () {
    $('#container').highcharts({
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],

        },

        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],
            name: 'Meteorological data',
            color: "red",

        }],

        legend: {
        itemStyle: {
            color: 'blue'
        }  
    }
    });
});

fiddle here

You need to use legend.labelFormat or legend.labelFormatter. For example:

    legend: {
        labelFormat: '<span style="color:{color}">{name}</span>'
    },

Demo: http://jsfiddle/ktnexbcr/2/

you can set mon styles using following codes across charts

Highcharts.setOptions({
    chart: {
        style: {
            fontFamily: 'serif'
        }
    }
});

to set legend color

    legend: {
        itemStyle: {
            color: 'red',
            fontWeight: 'bold'
        }
    },

highcharts example

For more available option, refer this link