Skip to content

X-axis labels repeat the first value when using very small numeric x-values #5127

@psharma-stfc

Description

@psharma-stfc

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

  1. Create a line chart with numeric X values between 0.001 and 0.009.
  2. Use a labels.formatter function to show six decimal places (e.g., val.toFixed(6) + ' s').
  3. 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
⚠️ v4.5 onwards – chartTwo (0.01–0.09) fixed, but issue persists for chart (0.001–0.009)


Screenshots

Image

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.

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions