Question: Access chart data inside legend

Hi,

is it possible to access the chart data inside the legend? For example I want to show the individual value next to the legend text in a doughnut chart.

labels: ['A', 'B', 'C']
series: [100, 20, 55]

And the legend should display:

🔴  A - 100
🔵  B - 20
⚫️  C - 55

However inside the legend.formatter I have only access to the label itself.

[junedchhipa]

Very good point and I have already taken that into consideration. You can do it like this

legend: {
    formatter: function(label, opts) {
        return label + " - " + opts.w.globals.series[opts.seriesIndex]
    }
}

Will add in the docs.

[junedchhipa]

Not directly, but there is another way you can style your legend text elements.

If you return an array in the legend.formatter function, your texts are split into different tspan elements inside the parent <text> element. So, you can then target them with CSS and apply styles.

Here is how you would format the legend.formatter function

legend: {
    formatter: function(val, opts) {
        return [val, " - ", opts.w.globals.series[opts.seriesIndex]]
    }
}

and then you can apply CSS like

.apexcharts-legend-text tspan:nth-child(1) {
    font-weight: lighter;
    fill: #999;
}

.apexcharts-legend-text tspan:nth-child(3) {
    font-weight: bold;
}

which will result in legend like these