X-Axis Tick Misalignment in Bar Chart #4858
Description
Description
The x-axis ticks in the provided bar chart are misaligned with their respective bar groups. This causes an increasing offset as you progress along the axis.
Steps to Reproduce
- Open the chart using this link: https://codepen.io/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-/pen/yyBJvMq
- Examine the x-axis ticks and their alignment with the bar groups.
Expected Behavior
- Each tick on the x-axis should align with the center of its respective group of bars.
- The alignment should remain consistent across all ticks.
Actual Behavior
- While the x-axis starts aligned, the groups of bars are slightly wider than the axis expects.
- This results in x-axis ticks progressively shifting to the left of their corresponding groups.
- After 12 ticks, the misalignment becomes so significant that ticks appear under incorrect bar groups.
Refer to the attached chart image for a clearer understanding of the issue.
Impact
This misalignment leads to confusion when interpreting data, as labels appear to correspond to the wrong bar groups.
Screenshots
Reproduction Link
https://codepen.io/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-/pen/yyBJvMq
Chart options
{
"chart": {
"type": "bar",
"fontFamily": "inherit",
"parentHeightOffset": 0,
"height": "250px",
"stacked": false,
"toolbar": {
"show": false
},
"animations": {
"enabled": false
},
"zoom": {
"enabled": false
}
},
"theme": {
"palette": "palette4"
},
"dataLabels": {
"enabled": true,
"dropShadow": {
"enabled": true,
"color": "#f6f8fb"
}
},
"fill": {
"type": "solid"
},
"stroke": {
"width": 1,
"lineCap": "round",
"curve": "smooth"
},
"xaxis": {
"tooltip": {
"enabled": false
},
"tickAmount": 11,
"title": {
"text": "Heures"
},
"labels": {
"datetimeUTC": false
},
"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,
"showDuplicates": false,
"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": {
"text": "Revenue (k€)",
"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": 5,
"strokeWidth": 0,
"hover": {
"sizeOffset": 5
}
},
"tooltip": {
"fillSeriesColor": false,
"y": {}
},
"plotOptions": {
"bar": {
"horizontal": false,
"borderRadius": 5
},
"bubble": {
"minBubbleRadius": 5
}
},
"colors": [
"#4299e1",
"#d63939",
"#74b816",
"#ae3ec9",
"#f59f00",
"#667382",
"#f76707",
"#d6336c",
"#0ca678",
"#4263eb",
"#17a2b8",
"#2fb344",
"#e6eef6",
"#fef5e6",
"#fbebf0",
"#eaf7ec",
"#fef0e6",
"#0054a6",
"#929dab",
"#bbc3cd",
"#dadfe5",
"#eef1f4",
"#f6f8fb",
"#fcfdfe",
"#000000"
],
"series": [
{
"name": "last year",
"data": [
{
"x": 10,
"y": 1.5
},
{
"x": 11,
"y": 1.7
},
{
"x": 12,
"y": 2.5
},
{
"x": 13,
"y": 3.5
},
{
"x": 14,
"y": 7.5
},
{
"x": 15,
"y": 1.5
},
{
"x": 16,
"y": 5.5
},
{
"x": 17,
"y": 8.5
},
{
"x": 18,
"y": 2.5
},
{
"x": 19,
"y": 3.5
},
{
"x": 20,
"y": 6.5
},
{
"x": 21,
"y": 3.5
}
],
"group": "apexcharts-axis-0"
},
{
"name": "this year",
"data": [
{
"x": 10,
"y": 2
},
{
"x": 11,
"y": 1.9
},
{
"x": 12,
"y": 3
},
{
"x": 13,
"y": 4
},
{
"x": 14,
"y": 3
},
{
"x": 15,
"y": 10
},
{
"x": 16,
"y": 3
},
{
"x": 17,
"y": 7
},
{
"x": 18,
"y": 2
},
{
"x": 19,
"y": 5
},
{
"x": 20,
"y": 3
},
{
"x": 21,
"y": 8
}
],
"group": "apexcharts-axis-0"
}
],
"annotations": {
"yaxis": [],
"xaxis": [],
"points": []
}
}Initially reported in sqlpage/SQLPage#733