How Can I Add Custom Styles To The Legends Of Pie Chart?

Contents hide

1 How can I add custom styles to the legends of Pie Chart?

Problem Description:

I am using a Highchart of type Pie with Legends. My requirement is simple, I just want to add some custom styling to the fonts of the legend (color, fontSize, fontWeight). I tried using the style attribute but it’s not working. I am referring to this demo of the pie chart – Demo-PieChart

I tried using the following method but it’s not working.

legend: {
        labelFormat: '{name}:{percentage:.1f}%',
      style: {
        color: '#b74096',
        fontSize: '12px'
      }

Can someone please help me with this?

I tried using the style attribute but it’s not working. I also referred to the API references provided but still wasn’t able to solve the problem.

Solution – 1

You need to use the itemStyle property:

  legend: {
    labelFormat: '{name}:{percentage:.1f}%',
    itemStyle: {
      color: '#b74096',
      fontSize: '12px'
    }
  }

Live demo: https://jsfiddle.net/BlackLabel/0r4ynsx5/

API Reference: https://api.highcharts.com/highcharts/legend.itemStyle

Rate this post