Custom Legend Marker

[Muhammad-bK]

I am trying to customize the shape of the markers in the legend from circle to a pill (each with a different color), the customHTML function helps in that regard but I think currently there is no support for identifying the series index of individual markers. In the custom tooltip function we have alot of arguments available in the callback function that help identify individual series and data points as shown in the documentation docs

tooltip: { custom: function({series, seriesIndex, dataPointIndex, w}) { return '<div class="arrow_box">' + '<span>' + series[seriesIndex][dataPointIndex] + '</span>' + '</div>' } }

but no similar arguments are supported for the customHTML callback in the legend markers docs

markers: customHTML: function() { return '<span class="custom-marker"><i class="fas fa-chart-pie"></i></span>' } },

it would be really helpful to have something like the following

markers: { customHTML: function(seriesIndex) { return <div style=" width: 20px; height: 8px; background-color: ${seriesIndex === 0 ? ColorBaseAmber400 : ColorBaseViolet600}; border-radius: 20px; display: inline-block; "></div; },

[Muhammad-bK]

I just realized you can pass an array of customHTMLs as follows

customHTML: [html for seriesIndex 1, html for seriesIndex 2, ....]

legend: { position: 'bottom', markers: { customHTML: [ () => { return <div style=" width: 20px; height: 8px; border-radius: 20px; display: inline-block; background-color: ${ColorBaseAmber400}; "></div>; }, () => { return <div style=" width: 20px; height: 8px; border-radius: 20px; display: inline-block; background-color: ${ColorBaseViolet600}; "></div>; }, ], }, },