Tooltip Skips Data Points on Datetime X-Axis with Variable Intervals (Hourly, Daily, etc.)

Configuration
1

I’m using an ApexCharts area chart with a datetime x-axis and dynamic data intervals that change depending on the selected time range. For example:

  • If the selected range is ~80 days, the data is returned in 1-hour intervals.
  • For longer ranges, the backend may return data in 3-hour, 6-hour, 15-minute, or even daily intervals.

The data fetch works fine, and I can confirm in the network response that the timestamps are accurate based on the expected interval. The chart renders correctly and shows the data visually aligned — however, the tooltip does not behave as expected.

When hovering over the chart, the tooltip often skips several data points (e.g., from 15:00 to 20:00, or from one day to 3 days ahead), even though intermediate points exist in the data. This results in a confusing user experience because they can’t see data for each expected interval as they move across the chart.

I am already using:

tooltip: { shared: true },
xaxis: { type: ‘datetime’ }

What I expect:
The tooltip should show every data point based on the actual interval used — whether it’s 15 minutes, 1 hour, 3 hours, or 1 day — as long as those timestamps exist in the dataset.

Is there a way to force or ensure that tooltips always align with the actual data point intervals?

Any ideas or suggestions are appreciated :pray:

2

You have to find the GitHub page for the Apex Chart and make your request there, but I suspect the reason is due to a grace area around the cursor, where the cursor is detected as being in the same spot even though it moved a few dots.
The reason for the grace area is so you can actually click with the mouse, or even more important with a finger on a mousepad, without turning it in to a drag operation instead.