JeickerF opened a new issue, #21315:
URL: https://github.com/apache/echarts/issues/21315
### 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.
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)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
