search

apexcharts / react-apexcharts

📊 React Component for ApexCharts
https://apexcharts.com
MIT License
1.31k stars 158 forks source link

X-axis labels don't auto-rotate after crossing a threshold in horizontal bar charts #578

Open Kshitijde opened 8 months ago

Kshitijde commented 8 months ago

Description

X-axis labels don't auto-rotate after crossing a threshold in horizontal bar charts. They auto-rotate by 45 degrees as expected for vertical bar charts but don't for horizontal ones.

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

Steps to Reproduce

  1. Create a horizontal bar chart
  2. Ensure you have large labels on the x-axis
  3. Ensure "rotateAlways" if passed as a parameter is false (this is the default value if not passed)

Expected Behavior

X-axis labels auto-rotate after they don't fit in the provided space.

Actual Behavior

No rotation occurs. Labels are still displayed normally and are not easy to read.

Screenshots

image

Reproduction Link

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

Works fine in vertical bar charts: https://codepen.io/kshitijdeshpande/pen/XWGGBdL

github-actions[bot] commented 3 months ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.