[charts-premium] Add range bar chart by bernardobelchior · Pull Request #20275 · mui/mui-x

bernardobelchior · 2025-11-10T14:55:00Z

Fixes #20350.

Depends on:

Adds a range bar chart. Future improvements.

mui-bot · 2025-11-10T14:57:32Z

Deploy preview: https://deploy-preview-20275--material-ui-x.netlify.app/

Updated pages:

Bundle size report

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	🔺+28B^(+0.01%)	🔺+15B^(+0.01%)
@mui/x-charts-pro	🔺+66B^(+0.01%)	🔺+3B^(0.00%)
@mui/x-charts-premium	🔺+9.22KB^(+2.02%)	🔺+3.08KB^(+2.26%)
@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%)

Details of bundle changes

Generated by 🚫 dangerJS against 81261f3

github-actions · 2025-11-11T14:56:36Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2025-11-17T12:25:32Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

docs/data/charts/bars/bars.md

docs/data/charts/bars/range-bar.md

alexfauquette

Look nice. For the click event and the animation sections you could keep the demo and remove all the text details by saying "more details in the corresponding section of the bar chart page"

docs/data/charts/bars/bars.md

docs/data/charts/bars/range-bar.md

codspeed-hq · 2025-11-24T08:34:25Z

CodSpeed Performance Report

Merging #20275 will not alter performance

_{Comparing bernardobelchior:add-range-bar-chart (81261f3) with master (6119976)}

Summary

✅ 14 untouched

alexfauquette

Looks clean, might worth a second look about package code splitting

packages/x-charts/src/BarChart/seriesConfig/index.ts

packages/x-charts/src/BarChart/BarPlot.tsx

packages/x-charts/src/BarChart/useBarChartProps.ts

packages/x-charts/src/context/ChartProvider/ChartProvider.tsx

packages/x-charts/src/internals/configInit.ts

github-actions · 2025-12-19T13:50:57Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

docs/data/charts/range-bar/range-bar.md

JCQuintas · 2025-12-19T15:26:15Z

packages/x-charts-premium/src/BarChartPremium/RangeBar/seriesConfig/seriesProcessor.ts

+} from '@mui/x-charts/internals';
+
+const rangeBarValueFormatter = (v: RangeBarValueType | null) =>
+  v == null ? '' : `[${v[0]}, ${v[1]}]`;


Should it be wrapped in () like scatter instead of []?

Using parenthesis indicates it's a coordinate (x, y). Using square brackets indicates it's an inclusive range [start, end]. That's why I chose it. Why do you think parenthesis would be better here? I think it might be a bit confusing

Just consistency, didn't really think about it. I saw [1, 1] and thought it looked odd

Personally I prefer the notation $\left\lbrace 1 \right\rbrace$ ;)

packages/x-charts-premium/src/moduleAugmentation/rangeBarOnClick.ts

packages/x-charts/src/models/seriesType/config.ts

JCQuintas · 2025-12-19T15:38:05Z

packages/x-charts/src/models/seriesType/rangeBar.ts

+  end: number;
+};
+
+export interface RangeBarSeriesType


I don't understand why

JCQuintas · 2025-12-22T13:00:28Z

...x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.ts

+              // @ts-ignore This is safe because users need to opt in to use range bar series.
+              // In that case, they should import the module augmentation from `x-charts-pro/moduleAugmentation/rangeBarOnClick`
+              // Which adds the proper type to the series data.
+              // TODO(v9): Remove this ts-expect-error when we can make the breaking change to ChartsAxisData.


Do we still need this?

Not if I add "../x-charts-premium/src/moduleAugmentation/rangeBarOnClick.ts" to the tsconfig.json as well 😄

That should be fine no? Like we are ignoring this because we don't have the override in dev.

Does it solve solve the issue when building as well (prod)?

I've opted to keep this since we'll remove it in the next major

JCQuintas · 2025-12-22T13:00:46Z

packages/x-charts/src/models/seriesType/rangeBar.ts

@@ -0,0 +1,2 @@
+/** [start, end] */
+export type RangeBarValueType = [number, number];


Can't this be moved to the premium now?

We can't because of these tricks we're doing to make ChartsAxisData work

Ok, this is a return value change right? We can't directly always override the type because the user might be using the "bar" value?

Could we make the override more generic?

seriesValues: Record< string, ChartsTypeFeatureFlags['seriesValuesOverride'] extends never ? number | null | undefined : ChartsTypeFeatureFlags['seriesValuesOverride'] >; export interface ChartsTypeFeatureFlags {} // On packages/x-charts-premium/src/moduleAugmentation/rangeBarOnClick.ts declare module '@mui/x-charts/models' { interface ChartsTypeFeatureFlags { seriesValuesOverride: RangeBarValueType | number | null | undefined; } }

I managed to make a small adaptation to make this work. Good suggestion! Thanks

alexfauquette

minors comments or some that could be dressed in follow up PRs

packages/x-charts/src/BarChart/BarLabel/getBarLabel.ts

scripts/x-charts-premium.exports.json

alexfauquette · 2025-12-22T14:42:30Z

packages/x-charts-premium/src/BarChartPremium/BarChartPremium.tsx

+import { RangeBarPreviewPlot } from '../ChartZoomSlider/internals/previews/RangeBarPreviewPlot';

-export interface BarChartPremiumProps extends BarChartProProps {}
+seriesPreviewPlotMap.set('rangeBar', RangeBarPreviewPlot);


I assume this pattern might need some documentation for those using composition . Can be done in a follow up

bernardobelchior · 2025-12-24T14:52:36Z

