javascript - How to change the font properties in a pie highchart? -

i'm using pie highchart.js plugin, , i'm trying change font properties of labels contains type of percentajes.

i tried 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 miss? idea or advice this? in advance.

you can set inline style produced highschart.js, adding datalabels block plotoptions -> pie , defining style properties:

plotoptions: {     pie: {         cursor: 'pointer',         datalabels: {             enabled: true,             color: 'red',             style: { fontfamily: '\'lato\', sans-serif', lineheight: '18px', fontsize: '17px' }         }     } } 

and here updated tinker.

if want control color of font in style block, need use fill property.

this properties set default (and might want override 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 can define lot more if need.

note: can control style individual labels passing datalabels object through data block, way defined style of 1 of pie wedges:

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