[charts-pro] Add data sampling for large bar and line charts by JCQuintas · Pull Request #22830 · mui/mui-x

JCQuintas · 2026-06-16T11:29:54Z

Summary

Adds opt-in data sampling to the Pro bar and line charts, so large datasets stay responsive when zoomed out. When the data has more points than the axis can meaningfully render, each series is reduced to a zoom-appropriate level of detail before drawing; zooming in progressively reveals more, down to the raw data at full zoom.

API

Type-specific charts take a single sampling prop, typed per series type:

LineChartPro: sampling="none" | "minmax" | "m4" | "lttb" (default "none")
BarChartPro / BarChartPremium: sampling="none" | "minmax" (bars always use a min/max envelope, so the line-only algorithms are excluded)

The generic ChartsDataProviderPro takes a per-series-type map, so a multi-type chart can configure each independently:

<ChartsDataProviderPro sampling={{ line: 'lttb', bar: 'minmax' }} />

Methods:

minmax — keep the min and max per bucket (2 points).
m4 — pixel-accurate: first, min, max, last per bucket (line only).
lttb — Largest-Triangle-Three-Buckets, preserves the visual shape (line only).

Sampling only runs on zoomable axes and requires @mui/x-charts-pro.

How it works

A level-of-detail "pyramid" is precomputed per series and memoized on the data, so it rebuilds only when the data changes.
The active level is picked from the zoom span vs. the available pixels, capped at a maximum rendered-point count.
All sampling algorithms live in the pro package, registered as a per-series-type SamplingStrategy on seriesConfig.sampler. Community plot hooks/selectors only consume the pro-injected strategy, so the community bundle stays algorithm-free.
The set of methods each series type accepts is declared in one place via the BarSeriesExtension / LineSeriesExtension series-config extension points (empty in community, augmented by pro) — mirroring the existing AxisConfigExtension pattern. Enabling sampling on a new series type means adding its samplingMethod extension and registering a sampler; the per-type config map and the state-building are generic. (Type-specific chart components still wire their own sampling prop, and the axis-highlight widening currently special-cases bar/line.)

Docs & tests

Performance demos: LineSampling, BarSampling.
Unit tests for the pyramid math, bucket selection, and each algorithm.
Render tests plus visual regression fixtures covering every method at multiple zoom levels for both chart types.

Closes #22671
Closes #22713

code-infra-dashboard · 2026-06-16T11:34:14Z

Deploy preview

Bundle size

Bundle	Parsed size	Gzip size
@mui/x-data-grid	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-premium	0B^(0.00%)	0B^(0.00%)
@mui/x-charts	🔺+2.94KB^(+0.76%)	🔺+1.3KB^(+1.11%)
@mui/x-charts-pro	🔺+7KB^(+1.35%)	🔺+3.03KB^(+1.95%)
@mui/x-charts-premium	🔺+7.04KB^(+1.12%)	🔺+3.05KB^(+1.61%)
@mui/x-date-pickers	0B^(0.00%)	0B^(0.00%)
@mui/x-date-pickers-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-scheduler	0B^(0.00%)	0B^(0.00%)
@mui/x-scheduler-premium	0B^(0.00%)	0B^(0.00%)
@mui/x-license	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Performance

Total duration: 1,849.18 ms -98.10 ms^(-5.0%) | Renders: 63 ⁽⁺⁰⁾

Test	Duration	Renders
BarChart with big data amount	90.36 ms 🔺+22.91 ms^(+34.0%)	2 ⁽⁺⁰⁾
ScatterChartPremium with big data amount (webgl renderer)	71.90 ms ▼-23.40 ms^(-24.6%)	5 ⁽⁺⁰⁾
ScatterChart with big data amount	23.56 ms ▼-6.20 ms^(-20.8%)	2 ⁽⁺⁰⁾
ScatterChartPro with big data amount and zoomed in (batch renderer)	7.66 ms ▼-4.49 ms^(-36.9%)	2 ⁽⁺⁰⁾
ScatterChartPro with big data amount (batch renderer)	7.25 ms ▼-2.54 ms^(-26.0%)	2 ⁽⁺⁰⁾

…and 1 more (+20 within noise) — details

Metric alarms

Test	Metric	Change
BarChart with big data amount	bench:paint	🔺 +35.12 ms
BarChart stacked with multiple series	bench:paint	🔺 +40.31 ms

Check out the code infra dashboard for more information about this PR.

…lated-sub-sampling

- barSampler: envelope over min/max of both stacked coords so diverging/negative bars keep their full extent when merged (was truncated to the base channel). - largestTriangleThreeBuckets: return the two endpoints when threshold <= 2 instead of the whole dataset, which bypassed the rendered-point cap. - useBarPlotData: memoize processBarDataForPlot so hover/tooltip re-renders don't recompute all bar geometry.

