Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

X-axis labels are prematurely trimmed when rotate is enabled for horizontal bar charts #577

Open
Kshitijde opened this issue Feb 19, 2024 · 0 comments

Comments

@Kshitijde
Copy link

Kshitijde commented Feb 19, 2024

Description

X-axis labels are prematurely trimmed when rotate is enabled for horizontal bar charts. This is observed when the number of "bars" are relatively less in number. However these configurations work as expected for vertical bar charts.

Library Versions:
"react-apexcharts": "1.4.0",
"apexcharts": "3.44.0",

Steps to Reproduce

  1. Construct a horizontal bar chart having a handful of bars to display the data
  2. Enable and rotate X-axis labels
  3. Enable the trimming parameter

Expected Behavior

The X-axis labels should get trimmed only when the text length crosses a certain threshold. Works fine for vertical bar charts.
https://codepen.io/kshitijdeshpande/pen/dyrrjyG

Actual Behavior

The X-axis labels get trimmed as expected when rotate is disabled, but even a 1 degree rotation causes almost all of the labels to be trimmed ( represented as a '.' ). This happens even though there is sufficient space for the label to be visible in their entirety in the given space.
https://codepen.io/kshitijdeshpande/pen/vYPPrpE

Screenshots

image

Reproduction Link

https://codepen.io/kshitijdeshpande/pen/vYPPrpE

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant