Apexcharts.js: Feature : per-serie options

[atoy40]

Hello,

Is it possible to set per-serie options, for example different stroke width, fill type, etc... ? The only one I've seen is the color through the "colors" array

Anthony.

[junedchhipa]

Hi @atoy40

Good question and I have thought about this while creating configurations.

The reason I have not provided design config in the series is that I wanted to the keep data independent from all other configuration.

But, some options accepts an array which corresponds to the series index.

Some of those properties
stroke.width
markers.colors

The fill option currently doesn't accept an array, because it will require some drastic change in modules/Graphics.js. Will think about it.

Thanks for the suggestion

[atoy40]

Thanks !
I've another question about series, have you thought about having a 2nd Y axis on the right to display series which are not on the same "scale" ?

[junedchhipa]

Yes, have you checked out this?
https://apexcharts.com/javascript-chart-demos/mixed-charts/line-column/
The two series are not on the same scale in the example

[atoy40]

Oh yes, not enough doc reading :) sorry !!

[junedchhipa]

No worries

[codezion]

Seems there is no way to have two scales and several series in each. All can be put to one or each can have their own, but no combination. Is it possible to add that feature or is there some way to get it working now?

[junedchhipa]

It is possible to have a variable number of scales and multiple series for each scale. You have to relate yaxis to chartID. I will provide an example soon.
Also, as this is a very common requirement, I will write a post on how this can be done.

[junedchhipa]

Here you go: https://codepen.io/junedchhipa/pen/KGqwmd

In the demo, you can see - you have 3 series, but only 2 scales. You can control which series uses a particular scale in the yaxis property. Try changing the seriesName in yaxis and see how it corresponds with the series.

[codezion]

Thank you. The example works but it is not so simple with the real data. There seems to be hidden rules:
-As many elements in yaxis as in series
-only the last serie in that scale can be selected as common name for the scale, only way max and min do not hang the script
-forced to use max and min (only values from one scale checked automatically)
-max and min must be only at that right element in yaxis (last in a scale)
-min: -20 works only when some negative number in a serie
I try to create script that analyze data sets and create working yaxis configuration based on these rules.
Easier way to configure could be that scales can be defined separately and then scale name is given in yaxis

[junedchhipa]

Do you have an example of any other chart library that implements the way you described?
Can you create some codepen demos to illustrate the issues you faced?
Thanks

[codezion]

In chart.js there are yaxis with id and that id can be given to the dataset, so can be like yaxis with only 3 elements and 20 datasets pointing to those like I have now. Actually trying to port that implementation to use Apexcharts instead to get more speed. There are huge amount of datapoints in those.

In your example if you write min:-20 to first yaxis elment, it crash. In the second it do not. then if you add negative value to first serie, it do not affect, but if you add to second, the scale changes.

[junedchhipa]

Thanks for providing the details.
Yes, it crashed when I tried min: -20 in the y-axis. It's a small bug which I have just fixed while testing.

Regarding your other points, I am carefully testing each y-axis by providing min/max to each y-axis.
Soon, these minor issues will be resolved.