How to change font properties in high pie graphics?

Question

I am using the pie plugin Highchart.js and I am trying to change some font properties of shortcuts that contain a percent type.

I tried this but did 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 am I missing? Any idea or advice for this? Thanks in advance.

Answer 1

You can set the inline style created by Highschart.js by adding a dataLabels block to 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 font color also in the style block, you need to use the fill property.

These are the properties that are set by default (and you can override them with 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 to.

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

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