How to change the font properties in a pie highchart?

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.

Answers


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

Need Your Help

some thing like browsing file in jquery

javascript jquery javascript-events jquery-selectors

I want to create a page, some thing like browsing a file. Now i have this question:

Facebook Javascript-SDK way of checking if a user liked a certain page or not

javascript jquery facebook facebook-javascript-sdk

I created a Facebook app mostly built in jQuery. I need to now check if a user liked a particular page. However, this needs to be added to a jQuery click() function (so if the user clicks on the bu...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.