Grid lines overlapping legends

[drashtipatoliyaARIS]

Description

I am facing issue in floating legends. legends are overlapped by gridlines

Steps to Reproduce

Attaching code of legend config: legend: { show: true, showForSingleSeries: true, position: 'left', horizontalAlign: 'left', floating: true, fontSize: '12px', offsetX: 20, offsetY: -4, markers: { width: 15, height: 2, radius: 0, offsetY: -3 }, tooltipHoverFormatter: function (seriesName, opts) { return seriesName + ' - ' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex]?.toFixed(2) + ' %' + '' } }

I have more than 10 legends which I want to place on left portion of line chart. But lines overlap some of the legend text. as length is more so legends can appear at any place. is there a way to set zindex of the legends more? I tried with CSS. it is not working.

Expected Behavior

Actual Behavior

Screenshots

Reproduction Link

https://codesandbox.io/p/sandbox/react-basic-example-forked-4fzc2q

[drashtipatoliyaARIS]

Is there any updates on this?