Iterate the sampling config instead of hardcoding bar/line, so a new series type only needs its config entry and a registered sampler.

Controlled shared zoomData so zooming one chart zooms all, comparing the methods over the same range.

alexfauquette · 2026-07-01T09:57:54Z

+Lines support all three algorithms; pick the one that best fits your data.
+
+```jsx
+<LineChartPro series={series} sampling="m4" />
+```
+
+{{"demo": "LineSampling.js"}}
+


Since we already have section comparing the 3 methods

Suggested change

Lines support all three algorithms; pick the one that best fits your data.

```jsx

<LineChartPro series={series} sampling="m4" />

```

{{"demo": "LineSampling.js"}}

Lines support all three algorithms; pick the one that best fits your data.

See [Comparing section](#comparing-methods).

```jsx

<LineChartPro series={series} sampling="m4" />

alexfauquette · 2026-07-01T10:15:14Z

+Sampling also keeps a hard ceiling on the number of rendered elements (2,000). Once the view fits under it, the chart renders every visible element untouched; while a zoomed-in view still holds more than that, it stays sampled even when each element would be wide enough to draw on its own—so a very dense dataset never floods the renderer at any zoom level.
+
+:::info
+The zoom `minSpan` is a percentage, so the most zoomed-in view always renders about `dataLength × minSpan / 100` elements. On a very large dataset, keep the axis `zoom.minSpan` small so the deepest zoom doesn't render too many elements at once.
+:::


If you really want to keep this behavior of switching from a subsample to no subsample when reaching the minSpan, at least modify the bar demo such that minSpan is small enougth to have all the level visible

Here is the zoom experience with and without adapted min span

Capture.video.du.2026-07-01.12-14-24.mp4

Capture.video.du.2026-07-01.12-13-44.mp4

alexfauquette · 2026-07-01T12:01:50Z

+      const data = yAxis.data;
+      const bucketSize = bucketSizeByAxis.get(axisId) ?? 1;
+      if (bucketSize > 1 && data) {
+        const index = data.indexOf(value);


For a follow up: We could modify the ordinal scale to get access to its index such that this would be done in O(1) instead of O(N)

alexfauquette · 2026-07-01T12:05:59Z

+        if (index >= 0) {
+          const bucketStart = Math.floor(index / bucketSize) * bucketSize;
+          const bucketEnd = Math.min(bucketStart + bucketSize - 1, data.length - 1);
+          bandStart = yScale(data[bucketStart])! - (step - yScale.bandwidth()) / 2;


AI suggestion:

To support reversed axis you should addconst bucketStartPosition = Math.min(yScale(data[bucketStart])!, yScale(data[bucketEnd])!);

This if(bucketSize>1) ... is duplicated between X and Y highlight. an helper that take (index, scale, bucketSize) and return (bandSTart, bandSize) would avoid duplication

alexfauquette · 2026-07-01T12:21:46Z

+  if (algorithm === 'lttb') {
+    // LTTB emits one point per bucket, vs `ENVELOPE_POINTS_PER_BUCKET` for the min/max methods.
+    // Scale the budget by that factor so LTTB isn't sparser than them at the same zoom.
+    const indices = largestTriangleThreeBuckets(
+      getValues!(),
+      Math.ceil((ENVELOPE_POINTS_PER_BUCKET * pyramid.dataLength) / bucketSize),
+    );
+    return [{ startIndex: 0, endIndex: maxIndex, indices: mergeBucket(indices, maxIndex) }];
+  }


Seems like the 'lttb' is recomputing at each zoom. Instead of picking the indexes from a saved array, it call getValues() which correspond to getValues: () => Float64Array.from(visibleStackedData, (point) => point[1])

Can be left for a follow up issue

alexfauquette

Technically it look nice. I left suggestion about minor issue that could be done in dedicated PRs

I'm just bothered by the default behavior that to me looks weird, but issues are already create to let user pick a different behavior

- Skip the sampling-state update when unchanged so an inlined config doesn't recompute the pyramids every render. - Docs: link line sampling to the comparison section. - Bar demo: small minSpan so zoom steps through every sampling level to raw.

JCQuintas · 2026-07-01T12:51:22Z

Technically it look nice. I left suggestion about minor issue that could be done in dedicated PRs

I'm just bothered by the default behavior that to me looks weird, but issues are already create to let user pick a different behavior

Will wait to merge this after release so we have more time to handle issues :)

Co-authored-by: Alexandre Fauquette <[email protected]> Signed-off-by: Jose C Quintas Jr <[email protected]>

JCQuintas added 6 commits June 15, 2026 17:47

initial

a896331

toggle

0ccde7a

init coarsing

bf1a119

comments

4e3f226

renaming

0f4869b

sampling

3684ad8

JCQuintas added plan: Pro Impact at least one Pro user. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. scope: charts Changes related to the charts. labels Jun 16, 2026

JCQuintas self-assigned this Jun 16, 2026

JCQuintas added 16 commits June 16, 2026 15:33

simplification

c516d91

gap sieze

d2dfafe

fix highlight axis

fa0d607

Merge commit '659fcedc2bcbb9062502bc87a923849ed911ee0c' into precalcu…

206f9e9

…lated-sub-sampling

scritps

ddc5f42

typo

ecd23fb

improve perf

5cbd8e8

improve typed arrays

7a65d3c

tick spacing

98e853b

fix full zoom perf

daf8be8

line

574a1c3

simplify

a493b48

move to pro

fb847a7

simplify

449b969

improve minspan

e754602

simplify api

7a6d0b9

JCQuintas added 2 commits June 29, 2026 15:48

[charts-pro] Build sampling state generically from the config

4353a8c

Iterate the sampling config instead of hardcoding bar/line, so a new series type only needs its config entry and a registered sampler.

[docs][charts] Sync sampling demo previews

773e5eb

JCQuintas requested a review from alexfauquette June 30, 2026 07:54

JCQuintas added 3 commits June 30, 2026 09:57

[docs][charts] Sync zoom across the sampling comparison demo

f8c2fd3

Controlled shared zoomData so zooming one chart zooms all, comparing the methods over the same range.

[docs][charts] Add formatted y-axis labels to the sampling demos

0305893

fix

774c6c8

SamanPandey-in mentioned this pull request Jul 1, 2026

[charts-pro] Sampled band highlight falls back to single-band width for Date/object values #23024

Merged

1 task

alexfauquette reviewed Jul 1, 2026

View reviewed changes

alexfauquette approved these changes Jul 1, 2026

View reviewed changes

This was referenced Jul 1, 2026

[charts-pro] LTTB sampling recomputes the value array on every zoom #23028

Open

[charts-pro] Optimize + de-duplicate the sampled axis-highlight band lookup #23029

Closed

JCQuintas mentioned this pull request Jul 1, 2026

[charts-pro] Allow sampling on non-zoomable charts #23031

Closed

JCQuintas and others added 4 commits July 1, 2026 15:00

Update docs/data/charts/performance/performance.md

8ba70bd

Co-authored-by: Alexandre Fauquette <[email protected]> Signed-off-by: Jose C Quintas Jr <[email protected]>

Merge branch 'master' into precalculated-sub-sampling

2b70f0b

Merge branch 'master' into precalculated-sub-sampling

aa6c7c5

[charts] Format sampling.types.ts

3244a59

JCQuintas merged commit b193f7f into mui:master Jul 3, 2026
21 checks passed

JCQuintas deleted the precalculated-sub-sampling branch July 3, 2026 12:01

This was referenced Jul 3, 2026

[charts-pro] Allow sampling on non-zoomable charts #23051

Merged

[charts] Optimize and de-duplicate sampled axis-highlight band lookup #23052

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

[charts-pro] Add data sampling for large bar and line charts#22830

[charts-pro] Add data sampling for large bar and line charts#22830
JCQuintas merged 63 commits into
mui:masterfrom
JCQuintas:precalculated-sub-sampling

JCQuintas commented Jun 16, 2026 •

edited

Loading

Uh oh!

code-infra-dashboard Bot commented Jun 16, 2026 •

edited

Loading

Uh oh!

alexfauquette Jul 1, 2026

Uh oh!

alexfauquette Jul 1, 2026

Uh oh!

alexfauquette Jul 1, 2026

Uh oh!

alexfauquette Jul 1, 2026

Uh oh!

alexfauquette Jul 1, 2026

Uh oh!

alexfauquette left a comment

Uh oh!

JCQuintas commented Jul 1, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Uh oh!

Conversation

JCQuintas commented Jun 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

API

How it works

Docs & tests

Uh oh!

code-infra-dashboard Bot commented Jun 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploy preview

Bundle size

Performance

Uh oh!

alexfauquette Jul 1, 2026

Choose a reason for hiding this comment

Uh oh!

alexfauquette Jul 1, 2026

Choose a reason for hiding this comment

Uh oh!

alexfauquette Jul 1, 2026

Choose a reason for hiding this comment

Uh oh!

alexfauquette Jul 1, 2026

Choose a reason for hiding this comment

Uh oh!

alexfauquette Jul 1, 2026

Choose a reason for hiding this comment

Uh oh!

alexfauquette left a comment

Choose a reason for hiding this comment

Uh oh!

JCQuintas commented Jul 1, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

JCQuintas commented Jun 16, 2026 •

edited

Loading

code-infra-dashboard Bot commented Jun 16, 2026 •

edited

Loading