Accepted answer

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;

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 */ }}

Related Query

More Query from same tag