Synced charts padding variation (causes hover issues)

[elbojoloco]

Explanation

The labels are exactly the same on both charts. The only difference is the value of X. Not many custom options are set other than the markers and some tooltip/label formatting. The charts are also exactly the same width/height.

• What is the behavior you expect? The padding to be synced so that the hover position matches precisely.

• What is happening instead? Padding seems to be also dependant on x value

• What error message are you getting? None

I just found out this issue is also present in the docs sync example: https://apexcharts.com/vue-chart-demos/line-charts/syncing-charts/

I've added rulers to try visualize the problem more, apperantly the extra padding is only on the left side of the chart. The right side is still in sync. https://imgur.com/a/JWntKF4

[elbojoloco]

By adding some more rules to identify differences between the 2 charts I've came to the conclusion that it's the y-axis labels pushing the grid aside. It should be made so that y-axis labels are pushed left instead of pushing the grid right, or at least for grouped charts so that they hover offsets align perfectly.

[junedchhipa]

@elbojoloco Thank you for digging out the issue. One option is to ask the user to provide a yaxis.labels min-width for all grouped charts and it has to be the same for all grouped charts. Another option is to automatically set the min-width for y-axis when the charts are grouped.

I will look more into which option is more feasible. Thanks for reporting.

[elbojoloco]

The minWidth option doesn't seem to work for me.

    options: {
        chart: {
            id: 'clicks',
            group: 'charts'
        },
        yaxis: {
            labels: {
                minWidth: 34
            }
        }
    },

The width is still 18px;

[junedchhipa]

Maybe something else is interfering. May I get a working codepen example? I just checked out the yaxis.labels.minWidth for the syncing charts example, and it works fine.

[elbojoloco]

I was checking the

Edit: there seems to be a padding on the chart of 25 px (on the left side) so to correctly get the minWidth value you need is (25 + widthOfLabels). Is it possible to add default behavior that grouped charts have an equal minWidth of the widest labels in the group?

[junedchhipa]

@elbojoloco That's what I was thinking about. I will implement this in the upcoming releases.

[junedchhipa]

Re-opening this until a fix is released.

[junedchhipa]

Added a console.warn which asks the user to provide yaxis.labels.minWidth when charts are grouped. Setting the width automatically required a lot of calculations for all charts, so decided to add a console.warn

[junedchhipa]

Docs require update stating this requirement.

[junedchhipa]

Added docs for the synced charts - https://apexcharts.com/docs/chart-types/synchronized-charts/

[jesseglab]

Hey,

Having the same issue and warning pop up despite setting minWidth and declaring global values. none of these seem to work.