How to edit the html of a highchart label?

Question

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]
            ]
        }]
    });
});

Answer 1

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>