react-apexcharts icon indicating copy to clipboard operation
react-apexcharts copied to clipboard

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

Open Kshitijde opened this issue 1 year ago • 1 comments

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

Kshitijde avatar Feb 19 '24 10:02 Kshitijde