apexcharts / apexcharts.js

📊 Interactive JavaScript Charts built on SVG
https://apexcharts.com
MIT License
14.03k stars 1.28k forks source link

RangeBar not grouping correctly when xaxis type: datetime and horizontal: false #4480

Open Joshua-White-TRP opened 1 month ago

Joshua-White-TRP commented 1 month ago

Description

RangeBar charts using the datetime axis will not align correctly in columns with grouping and overlap options set to false. I posted a similar issue in the past (#3419) which was fixed, but this seems to only be for the category type of xaxis.

Steps to Reproduce

  1. Create a rangeBar chart
  2. Provide series in the format [{ name, data: [{ x, y: []}, ...] }, ...] - (ensure that x is a timestamp)
  3. Set xaxis type: datetime
  4. Set rangeBarGroupRows: true and rangeBarOverlap: true
  5. Set horizontal: false

Expected Behavior

When rangeBarGroupRows and rangeBarOverlap are set to true, the bars should be grouped regardless of horizontal being true or false.

Actual Behavior

The rangeBar chart only handles the grouping correctly if horizontal is set to true. It doesn't group the bars inline when horizontal is set to false.

Screenshots

Working as expected. (horizontal: true, xaxis: datetime) image

Not working as expected. (horizontal: false, xaxis: datetime) image

Working as expected in old codepen. (horizontal: false, xaxis: category) image

Reproduction Link

Edit plotOptions.bar.horizontal between false and true values to see the difference: https://codepen.io/TRP_Kazel/pen/ExzKbGm

Codepen from issue (#3419) which shows a similar configuration working correctly with xaxis type category: https://codepen.io/TRP_Kazel/pen/zYjMQzY