Skip to main content
The LTTB (Largest-Triangle-Three-Buckets) algorithm is an intelligent downsampling technique that reduces the number of data points while preserving the visual shape of the data. Kinetix Charts automatically applies LTTB when rendering datasets with more than 2000 points.

​
What is LTTB?

LTTB is a downsampling algorithm that selects representative points from a large dataset by:
  1. Dividing data into buckets
  2. Selecting points that form the largest triangular areas
  3. Preserving visual features like peaks, valleys, and trends
This approach maintains the visual integrity of charts while significantly reducing render overhead.

​
Automatic downsampling

Kinetix Charts automatically applies LTTB downsampling when:
  • A dataset contains more than 2000 data points
  • The series is rendered (line, scatter, or other point-based charts)
No configuration is needed—the library handles this optimization automatically.

​
Performance benefits

import { LineSeries } from 'kinetix-charts';

// Generate 100,000 data points
const largeData = [];
for (let i = 0; i < 100000; i++) {
  largeData.push({ 
    x: i, 
    y: Math.sin(i / 1000) * 50 + 50 
  });
}

const series = new LineSeries(container, 1);
series.setScales(chart.xScale, chart.yScale);

// LTTB automatically downsamples to ~2000 points
series.setData(largeData);
chart.addSeries(series);
Benefits:
  • Smooth rendering with 100k+ data points
  • Reduced memory usage
  • Faster pan and zoom operations
  • Preserved visual accuracy

​
Implementation details

The LTTB algorithm is an internal implementation in Kinetix Charts. It is not exported as part of the public API and cannot be imported or called directly. The downsampling happens automatically when you add data to a series.
The internal function signature is: 
// Internal function - not exported
function lttb(data: Point[], threshold: number): Point[]
This function is used internally by LineSeries and ScatterSeries when rendering datasets larger than 2000 points.

​
How the algorithm works

The LTTB algorithm:
  1. Always includes endpoints: The first and last data points are always preserved
  2. Divides into buckets: The remaining data is divided into buckets based on the threshold
  3. Selects representative points: For each bucket, it selects the point that forms the largest triangle area with:
    • The previously selected point
    • The average of points in the next bucket
  4. Preserves visual features: This triangle-based selection naturally preserves peaks, valleys, and trend changes

​
Automatic application

LTTB is applied automatically by the library. You don’t need to call any functions or configure anything: 
import { Chart, LineSeries } from 'kinetix-charts';

// Create a large dataset
const largeData = [];
for (let i = 0; i < 50000; i++) {
  largeData.push({ x: i, y: Math.sin(i / 1000) * 50 + 50 });
}

// Just add the data - LTTB is applied automatically
const chart = new Chart(container, {
  series: [{
    type: 'line',
    name: 'Large Dataset',
    data: largeData // Automatically downsampled to ~2000 points
  }]
});

​
When LTTB is applied

ScenarioLTTB Applied?
Dataset with 500 pointsNo - rendered as-is
Dataset with 2000 pointsNo - rendered as-is
Dataset with 2001 pointsYes - downsampled to ~2000
Dataset with 100,000 pointsYes - downsampled to ~2000

​
Visual accuracy

LTTB is specifically designed to maintain visual accuracy. Unlike uniform sampling (taking every nth point), LTTB:
  • Preserves important visual features
  • Maintains peak and valley positions
  • Retains trend changes and inflection points
  • Adapts to data density variations
The result is a chart that looks nearly identical to the full dataset while using a fraction of the memory and rendering much faster.

Build docs developers (and LLMs) love

Get started for freeTalk to us