[Feature] ECharts X-axis does not respect provided timestamps or fixed intervals #21315
Description
What problem does this feature solve?
Summary
We are implementing a dynamic axis service in Angular that calculates the X-axis configuration for multiple ECharts visualizations — primarily time-based charts that use timestamps generated manually from backend logic.
Our goal is to display exactly the timestamps that we calculate, preserving their real intervals (e.g., every 15 minutes), without ECharts adding, rounding, or interpolating ticks.
However, ECharts currently re-calculates or shifts ticks to “nice” round values (e.g., every 10 minutes), even when explicit timestamps and minInterval/maxInterval values are defined.
What we want to achieve
We want ECharts to render X-axis labels exactly as provided, using our own list of timestamps.
Example — we calculate this array of timestamps (in ms):
[
1760423400000,
1760424300000,
1760425200000,
1760426100000,
1760427000000,
1760427900000,
1760428800000,
1760429700000,
1760430600000,
1760431500000
]
These correspond to 15-minute intervals:
08:30, 08:45, 09:00, 09:15, 09:30, 09:45, 10:00, 10:15, 10:30, 10:45
We want those exact timestamps and labels to appear on the X-axis — no rounding, no “nice” intervals.
We tried:
{
type: 'category',
data: arr,
axisLabel: { interval: 0 },
}
→ ❌ ECharts internally treats the timestamps as numeric range values and still auto-spreads ticks.
We get partial alignment, but not exact timestamp control.
What does the proposed API look like?
What we expect / request
We need a way to force ECharts to respect user-defined timestamps when using type: 'time',
without ECharts recalculating or adjusting intervals.
In other words:
If the developer provides xAxis.data or an array of timestamp values, ECharts should have an option to display exactly those ticks and labels, using the provided spacing.
Possible API suggestion:
xAxis: {
type: 'time',
useExactTicks: true, // new property proposal
}
This would allow developers to handle time intervals precisely (like 15-minute or irregular custom intervals) while preserving all “time” axis features such as zoom, range selection, and continuous scaling.
What currently happens
ECharts “normalizes” tick positions to aesthetically nice values (10-minute, 30-minute, 1-hour marks),
ignoring developer-provided timestamp sequences, even if:
minInterval and maxInterval are explicitly set, splitNumber matches the array length, interval: 0 is set on axisLabel, and manual min/max values are provided.
Example output
Given timestamps (08:30 → 10:45, every 15 min),
ECharts displays labels at:
08:40, 09:00, 09:20, 09:40, 10:00, 10:20
The difference indicates internal tick recalculation, not the array we provided.
Why this matters
We’re building a charting layer that needs:
precise temporal alignment between charted series and timestamped data, consistent labeling when users change predefined time ranges (2h, 6h, 1d…), and accurate xAxis synchronization with markArea and time-based overlays.
Currently, the chart visually misaligns with the data source when intervals differ from ECharts’ automatic tick logic.
I’ve also noticed that similar issues and improvements have been discussed in other PRs, such as #21240, #20839, #16963, and #20838. These indicate that there’s already community interest and recurring cases where more precise or customizable control over axis ticks and timestamps would be valuable. My proposal aligns with those efforts, aiming to provide a consistent and predictable way to handle exact time intervals.
Environment
ECharts version: 6.0.0
Framework: Angular 18
TypeScript: 5.5.4
Browser: Chrome 141.0.7390.77
Axis type: 'category'
Interval: 900 000 ms (15 min)