Problem with multiple yAxis & toggleSeries()

[lukaszflorczak]

Demo: https://codepen.io/lukaszflorczak/pen/yrpWgZ

I have a chart like that in my project. I have 6 series of data: 1-4 use common y-axis on the left and 5-6 use common y-axis on the right. I also have buttons to disable/enable each series.

const initialYaxis = [
	{ seriesName: 'wideContacts', show: true },
	{ seriesName: 'wideContacts', show: false },
	{ seriesName: 'wideContacts', show: false },
	{ seriesName: 'wideContacts', show: false },
	{ seriesName: 'netValue', opposite: true, show: true },
	{ seriesName: 'netValue', opposite: true, show: false }
]

---

Problem 1

If I disable for example the first series I need to change params of y-axis for series 2-4 because the first series y-axis is not visible. In the demo, you can see prepareYaxis() method for this. And it looks that it works. Unfortunately, if I disable any series I can't enable it again.

In this issue: apexcharts/apexcharts.js#366 I got a suggestion to use showAlways option, but I'm doing something wrong or it doesn't work when I toggle the data series.

I tried to use render() method, but it doesn't work (exist?). In the local environment, I use [email protected] and [email protected].

How should I do charts like that? Where is the problem?

---

Problem 2

It's not so important for me at this moment, and maybe it's related to problem 1, but... At the beginning I see all data in the tooltip together:

But if I disable one of the series I see the separate tooltip for each chart/series:

I mentioned it here: apexcharts/apexcharts.js#367 before.

---

PS. I hope it's not a problem that I start a new issue. But I thought it would be better to start a new one in vue-apexcharts repo because maybe some of those problems are specific just for the Vue version.

[junedchhipa]

Thank you for the detailed description and sorry for the delayed response.
In a multi-axis chart, you don't need to prepare y-axis is one of the common series gets collapsed.

Such an issue has already been fixed previously, but I will check again.
I will be back with some workaround/fix for this, thanks!

[lukaszflorczak]

In a multi-axis chart, you don't need to prepare y-axis is one of the common series gets collapsed.

But if I use a config like this one:

const initialYaxis = [
	{ seriesName: 'wideContacts', show: true },
	{ seriesName: 'wideContacts', show: false },
	{ seriesName: 'wideContacts', show: false },
	{ seriesName: 'wideContacts', show: false },
	{ seriesName: 'netValue', opposite: true, show: true },
	{ seriesName: 'netValue', opposite: true, show: false }
]

and when I disable first serie, the left yaxis (even if serie 2, 3 and 4 are active) is invisible. Is there another solution for this case?

You tagged my issues as bug. Is there any progress?

[junedchhipa]

Sorry, no progress yet. I have been occupied with a major refactor looking into the increasing bundle size.
Thanks for the additional info, I will definitely try to fix it soon.

[caoguotao]

meet the same problem in Vue project. until I find that when toggling legend the series props will change,
so I try cloneDeep the series as a computed property return

[junedchhipa]

The issue is fixed as specified in the commit mentioned above.
The patch will be released today in 3.6.12

[lukaszflorczak]

Hi! Thank you for the update. Unfortunately, I still have a problem with yAxis and I can't achieve the intended effect. It's very important for our project.

EDIT: I'm sorry – probably it works with showAlways param now. I'll confirm soon.

[junedchhipa]

Yeah, the showAlways param is important and will help in achieving the intended result.

[lukaszflorczak]

Generally, after update, we find a lot of strange situations:

For example in this case:

1. The red line shouldn't be visible
2. The red line highest point should be on the same point/day as the dark one

But finally, we resigned from toggleSeries() method and now we just change series dynamically –  if we want to disable one of them we just change them by an empty array.
And then probably everything is working right.