Apexcharts - donut - change the percentage labels on the donut to the legend

user_18862028 0
Viewed 1135

I am looking to create a donut chart where instead of the pieces of the pie showing the percentage of the total, i'd like it to highlight the label/legend for each element?

I have tried using the formatter function e.g.

  formatter: function(value, { seriesIndex, dataPointIndex, w }) {
    return w.config.series[seriesIndex].name + ":  " + value.toFixed(0)+ " %"
  },

But this generates labels on each of the donut segments - undefined: 26 %

Would appreciate any thoughts on how to do this.

Many thanks,

Nigel

donut-chart apexcharts legend label
1 Answers

For donut charts, the labels are stored separately from the data value (i.e. series).

When creating the chart you'll pass these values:

options = {
    series: [44, 55, 13, 33],
    labels: ['Apple', 'Mango', 'Orange', 'Watermelon']
}

Or if using React/Vue:

series: [44, 55, 13, 33],
chartOptions: {
    labels: ['Apple', 'Mango', 'Orange', 'Watermelon']
}

(Both examples from the documentation, with slight modification.)

This means that to access the labels in the formatter function, we need to reference labels instead of series. We can also drop the .name.

  formatter: function(value, { seriesIndex, dataPointIndex, w }) {
    return w.config.labels[seriesIndex] + ":  " + value.toFixed(0)+ " %"
  },
user_20645960
Related