CODEWITHSUNDEEP
highchartsdata-visualizationpie-chartdonut-chart
Kuan
Kuan

Reputation: 11389

How to control HightChart Pie Chart/Donut Chart label font-weight in config

All:

I am pretty new to High Chart, for their PieChart/DonutChart, I wonder which config param control the font-weight of each slice label text?

For this example below, when there are so many labels, the bold font seems not quite good, I just want to use normal font

enter image description here

Upvotes: 3

Views: 2328

Answers (2)

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

You can set the fontWeight param in the style object.

dataLabels: {
            style:{
                fontWeight: 'normal'
            }
        }

Demo:

Upvotes: 4

Mike Zavarello
Mike Zavarello

Reputation: 3554

You can remove the boldface from the labels by adding <span style="font-weight: normal;"> to the formatter function in dataLabels for the "Versions" series:

dataLabels: {
    formatter: function () {
    // display only if larger than 1
        return this.y > 1 ? '<span style="font-weight: normal;">' + 
            this.point.name + ': ' + this.y + '%</span>' : null;
    }
}

Note that the </span> goes at the end of what you're returning from this function.

The resulting chart looks like this:

enter image description here

Here's an updated version of the demo fiddle: http://jsfiddle.net/brightmatrix/4tfu584x/

I hope this is helpful for you!

Upvotes: 1

Related Questions