mllamazares
mllamazares

Reputation: 8206

How to edit the html of a highchart label?

I have a highchart pie chart which have the labels with the following format:

{point.name} <div class="pct">{point.percentage:.2f}%</div>

But unfortunatly, the div is deleted when the labels are loaded.

There is any way to apply the class so the percentajes got the same apperance independently of the style of the label?

Here is the jsfiddle where you can try: http://jsfiddle.net/69x7a/5/

HTML

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

CSS

.pct {
    color: blue;
    font-size: 8px;
}

JS

$(function () {
    $('#container').highcharts({
        plotOptions: {
            pie: {
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '{point.name} <div class="pct">{point.percentage:.2f}%</div>'
                }
            }
        },
        series: [{
            type: 'pie',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    dataLabels: {  
                        style: {
                            color: "#ff0000",
                            fontFamily: 'serif',
                            fontSize: '17px'
                        }
                    }
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]
        }]
    });
});

Upvotes: 0

Views: 102

Answers (1)

juvian
juvian

Reputation: 16068

Seems class is removed, but you can do this:

                format: '<b >{point.name}</b>:<span style="color: blue;font-size: 8px;"> {point.percentage:.1f}%</span>

Upvotes: 2

Related Questions