Charts · Performance
Dense time series
Charts have to survive real data volumes. ECharts renders these with its own progressive path, animation is capped, and symbols are dropped past a few hundred points rather than drawn and hidden.
10,000 points, two engines
Both charts below share one deterministic dataset. The notes are local environment observations, not a benchmark claim.
ECharts · 10,000 points
Line plus a prepared band, progressive rendering, no intro animation.
ECharts · decimated to 2,500
The same shape after a caller-side decimation step.
Prepared envelope at scale
Upper and lower bounds as an area pair, with the series in line.
Band at 10,000 points
The band is drawn with the same transparent-stack technique; no custom renderer is involved.
What the system does at scale
Rules, not tricks.
Symbols drop out
Past 60 points a line series stops drawing vertex symbols unless the caller asks for them.
Animation caps
Intro animation is 0 under reduced motion, and update transitions never exceed the motion budget.
Progressive rendering
Heatmap and long series use the engine's progressive path rather than a single blocking draw.
Decimation is the caller's call
Luc UI does not silently drop points. If a series needs decimating, the data layer does it.
Latest synthetic value in this dataset: 131.4. Timings are not published here because a screenshot environment is not a benchmark.
// The chart never silently decimates. Do it in the data layer if needed.
const shown = points.filter((_, index) => index % 4 === 0);
<LineChart data={shown} xKey="time" series={[{ key: "value", symbol: false }]} />