Open
Description
Description
The x-axis in line charts doesn't display all tick values correctly, especially when using numeric values as x values across multiple series. The last x value (5) is missing from the axis, and data points are misaligned with their corresponding tick marks.
I had previously reported a similar issue regarding x-axis tick misalignment in bar charts: #4858
Steps to Reproduce
- Create a line chart with multiple series
- Use numeric values as x values (1, 2, 4, 5)
- Observe the x-axis rendering and data point alignment
Expected Behavior
The x-axis should display all unique x values (1, 2, 4, 5) as tick marks, and data points should align with their corresponding tick marks.
Actual Behavior
The x-axis only shows 1, 2, 3, 4 as ticks, omitting 5. Additionally:
- The data point for 2 appears before the 2 tick mark
- The data point for 5 is incorrectly positioned above the 4 tick mark
Screenshots
Screencast.From.2025-04-21.19-20-16.mp4
Reproduction Link
https://codepen.io/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-/pen/pvvygbg?editors=0010
var options = {
"chart": {
"type": "line"
},
"series": [
{
"name": "A",
"data": [
{
"x": 1,
"y": 1
},
{
"x": 2,
"y": 2
}
],
},
{
"name": "B",
"data": [
{
"x": 4,
"y": 4
},
{
"x": 5,
"y": 5
}
],
}
]
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
Initially reported in sqlpage/SQLPage#883