HighCharts API pie chart CSS how to select drilldown labels

Question

I have made a pie chart using highcharts and making a chart with the following options

chart: {
          type: 'pie',
       },

and I added the below options to change the width of the text which forces each word to be on a different line

plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
              enabled: true,
              format: '{point.name} {point.y}',
              style: {
                width: 50,
                fontSize: '20px',
              },
             }
            }

I try to change the color of the label by adding a color property to the style, but it wont change the color. How would I change the color, as well as the text underline?

This is the label that I am talking about that is on my highcharts pie chart,

Thank you, also a bonus question would be, is there a way that I could make a giant white circle in the middle of the pie chart? sort of like making a hole in a donut?

tony19 tony19 · Accepted Answer · 2021-05-16T05:28:27

The label color is configured by dataLabels.color:

plotOptions: {
  pie: {
    dataLabels: {
      enabled: true,
      color: 'green', 👈
    }
  }
}

demo 1

or dataLabels.style.color:

plotOptions: {
  pie: {
    dataLabels: {
      enabled: true,
      style: {
        color: 'green', 👈
      }
    }
  }
}

demo 2

For a drilldown pie chart, the label color is configured by plotOptions.series.dataLabels.color and series.data[].dataLabels.color (where each data point can have its own color config):

plotOptions: {
  series: {
    dataLabels: {
      enabled: true,
      format: '{point.name}: {point.y:.1f}%',
      color: 'green', 👈
    }
  }
},

series: [
  {
    name: "Browsers",
    colorByPoint: true,
    data: [
      {
        name: "Chrome",
        y: 62.74,
        drilldown: "Chrome",
        dataLabels: {
          color: 'green', 👈
        }
      },
      {
        name: "Firefox",
        y: 10.57,
        drilldown: "Firefox",
        dataLabels: {
          color: 'green', 👈
        }
      },
      //...
    ]
  }
]

demo 3

drilldown.activeDataLabelStyle.color can also be used:

drilldown: {
  activeDataLabelStyle: {
    color: 'green' 👈
  },
}

demo 4

HighCharts API pie chart CSS how to select drilldown labels

1 Answers