Reputation: 8206
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
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