Multiple color gradient in line chart

[jsinhSolanki]

Hi, I want to add multiple color in my line chart with gradient.
I tried everyting I can but chart is only getting 2 colors.

Example is here

What I want:
Multiple gradient colors. Like below

[junedchhipa]

Sorry, this is not possible currently with ApexCharts.
Maybe in future, I will provide an option to specify an unlimited number of colors in gradients.

[jsinhSolanki]

OK @junedchhipa

Thanks

[ghost]

I need custom colors for gradients too.

[junedchhipa]

Multiple gradient stops will be available in v3.3.2

[junedchhipa]

Released 3.4.1
The multi-stops gradient is now available

Codepen example

[alon-loris]

How can I give the markers the relevant color as well?

[Scarecr0w9758]

How can I give the markers the relevant color as well?
I found out how you can do it.

Use discrete markers

1) Check how much data you need to place on chart (my case - 12 is max count, but you can pass data.length)

My series variable:

2) Create your array of discrete markers (I'm using Vue3 composition API). In this array you create objects that will be placed to charts option. Here you can pass the color using data indexes from your server

I wrote a switch-case function to get colors using my needs:

3) Apply your discrete markers to options:

4) So i got smth like that:

!!! Note that markers inside tooltip would be not that cool)