CODEWITHSUNDEEP
reactjsnext.jsapexcharts
Govinda Regmi
Govinda Regmi

Reputation: 5

How to Create a Conical Gradient Fill in ApexCharts?

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: https://codesandbox.io/p/devbox/86y863

Github-Discussion: https://github.com/apexcharts/apexcharts.js/discussions/4930

Image

Upvotes: 0

Views: 57

Answers (0)

Related Questions