Decimation

Native ECharts and Chart.js downsampling

These charts use the ECharts and Chart.js versions pinned in the benchmark dependency manifest. The examples require network access to load these libraries.

Each pair compares all input samples in green with native LTTB selection in red. Both charts receive the same 10,002 input samples. The output under each chart reports the actual retained samples and spike counts.

LTTB is opt-in in both libraries. This demo uses ECharts sampling: lttb. The benchmark uses minmax instead. Its default sampling budget depends on the plot width and browser pixel ratio. The grid and pixel ratio use library defaults.

Chart.js uses enabled: true, algorithm: lttb with parsing: false, which its decimation plugin requires. The output target defaults to the chart width in CSS pixels. The activation threshold defaults to four times that width. Neither value is overridden. The Chart.js benchmark instead uses the default min-max algorithm.

These are default LTTB sampling settings, not completely default charts. The demo fixes chart sizes and axis limits, disables animation and point symbols, and sets line colors and widths for comparison. ECharts uses sample indices for triangle geometry. Chart.js uses actual x values, so their selected samples need not match.

The results depend on chart size, library version, and pixel ratio. The readouts report the actual selected samples and spike counts. Retaining both spikes does not guarantee their original shape.

Smaller buckets mean more output samples and can recover a missing feature in a particular dataset. Changing the sample count also changes bucket boundaries, so recovery is not a general preservation guarantee. Unknown or changing data can require a different budget. Retaining all samples removes the selection loss, but also removes the benefit of downsampling.

In Chart.js, lowering threshold activates decimation for smaller datasets. It does not make the LTTB buckets smaller. Increasing samples requests more output points. ECharts derives its LTTB budget from the plot width and pixel ratio.

The detail canvases magnify the actual output polylines without another sampling pass. Normal chart zoom can change buckets or disable downsampling.

ECharts: waiting for library.

Chart.js: waiting for library.

Nearby opposite spikes

The spikes occur at indices 5005 and 5010. If both occupy one LTTB bucket, only one can survive.

Non-uniform x spacing

The final 90% of the x range contains only 21 samples. Count-based buckets allocate few output points to this wide region.

Two nearby upward spikes

Both spikes have value +100, at indices 5005 and 5025. Depending on the sampling budget, they can occupy different buckets. After the first spike, LTTB can prefer a baseline point over the second spike. One peak per bucket is not a preservation guarantee.

Other limitations

• Global extrema: With x = [0,1,2,3,4,5], LTTB reduces y = [0,8,10,9,9,0] to [0,8,9,0] at four samples. The global maximum disappears because a lower point creates a larger triangle.
• Pulse shape: Even if a peak survives, its width, plateau, and area need not survive.
• Gaps: Standard LTTB has no gap-preservation rule. A discarded null marker can join separate runs. Gap handling depends on the implementation. ECharts retains a NaN marker in mixed buckets, but not every gap boundary.
• Nonlinear axes: Raw-value triangle areas do not represent visual importance on a logarithmic axis. Linear scaling and translation do not have this problem.
• Multiple series: Independent selections can change apparent crossings and band widths between retained points.
• Oscillations: LTTB does not preserve frequency or phase and is not an anti-aliasing filter.
• Viewport changes: Different bucket boundaries can make a feature appear or disappear after a pan, resize, or data update.

LTTB selects existing data points, but the lines between them can misrepresent the original signal. Pixel-column min/max preserves local extrema, not every subpixel detail or signal statistic.

Implementation sources: ECharts LTTB, ECharts sampling rate, Chart.js decimation.