Multiple Y axis cause the axis to crop

[Carniatto]

When using multiple Y axis the positioning of the left axis is wrong resulting in copping of the title

[junedchhipa]

No, that space shouldn't exist.
Some other users have also reported the same issue when using multiple y-axis - and it's on my roadmap.

[Carniatto]

@junedchhipa if you point me in the right direction I can help fix this and open a PR

[junedchhipa]

@Carniatto This is fixed in 8817230
Not merged into master yet, because other related y-axis issues are being processed.

The code for this is located in src/modules/axes/Yaxis.js & src/modules/Dimensions.js
Thanks for offering help

[Carniatto]

@junedchhipa This is still happening in ver 1.5.3

[junedchhipa]

Can you please show me your example code for which this is happening?
Maybe I have missed some config - here it works correctly
https://apexcharts.com/javascript-chart-demos/mixed-charts/multiple-yaxis/

[Carniatto]

@junedchhipa just tried with the latest version 2.0.6 and the problem persists :(
here's an example: https://stackblitz.com/edit/angular6-apexcharts

I think the problem is when you use formatters for labels it will not consider it

[junedchhipa]

Hi @Carniatto
I will take a look again. Seems like the yaxis labels needs extra attention when there are multiple y-axes. Thanks for providing the example, will be helpful.
Re-opening this.

[Carniatto]

Hi @junedchhipa this bug is still happening under the same circumstances. Do you mind to check it?

[junedchhipa]

I need to rewrite the routine for yaxis titles calculations for multi-axes or write better tests. Thanks for reporting.

[saurabhnemade]

This is still breaking.

[saurabhnemade]

I ended up adding:

yaxis: {
     title: { offsetX: 10 }
}

but it would be nice if we can fix it permanently without adding offset.

[znfgnu]

I met similar problem today with single Y axis. In my project I use Vue flavor of ApexCharts alongside Quasar framework.

In my case the chart is contained in a dialog box that is hidden by default. I noticed that the amount of Y axis title that is cropped varies every time I open this dialog. By default the dialog has opening/closing animation time of 300 ms.

I tried to change this time to 0 ms and 1000 ms. In the first case the problem with cropped description disappeared. Making it very long causes cropping even worse (crops some of the numerical values).

I don't know much about ApexCharts' internals but it looks like dimensions used for Y-axis titles calculation are fetched too early - when the containing element hasn't achieved it's final size.

0 ms / 1000 ms: