-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Description
Description
When plotting a line chart with very small numeric x values (for example: 0.001, 0.002, or smaller like 0.0001), all X-axis labels show the same value (the first one).
The chart itself is plotted correctly — the data points render properly — but the axis labels do not update.
For slightly larger values (e.g. 0.01, 0.02, 0.03, etc.), labels display correctly.
This issue seems to be related to floating-point precision when generating X-axis ticks.
Steps to Reproduce
- Create a line chart with numeric X values between
0.001and0.009. - Use a
labels.formatterfunction to show six decimal places (e.g.,val.toFixed(6) + ' s'). - Render the chart.
Expected Behavior
Each X-axis label should show its correct numeric value (e.g. 0.001 s, 0.002 s, 0.003 s, etc.).
Actual Behavior
All X-axis labels show the same value (the first tick’s value, e.g. 0.001 s), even though the chart line itself renders correctly.
Version behavior
✅ v3.51 – Works correctly for both charts
❌ v3.52 – Labels broken (all show same value) for both charts
Screenshots
Reproduction Link
CodePen example: https://codepen.io/qbyohhdh-the-lessful/pen/pvgBRKp
Minimal reproducible example:
var options = {
chart: {
type: 'line',
zoom: { enabled: false }
},
series: [{
name: 'Signal',
data: [
{ x: 0.001, y: 30 },
{ x: 0.002, y: 40 },
{ x: 0.003, y: 45 },
{ x: 0.004, y: 50 },
{ x: 0.005, y: 49 },
{ x: 0.006, y: 60 },
{ x: 0.007, y: 70 },
{ x: 0.008, y: 91 },
{ x: 0.009, y: 125 }
]
}],
xaxis: {
type: 'numeric',
title: { text: 'Time (seconds)' },
labels: {
formatter: function (val) {
return val.toFixed(6) + ' s';
}
}
},
yaxis: { title: { text: 'Value' } },
tooltip: {
x: {
formatter: function (val) {
return val.toFixed(6) + ' s';
}
}
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();Additional context
- It looks like there may be a precision or rounding issue in how ApexCharts generates numeric tick labels for very small decimal values.
- Tried using the decimalsInFloat option, but it does not resolve the issue.
- In my actual code, we are plotting values ranging from -0.001 to 0.00099987200000000017.