Charts - Decimation

#Usage

import { ChartBar, ChartDecimation, ChartLine, ChartScatter, ChartSvg } from '@primeui/vue-chart';

<ChartSvg>
    <!-- series and axes -->
    <ChartDecimation />
</ChartSvg>

Decimation downsamples large datasets before rendering. It is a controlled visual summary: you trade point-level detail for faster rendering and a readable high-level view. Add ChartDecimation when the chart has more points than the current view can usefully show, then choose a sample count and strategy that match the question the chart needs to answer. For broader large-data guidance, see Performance.

#Basic

Add ChartDecimation to reduce large datasets to a manageable number of representative points before rendering. The chart stays responsive at smaller sizes, but the rendered marks are a summary rather than every source row. Use lower samples values for speed, and higher values or zoom windows when small movements matter.

#Algorithms

Set algorithm to choose which visual quality the summary should favor. Ordered series such as line, area, and bar use the configured strategy to keep selected source points. Scatter decimation uses the k-means path to replace dense point clusters with representative centroids, so a rendered centroid may not correspond to a single source row.

'lttb' (Largest Triangle Three Buckets, default): shape-oriented. Selects points that maximize the area of triangles formed with neighboring points, favoring the overall trend and silhouette. Best for time series where the broad shape matters more than every local movement.

'min-max': peak-oriented. Keeps the minimum and maximum value in each bucket, preserving visible spikes and troughs better than a shape-only summary. Best for signal data, sensor readings, and financial charts where extremes are meaningful.

'k-means': density-oriented, scatter charts only. Groups nearby points into clusters and represents each cluster with its centroid. Best for dense scatter plots where density and cluster placement matter more than individual point positions. On ordered series, 'k-means' falls back to 'lttb'.

#Threshold

Set threshold to only decimate when the dataset exceeds a certain size. When the point count is below the threshold, the full dataset renders without decimation, preserving exact values for smaller datasets. When omitted, threshold defaults to the same value as samples.

#Sample Count

Set samples to control the target number of output points after decimation. Lower values produce more aggressive downsampling: faster rendering but less detail. Higher values preserve more shape at the cost of rendering performance. The default is 500.

#Choosing an Algorithm

#API

#ChartDecimation

ChartDecimation applies to ChartLine (area lines included), ChartBar, and ChartScatter. Bar and line series share a category index and are decimated together; scatter uses its own 2D decimation path. It has no effect on other chart types.

#Progressive Detail on Zoom

On time-axis charts, zooming in progressively reveals full-resolution data. The decimation engine is viewport-aware. It filters to the visible time window first, then decimates only the visible subset. When fewer than samples points are visible in the zoomed window, the raw undecimated points render directly with no downsampling.

A 10,000-point dataset decimated to 500 samples at full zoom will show every real data point once the user zooms in far enough that fewer than 500 points are in the visible window.

This progressive detail behavior applies to time axes only. It does not make the full-range view exact; it gives users a path from a summarized overview to raw points as they zoom in. Category-axis zoom clips the view visually but does not trigger viewport-aware decimation. The same decimated dataset renders regardless of zoom level.

#Related Docs

• Line & Area
• Scatter & Bubble
• Animation
• Zoom & Pan
• Performance