How to change the font properties in a pie highchart?

Question

I'm using the pie Highchart.js plugin, and I'm trying to change some font properties of the labels which contains the type of the percentajes.

I tried this but does not work... http://tinker.io/3fc64/6

JS

$(function () {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            style: {
                fontFamily: 'Lato',
                color: "red"
            }
        },
        plotOptions: {
            pie: {
                cursor: 'pointer'
            }
        },
        credits: false,
        title: false,
        tooltip: false,
        series: [{
            type: 'pie',

            data: [
                {
                    name: 'Example1',
                    y: 40,
                    sliced: true,
                    color: "rgb(10,200,23)"
                },
                ['Example2',   12.0],
                ['Example3',       26.8],
                ['Example4',    8.5],
                ['Example5',     6.2],
                ['Example6',   0.7]
            ]
        }]
    });
});

CSS

@import url(http://fonts.googleapis.com/css?family=Lato);

HTML

<div id="container" style="width:100%; height:400px;"></div>

---

What I miss? Any idea or advice to do this? Thanks in advance.

Solution

You can set the inline style that is produced by Highschart.js, by adding a dataLabels block with to the plotOptions -> pie and defining some style properties:

plotOptions: {
    pie: {
        cursor: 'pointer',
        dataLabels: {
            enabled: true,
            color: 'red',
            style: { fontFamily: '\'Lato\', sans-serif', lineHeight: '18px', fontSize: '17px' }
        }
    }
}

and here is your updated tinker.

If you want to control the color of the font also in the style block, you need to use the fill property.

This are the properties that get set by default (and you might want to override with the style settings):

font-family:'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#666;
line-height:14px;
fill:#666;

but you can define a lot more if you need.

Note: You can also control the style for individual labels by passing the dataLabels object through the data block, the way you defined the style of one of your pie wedges:

{
name: 'Example1',
y: 40,
sliced: true,
color: 'rgb(10,200,23)',
dataLabels: { style:{ /* your style properties here */ }}
}

Comments

[mllamazares]

Really thanks! works perfect and you give us a good explanation!