Apexcharts.js: Synchronized charts with different width gutters become desynced

[Bilge]

If the y-axis gutters are different widths between two synchronized charts, the charts will be slightly desynchronised by however much difference there is in gutter widths.

Synchronization should track the x-axis data point rather than pixel offsets.

CodePen

[junedchhipa]

This is a known issue which is mentioned on the docs page

The workaround is to have the same width y-axis for all synced charts.

[Bilge]

Just because it's noted does not mean it's a solution, right? It's a good thing it's acknowledged, but I think this issue should remain open until such a time as a solution is in place to address it.

We cannot always know what the minimum width should be, since we cannot always know the potential scale of our data and thus how wide the y-axis gutter might need to become. Moreover, enforcing a minimum width does not prevent the widths from being different.

[junedchhipa]

Sorry that you felt offended by my last comment, I just noticed my tone wasn't right.
The reason I have left it on the user to set the y-axis width is that I have already tried setting the y-axis width for all synced charts internally. That didn't go really well after many attempts.

I will re-visit this part once I think the major issues/bugs of the library are fixed. As this is already on the docs, it will be on my mind to think about the solutions for it.

Thanks.

[Bilge]

I wasn't offended, I just think this issue should not be closed until it's resolved, don't you agree?

I don't think the solution lies in trying to match y-axis widths. I think it should be a requirement that both charts have the same x-axis data points, and if that's the case, they can be synchronized on the currently selected x-axis value rather than using pixel offsets.

[junedchhipa]

You're right. I will think about an alternative way as you described. Thanks for the input.

[Bilge]

@junedchhipa I made a CodePen to help you diagnose this issue because it's important to me so I want to make it as easy as possible for you to fix :)

[Fnizou]

Hello, I have the same problem with two types of graph, it would really be necessary that the synchronization be done by the value in X and not by the positioning in px, it will be great to find a solution, similar, I am stuck in my project, Thanks to you,

[Bilge]

@junedchhipa Is this something that can be fixed without too much difficulty? It's still a major problem.

[Fnizou]

in the meantime maybe do a hack in css :
class="apexcharts-inner apexcharts-graphical" transform="translate(33.125, 30)"
the concern is on the x of the transform, it must be constrained in the same way on the two graphs,

Maybe also :

.apexcharts-yaxis{
min-width:150px;
overflow:hidden
} 

it's just a track,
good luck

[Bilge]

@Fnizou Any hack with absolute values is invalid because each chart has different data with different scales and different gutter widths.

[Fnizou]

yes it's true,
you can make a JS loop on all the graphs, and apply the widest width to them ...
But @junedchhipa will fix it soon ;)

[caiosantanaj]

Hi!

I have the same issue! I'm trying to do a synchronized chart with a multi-axis and a single axis. A better way to sync size will be very welcomed!

I fixed my problem putting a second axis in my single chart and changed the color of the label to the same color of the background

[JaMinsane]

@caiosantanaj Nice idea. Can you share some code? I'm pretty confused how change the color of the second Y-axis of the second chart. I hope you can help me. Thanks!

[caiosantanaj]

Sorry for the delay @JaMinsane!
I hope this can help: https://codesandbox.io/s/currying-water-ucreb?file=/src/example.js

Just search for "#f00" or HERE in the sandbox

[Bilge]

I have abandoned this charting library at this point.