timeseries bar chart with multiple series appears shifted and cutoff

[lovasoa]

Description

Initially reported in https://github.com/lovasoa/SQLpage/issues/172

Steps to Reproduce

1. Create a non-stacked bar chart with
   • a datetime x axis
   • 10 distinct date values for each series
   • 10 series

Expected Behavior

The value for the first datetime of the first series should be visible at the left of the graph. The value for the last datetime of the last series should be located at the right end of the graph.

Actual Behavior

The values for the first three series of the first date are off-screen, not visible. The values for the last three series of the last date are off-screen, not visible.

Screenshots

In this example,

• the values for S0, S1, and S2 are not visible for 2010, and
• the values for S7, S8, and S9 are not visible for 2019.

Reproduction Link

https://jsfiddle.net/wLhyq0fj/13/

Example JSON ApexCharts options and data that trigger the issue

```json { "chart": { "type": "bar", "fontFamily": "inherit", "parentHeightOffset": 0, "height": "250px", "stacked": false, "toolbar": { "show": true }, "animations": { "enabled": false }, "zoom": { "enabled": false } }, "theme": { "palette": "palette4" }, "dataLabels": { "enabled": false }, "fill": { "type": "solid" }, "stroke": { "width": 1, "lineCap": "round", "curve": "smooth" }, "xaxis": { "tooltip": { "enabled": false }, "tickAmount": 9, "title": {}, "type": "datetime", "convertedCatToNumeric": false }, "yaxis": [ { "show": true, "showAlways": false, "showForNullSeries": true, "opposite": false, "reversed": false, "logarithmic": false, "logBase": 10, "tickAmount": null, "stepSize": null, "forceNiceScale": false, "floating": false, "labels": { "show": true, "minWidth": 0, "maxWidth": 160, "offsetX": 0, "offsetY": 0, "rotate": 0, "padding": 20, "style": { "colors": [ null, null, null, null, null, null ], "fontSize": "11px", "fontWeight": 400, "cssClass": "" } }, "axisBorder": { "show": false, "color": "#e0e0e0", "width": 1, "offsetX": 0, "offsetY": 0 }, "axisTicks": { "show": false, "color": "#e0e0e0", "width": 6, "offsetX": 0, "offsetY": 0 }, "title": { "rotate": -90, "offsetY": 0, "offsetX": 0, "style": { "fontSize": "11px", "fontWeight": 900, "cssClass": "" } }, "tooltip": { "enabled": false, "offsetX": 0 }, "crosshairs": { "show": true, "position": "front", "stroke": { "color": "#b6b6b6", "width": 1, "dashArray": 0 } } } ], "zaxis": { "title": {} }, "markers": { "size": 0, "strokeWidth": 0, "hover": { "sizeOffset": 5 } }, "tooltip": { "fillSeriesColor": false }, "plotOptions": { "bar": { "horizontal": false }, "bubble": { "minBubbleRadius": 5 } }, "colors": [ "#4299e1", "#d63939", "#74b816", "#0054a6", "#d6336c", "#4263eb", "#ae3ec9", "#f59f00", "#17a2b8", "#2fb344", "#f76707" ], "series": [ { "name": "S0", "data": [ { "x": "2010-01-01T00:00:00.000Z", "y": 8 }, { "x": "2011-01-01T00:00:00.000Z", "y": 7 }, { "x": "2012-01-01T00:00:00.000Z", "y": 5 }, { "x": "2013-01-01T00:00:00.000Z", "y": 8 }, { "x": "2014-01-01T00:00:00.000Z", "y": 2 }, { "x": "2015-01-01T00:00:00.000Z", "y": 7 }, { "x": "2016-01-01T00:00:00.000Z", "y": 7 }, { "x": "2017-01-01T00:00:00.000Z", "y": 6 }, { "x": "2018-01-01T00:00:00.000Z", "y": 1 }, { "x": "2019-01-01T00:00:00.000Z", "y": 8 } ] }, { "name": "S1", "data": [ { "x": "2010-01-01T00:00:00.000Z", "y": 4 }, { "x": "2011-01-01T00:00:00.000Z", "y": 2 }, { "x": "2012-01-01T00:00:00.000Z", "y": 0 }, { "x": "2013-01-01T00:00:00.000Z", "y": 6 }, { "x": "2014-01-01T00:00:00.000Z", "y": 5 }, { "x": "2015-01-01T00:00:00.000Z", "y": 5 }, { "x": "2016-01-01T00:00:00.000Z", "y": 2 }, { "x": "2017-01-01T00:00:00.000Z", "y": 9 }, { "x": "2018-01-01T00:00:00.000Z", "y": 9 }, { "x": "2019-01-01T00:00:00.000Z", "y": 8 } ] }, { "name": "S2", "data": [ { "x": "2010-01-01T00:00:00.000Z", "y": 1 }, { "x": "2011-01-01T00:00:00.000Z", "y": 3 }, { "x": "2012-01-01T00:00:00.000Z", "y": 7 }, { "x": "2013-01-01T00:00:00.000Z", "y": 0 }, { "x": "2014-01-01T00:00:00.000Z", "y": 4 }, { "x": "2015-01-01T00:00:00.000Z", "y": 8 }, { "x": "2016-01-01T00:00:00.000Z", "y": 2 }, { "x": "2017-01-01T00:00:00.000Z", "y": 2 }, { "x": "2018-01-01T00:00:00.000Z", "y": 1 }, { "x": "2019-01-01T00:00:00.000Z", "y": 5 } ] }, { "name": "S3", "data": [ { "x": "2010-01-01T00:00:00.000Z", "y": 9 }, { "x": "2011-01-01T00:00:00.000Z", "y": 3 }, { "x": "2012-01-01T00:00:00.000Z", "y": 9 }, { "x": "2013-01-01T00:00:00.000Z", "y": 8 }, { "x": "2014-01-01T00:00:00.000Z", "y": 6 }, { "x": "2015-01-01T00:00:00.000Z", "y": 7 }, { "x": "2016-01-01T00:00:00.000Z", "y": 3 }, { "x": "2017-01-01T00:00:00.000Z", "y": 6 }, { "x": "2018-01-01T00:00:00.000Z", "y": 7 }, { "x": "2019-01-01T00:00:00.000Z", "y": 5 } ] }, { "name": "S4", "data": [ { "x": "2010-01-01T00:00:00.000Z", "y": 7 }, { "x": "2011-01-01T00:00:00.000Z", "y": 4 }, { "x": "2012-01-01T00:00:00.000Z", "y": 3 }, { "x": "2013-01-01T00:00:00.000Z", "y": 5 }, { "x": "2014-01-01T00:00:00.000Z", "y": 5 }, { "x": "2015-01-01T00:00:00.000Z", "y": 7 }, { "x": "2016-01-01T00:00:00.000Z", "y": 7 }, { "x": "2017-01-01T00:00:00.000Z", "y": 0 }, { "x": "2018-01-01T00:00:00.000Z", "y": 5 }, { "x": "2019-01-01T00:00:00.000Z", "y": 3 } ] }, { "name": "S5", "data": [ { "x": "2010-01-01T00:00:00.000Z", "y": 7 }, { "x": "2011-01-01T00:00:00.000Z", "y": 8 }, { "x": "2012-01-01T00:00:00.000Z", "y": 2 }, { "x": "2013-01-01T00:00:00.000Z", "y": 4 }, { "x": "2014-01-01T00:00:00.000Z", "y": 6 }, { "x": "2015-01-01T00:00:00.000Z", "y": 8 }, { "x": "2016-01-01T00:00:00.000Z", "y": 8 }, { "x": "2017-01-01T00:00:00.000Z", "y": 1 }, { "x": "2018-01-01T00:00:00.000Z", "y": 7 }, { "x": "2019-01-01T00:00:00.000Z", "y": 9 } ] }, { "name": "S6", "data": [ { "x": "2010-01-01T00:00:00.000Z", "y": 3 }, { "x": "2011-01-01T00:00:00.000Z", "y": 7 }, { "x": "2012-01-01T00:00:00.000Z", "y": 0 }, { "x": "2013-01-01T00:00:00.000Z", "y": 4 }, { "x": "2014-01-01T00:00:00.000Z", "y": 1 }, { "x": "2015-01-01T00:00:00.000Z", "y": 3 }, { "x": "2016-01-01T00:00:00.000Z", "y": 1 }, { "x": "2017-01-01T00:00:00.000Z", "y": 9 }, { "x": "2018-01-01T00:00:00.000Z", "y": 8 }, { "x": "2019-01-01T00:00:00.000Z", "y": 5 } ] }, { "name": "S7", "data": [ { "x": "2010-01-01T00:00:00.000Z", "y": 4 }, { "x": "2011-01-01T00:00:00.000Z", "y": 6 }, { "x": "2012-01-01T00:00:00.000Z", "y": 0 }, { "x": "2013-01-01T00:00:00.000Z", "y": 5 }, { "x": "2014-01-01T00:00:00.000Z", "y": 1 }, { "x": "2015-01-01T00:00:00.000Z", "y": 8 }, { "x": "2016-01-01T00:00:00.000Z", "y": 3 }, { "x": "2017-01-01T00:00:00.000Z", "y": 9 }, { "x": "2018-01-01T00:00:00.000Z", "y": 4 }, { "x": "2019-01-01T00:00:00.000Z", "y": 2 } ] }, { "name": "S8", "data": [ { "x": "2010-01-01T00:00:00.000Z", "y": 7 }, { "x": "2011-01-01T00:00:00.000Z", "y": 3 }, { "x": "2012-01-01T00:00:00.000Z", "y": 5 }, { "x": "2013-01-01T00:00:00.000Z", "y": 5 }, { "x": "2014-01-01T00:00:00.000Z", "y": 6 }, { "x": "2015-01-01T00:00:00.000Z", "y": 6 }, { "x": "2016-01-01T00:00:00.000Z", "y": 7 }, { "x": "2017-01-01T00:00:00.000Z", "y": 3 }, { "x": "2018-01-01T00:00:00.000Z", "y": 4 }, { "x": "2019-01-01T00:00:00.000Z", "y": 9 } ] }, { "name": "S9", "data": [ { "x": "2010-01-01T00:00:00.000Z", "y": 6 }, { "x": "2011-01-01T00:00:00.000Z", "y": 8 }, { "x": "2012-01-01T00:00:00.000Z", "y": 2 }, { "x": "2013-01-01T00:00:00.000Z", "y": 9 }, { "x": "2014-01-01T00:00:00.000Z", "y": 6 }, { "x": "2015-01-01T00:00:00.000Z", "y": 2 }, { "x": "2016-01-01T00:00:00.000Z", "y": 5 }, { "x": "2017-01-01T00:00:00.000Z", "y": 5 }, { "x": "2018-01-01T00:00:00.000Z", "y": 9 }, { "x": "2019-01-01T00:00:00.000Z", "y": 2 } ] } ], "annotations": { "yaxis": [], "xaxis": [], "points": [] } } ```

[rosco54]

I have submitted a pull request for a solution to this: https://github.com/apexcharts/apexcharts.js/pull/4228

[successbyte]

Hi @junedchhipa is this issue still open cause the pull request related to it is closed in #4228 pull request there is a space between the "#" and number Fixes # 4178 it caused the issue to not close automatically I was searching for issues to work on saw it.

[brianlagunas]

@ehsanullahhaidary thanks for letting us know.

[successbyte]

you're welcome 😄