Columns on a DateTime XAxis with a MinMax Don't Use Entire Xaxis

[tharmaman]

Description

Rendering a 'column' chart on a datetime axis with a min/max does not use the full xaxis.

This is contrasted to using a 'line' chart which applies the min/max on the xaxis as expected.

Steps to Reproduce

1. Use an xaxis of type: 'datetime
2. Add a min and max to xaxis
3. Add an xaxis label formatter function through xaxis.labels.formatter to enforce the min max as per https://github.com/apexcharts/apexcharts.js/issues/93#issuecomment-421621771

Expected Behavior

The xaxis starts at the min and ends at the max.

Actual Behavior

The xaxis renders the min and max range in the middle. With unspecified space between the xaxis start and min + max and xaxis end.

Reproduction Link

https://codepen.io/LoopBoi/pen/zxOYJxx

Notes

The example I posted is a simplified example to help with debugging and isolating purposes.. For context, this ends up being an issue for larger mixed charts like I'm working on below. Sometimes it decides to cluster all the values in the middle for whatever reason.

[jameshoward]

It's not just a datetime axis that is affected. You can recreate this with a standard column chart with x/y data and a min and max in the xaxis options - https://codepen.io/jameshoward/pen/ZYYaoVB

I did some debugging and tracked it down to Grid.gridPadForColumnsInNumericAxis using the initialMaxX and initialMinX values that are based on the data points, and not maxX / minX that take into account the min/max options - https://github.com/apexcharts/apexcharts.js/blob/main/src/modules/dimensions/Grid.js#L43

This makes the bar width calculation return a much bigger number than the eventual bar width, which is then double subtracted from the grid width - https://github.com/apexcharts/apexcharts.js/blob/main/src/modules/dimensions/Dimensions.js#L83-L85

[roordaj]

Is there a workaround until the bug is solved?