docs/data/charts/bars/bars.md

 - No animation when highlighting or fading bars;
- The event of the `onItemClick` handler is a `MouseEvent` instead of a `React.MouseEvent`. To avoid breaking changes, the type of `onItemClick` was not changed, but you can import a type overload to fix it: `import type {} from '@mui/x-charts/moduleAugmentation/barChartBatchRendererOnItemClick'`.
+- The event of the `onItemClick` handler is a `MouseEvent` instead of a `React.MouseEvent`. To avoid breaking changes, the type of `onItemClick` was not changed, but you can import a type overload to fix it: `import type {} from '@mui/x-charts/moduleAugmentation/barChartBatchRendererOnItemClick'`;
+- It is not available for [range bar charts](/x/react-charts/range-bar/).


Added this disclaimer for now. Not sure if we need to create a batch version of the range bar for now, but it might be interesting in the future.

bernardobelchior added type: new feature Expand the scope of the product to solve a new problem. scope: charts Changes related to the charts. labels Nov 10, 2025

bernardobelchior force-pushed the add-range-bar-chart branch 2 times, most recently from 3132d05 to b55bb79 Compare November 11, 2025 10:43

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Nov 11, 2025

bernardobelchior force-pushed the add-range-bar-chart branch from 7901862 to b9ee648 Compare November 13, 2025 16:37

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Nov 13, 2025

bernardobelchior force-pushed the add-range-bar-chart branch 3 times, most recently from 4f6c9f8 to db5058c Compare November 14, 2025 17:42

bernardobelchior mentioned this pull request Nov 17, 2025

[charts] WIP: Bar range poc #20033

Closed

1 task

bernardobelchior changed the title ~~WIP: Add range bar chart~~ [charts-pro] Add range bar chart Nov 17, 2025

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Nov 17, 2025

bernardobelchior force-pushed the add-range-bar-chart branch from 676c5d0 to a1003eb Compare November 17, 2025 16:03

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Nov 17, 2025

bernardobelchior commented Nov 17, 2025

View reviewed changes

docs/data/charts/bars/bars.md Outdated Show resolved Hide resolved

bernardobelchior commented Nov 17, 2025

View reviewed changes

docs/data/charts/bars/range-bar.md Outdated Show resolved Hide resolved

alexfauquette reviewed Nov 18, 2025

View reviewed changes

docs/data/charts/bars/bars.md Outdated Show resolved Hide resolved

docs/data/charts/bars/bars.md Outdated Show resolved Hide resolved

docs/data/charts/bars/range-bar.md Outdated Show resolved Hide resolved

bernardobelchior force-pushed the add-range-bar-chart branch from 71ef24a to 1bbeadf Compare November 24, 2025 08:06

bernardobelchior force-pushed the add-range-bar-chart branch from 9eba5a6 to 0f73843 Compare November 24, 2025 12:59

bernardobelchior requested a review from alexfauquette November 24, 2025 13:03

bernardobelchior marked this pull request as ready for review November 24, 2025 13:19

bernardobelchior requested review from JCQuintas and prakhargupta1 as code owners November 24, 2025 13:19

alexfauquette reviewed Nov 25, 2025

View reviewed changes

prakhargupta1 added the plan: Pro Impact at least one Pro user. label Nov 25, 2025

JCQuintas reviewed Dec 19, 2025

View reviewed changes

JCQuintas reviewed Dec 22, 2025

View reviewed changes

alexfauquette approved these changes Dec 22, 2025

View reviewed changes

JCQuintas approved these changes Dec 22, 2025

View reviewed changes

bernardobelchior mentioned this pull request Dec 22, 2025

[charts-pro] Enable zoom slider preview composition #20747

Open

bernardobelchior and others added 22 commits December 24, 2025 12:21

[charts-premium] Create BarChartPremium

fd89d39

[charts] Add range bar chart

55192da

Move some components to premium

225f61c

fix premium props

cbb063a

Move range bar preview plot to premium

6980b83

Fix type issues

bb58d62

Gen stuff

f7966a7

Avoid exporting series config

1bd5096

Fix crash in demo

ee115d4

Fix missing key

651fd72

Fix store.use() usage

a7c1e1e

Update to [min, max] API

17227c4

Fix series config export

d39ce77

Fix bar chart premium props onItemClick type

f34e551

[charts-premium] Move more stuff to premium

9d1b383

Import type overloads from premium package

f0de5ba

Fix type issues

ab12bd7

Simplify getBarLabel

b9f4c35

Move RangeBarValueType to premium

990a5a4

Address doc suggestion by JC

233af69

Gen static

425f7a8

Inform that batch renderer doesn't work for range bar charts

81261f3

bernardobelchior commented Dec 24, 2025

View reviewed changes

bernardobelchior mentioned this pull request Jan 28, 2026

[docs] Move Range Bar Chart to existing charts #21120

Merged

		@@ -0,0 +1,2 @@
		/** [start, end] */
		export type RangeBarValueType = [number, number];

Uh oh!

Conversation

bernardobelchior commented Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mui-bot commented Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

github-actions bot commented Nov 11, 2025

Uh oh!

github-actions bot commented Nov 17, 2025

Uh oh!

Uh oh!

Uh oh!

alexfauquette left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

codspeed-hq bot commented Nov 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging #20275 will not alter performance

Summary

Uh oh!

alexfauquette left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Dec 19, 2025

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexfauquette left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

bernardobelchior commented Nov 10, 2025 •

edited

Loading

mui-bot commented Nov 10, 2025 •

edited

Loading

codspeed-hq bot commented Nov 24, 2025 •

edited

Loading