Closed elbojoloco closed 4 years ago
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.
@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.
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;
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.
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?
@elbojoloco That's what I was thinking about. I will implement this in the upcoming releases.
Re-opening this until a fix is released.
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
Docs require update stating this requirement.
Added docs for the synced charts - https://apexcharts.com/docs/chart-types/synchronized-charts/
Hey,
Having the same issue and warning pop up despite setting minWidth and declaring global values. none of these seem to work.
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
valueWhat 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