Apexcharts.js: Question: Access chart data inside legend

[apertureless]

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.

[apertureless]

Sweet! Thanks 🙏

Followup question: Is it possible to pass in custom markup for the labels?

[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 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

[apertureless]

Ah I see, thanks!

[MedinaGitHub]

opts.globals NOT WORKING now working with opts.w.globals

[junedchhipa]

The params have changed a little bit for legend.formatter function in the last update v2.2.1
Please see the docs - https://apexcharts.com/docs/options/legend/#formatter

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

[gemmagarcias1]

tspan:nth-child(3)

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 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

Is not working anymore? I need it...

[chaimmw]

I am trying to return an array from the legend formatter, but I am getting a type error

(method) ApexLegend.formatter?(legendName: string, opts?: any): string
Type '(val: string) => string | string[]' is not assignable to type '(legendName: string, opts?: any) => string'.
  Type 'string | string[]' is not assignable to type 'string'.
    Type 'string[]' is not assignable to type 'string'.ts(2322)
apex-types.d.ts(643, 5): The expected type comes from property 'formatter' which is declared here on type 'ApexLegend'