I'm working on a chart using ApexCharts in a Next.js project and have encountered an issue while trying to apply a gradient fill. Initially, I attempted to use the gradient options available in ApexCharts (vertical, horizontal, diagonal, diagonal2), but they didn't achieve the desired conical effect.

As a workaround, I decided to use an image background for the fill, where the image is a dynamically generated SVG that contains the gradient I need. The SVG is served from an endpoint, and it works well in terms of generating the gradient, but the issue is that it doesn't align properly with the chart.

For reference, you can check out the chart with a score of 95 (I have provided the sandbox link below), where this misalignment is noticeable.

Thanks a lot for any help or insights you can offer!

code-sandbox:

Github-Discussion: .js/discussions/4930

Image