apexcharts.js
apexcharts.js copied to clipboard
Published
20 hours ago •
apexcharts
apexcharts
timeseries bar chart with multiple series appears shifted and cutoff
Description
Initially reported in https://github.com/lovasoa/SQLpage/issues/172
Steps to Reproduce
- 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
{
"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": []
}
}
I have submitted a pull request for a solution to this: https://github.com/apexcharts/apexcharts.js/pull/4228
