@mui/x-charts 8.11.2 → 8.11.3

package/BarChart/index.d.ts

@@ -3,5 +3,6 @@ export * from "./BarPlot.js";
 export * from "./BarElement.js";
 export * from "./BarLabel/index.js";
 export * from "./barElementClasses.js";
+export { type BarProps } from "./AnimatedBarElement.js";
 export { barClasses, getBarUtilityClass } from "./barClasses.js";
 export type { BarClassKey, BarClasses } from "./barClasses.js";

package/BarChart/useBarChartProps.js

@@ -47,7 +47,7 @@ const useBarChartProps = props => {
       barLabel,
       className
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const id = (0, _useId.default)();
   const clipPathId = `${id}-clip-path`;
   const hasHorizontalSeries = layout === 'horizontal' || layout === undefined && series.some(item => item.layout === 'horizontal');
@@ -88,7 +88,7 @@ const useBarChartProps = props => {
       scaleType: 'band'
     }, axis)) : yAxis;
   }, [defaultYAxis, hasHorizontalSeries, yAxis]);
-  const chartContainerProps = (0, _extends2.default)({}, rest, {
+  const chartContainerProps = (0, _extends2.default)({}, other, {
     series: seriesWithDefault,
     width,
     height,
@@ -142,7 +142,8 @@ const useBarChartProps = props => {
   const chartsWrapperProps = {
     sx,
     legendPosition: props.slotProps?.legend?.position,
-    legendDirection: props.slotProps?.legend?.direction
+    legendDirection: props.slotProps?.legend?.direction,
+    hideLegend: props.hideLegend ?? false
   };
   return {
     chartsWrapperProps,

package/CHANGELOG.md

@@ -5,6 +5,92 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.11.3
+
+_Sep 16, 2025_
+
+We'd like to extend a big thank you to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to the community members for their valuable contributions:
+@sai6855
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @brijeshb42, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @LukasTy, @rita-codes, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.11.3`
+
+- [DataGrid] Fix numeric font size not being applied (#19552) @cherniavskii
+- [DataGrid] Improve `operator` types to display literal values (#19529) @siriwatknp
+
+#### `@mui/x-data-grid-pro@8.11.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-data-grid@8.11.3`.
+
+#### `@mui/x-data-grid-premium@8.11.3` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link "Premium plan")
+
+Same changes as in `@mui/x-data-grid-pro@8.11.3`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.11.3`
+
+- [pickers] Refactor `slots` and `slotProps` propagation strategy (#18867) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.11.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-date-pickers@8.11.3`.
+
+### Charts
+
+#### `@mui/x-charts@8.11.3`
+
+- [charts] Add `inline-` piecewise legend options (#19382) @JCQuintas
+- [charts] Add bar gradient example (#19174) @bernardobelchior
+- [charts] Ignore empty tick labels in label overlap computation (#19547) @alexfauquette
+- [charts] Rename `isBandScale` to `isDiscreteScale` (#19514) @bernardobelchior
+- [charts] Fix legend position affecting toolbar's position (#19257) @sai6855
+
+#### `@mui/x-charts-pro@8.11.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-charts@8.11.3`, plus:
+
+- [charts-pro] Add chart title and caption to export demo (#19524) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.11.3`
+
+- [tree view] Stop looping through all items to publish the `removeItem` event (#19500) @flaviendelangle
+- [tree view] Support flat DOM structure (#19350) @flaviendelangle
+- [tree view] Update cursor styles for disabled TreeItem (#19548) @sai6855
+
+#### `@mui/x-tree-view-pro@8.11.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-tree-view@8.11.3`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.11.3`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add styling row group recipe (#19349) @siriwatknp
+- [docs] Group demos data into the dataset folder (#19549) @alexfauquette
+- [docs] Add `shiny` bar chart example at the top  (#19416) @JCQuintas
+
+### Core
+
+- [code-infra] Axios update (#19577) @Janpot
+- [code-infra] Remove usage of copy-files command from code-infra (#19518) @brijeshb42
+- [internal] Fix naming to match convention @oliviertassinari
+
 ## 8.11.2
 
 _Sep 10, 2025_

package/ChartsAxisHighlight/ChartsXAxisHighlight.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = ChartsXHighlight;
 var React = _interopRequireWildcard(require("react"));
 var _useScale = require("../hooks/useScale");
-var _isBandScale = require("../internals/isBandScale");
+var _scaleGuards = require("../internals/scaleGuards");
 var _useSelector = require("../internals/store/useSelector");
 var _useStore = require("../internals/store/useStore");
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
@@ -39,15 +39,15 @@ var _jsxRuntime = require("react/jsx-runtime");
     const xAxis = xAxes.axis[axisId];
     const xScale = xAxis.scale;
     const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
-    const isBandScaleX = type === 'band' && value !== null && (0, _isBandScale.isBandScale)(xScale);
+    const isXScaleOrdinal = type === 'band' && value !== null && (0, _scaleGuards.isOrdinalScale)(xScale);
     if (process.env.NODE_ENV !== 'production') {
-      const isError = isBandScaleX && xScale(value) === undefined;
+      const isError = isXScaleOrdinal && xScale(value) === undefined;
       if (isError) {
         console.error([`MUI X Charts: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
       }
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-      children: [isBandScaleX && xScale(value) !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
+      children: [isXScaleOrdinal && xScale(value) !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
         d: `M ${xScale(value) - (xScale.step() - xScale.bandwidth()) / 2} ${top} l ${xScale.step()} 0 l 0 ${height} l ${-xScale.step()} 0 Z`,
         className: classes.root,
         ownerState: {

package/ChartsAxisHighlight/ChartsYAxisHighlight.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = ChartsYHighlight;
 var React = _interopRequireWildcard(require("react"));
 var _useScale = require("../hooks/useScale");
-var _isBandScale = require("../internals/isBandScale");
+var _scaleGuards = require("../internals/scaleGuards");
 var _useSelector = require("../internals/store/useSelector");
 var _useStore = require("../internals/store/useStore");
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
@@ -39,15 +39,15 @@ var _jsxRuntime = require("react/jsx-runtime");
     const yAxis = yAxes.axis[axisId];
     const yScale = yAxis.scale;
     const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
-    const isBandScaleY = type === 'band' && value !== null && (0, _isBandScale.isBandScale)(yScale);
+    const isYScaleOrdinal = type === 'band' && value !== null && (0, _scaleGuards.isOrdinalScale)(yScale);
     if (process.env.NODE_ENV !== 'production') {
-      const isError = isBandScaleY && yScale(value) === undefined;
+      const isError = isYScaleOrdinal && yScale(value) === undefined;
       if (isError) {
         console.error([`MUI X Charts: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
       }
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-      children: [isBandScaleY && yScale(value) !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
+      children: [isYScaleOrdinal && yScale(value) !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
         d: `M ${left} ${yScale(value) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${width} 0 l 0 ${-yScale.step()} Z`,
         className: classes.root,
         ownerState: {

package/ChartsLegend/ChartsLegend.js

@@ -58,7 +58,8 @@ const RootElement = (0, _styles.styled)('ul', {
     display: ownerState.direction === 'vertical' ? 'flex' : 'inline-flex',
     alignItems: 'center',
     gap: theme.spacing(1)
-  }
+  },
+  gridArea: 'legend'
 }));
 const ChartsLegend = exports.ChartsLegend = (0, _consumeSlots.consumeSlots)('MuiChartsLegend', 'legend', {
   defaultProps: {

package/ChartsLegend/PiecewiseColorLegend.d.ts

@@ -20,10 +20,10 @@ export interface PiecewiseColorLegendProps extends ColorLegendSelector, PrependK
    */
   labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
   /**
-   * Where to position the labels relative to the gradient.
+   * Where to position the labels relative to the color marks.
    * @default 'extremes'
    */
-  labelPosition?: 'start' | 'end' | 'extremes';
+  labelPosition?: 'start' | 'end' | 'extremes' | 'inline-start' | 'inline-end';
   /**
    * Callback fired when a legend item is clicked.
    * @param {React.MouseEvent<HTMLButtonElement, MouseEvent>} event The click event.

package/ChartsLegend/PiecewiseColorLegend.js

@@ -28,6 +28,7 @@ const RootElement = (0, _styles.styled)('ul', {
   theme,
   ownerState
 }) => {
+  const classes = _piecewiseColorLegendClasses.piecewiseColorLegendClasses;
   return (0, _extends2.default)({}, theme.typography.caption, {
     color: (theme.vars || theme).palette.text.primary,
     lineHeight: '100%',
@@ -39,8 +40,8 @@ const RootElement = (0, _styles.styled)('ul', {
     paddingInlineStart: 0,
     marginBlock: theme.spacing(1),
     marginInline: theme.spacing(1),
-    width: 'max-content',
-    [`button.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.item}`]: {
+    width: 'fit-content',
+    [`button.${classes.item}`]: {
       // Reset button styles
       background: 'none',
       border: 'none',
@@ -52,55 +53,62 @@ const RootElement = (0, _styles.styled)('ul', {
       letterSpacing: 'inherit',
       color: 'inherit'
     },
-    [`.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.item}`]: {
+    [`.${classes.item}`]: {
       display: 'flex',
       gap: theme.spacing(0.5)
     },
-    [`li :not(.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.minLabel}, .${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.maxLabel}) .${_piecewiseColorLegendClasses.piecewiseColorLegendClasses?.mark}`]: {
+    [`li :not(.${classes.minLabel}, .${classes.maxLabel}) .${classes?.mark}`]: {
       alignSelf: 'center'
     },
-    [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.start}`]: {
+    [`&.${classes.start}`]: {
       alignItems: 'end'
     },
-    [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.end}`]: {
+    [`&.${classes.end}`]: {
       alignItems: 'start'
     },
-    [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.horizontal}`]: {
+    [`&.${classes.horizontal}`]: {
       alignItems: 'center',
-      [`.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.item}`]: {
+      [`.${classes.item}`]: {
         flexDirection: 'column'
       },
-      [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.start}`]: {
+      [`&.${classes.inlineStart}, &.${classes.inlineEnd}`]: {
+        gap: theme.spacing(1.5),
+        flexWrap: 'wrap',
+        [`.${classes.item}`]: {
+          flexDirection: 'row'
+        }
+      },
+      [`&.${classes.start}`]: {
         alignItems: 'end'
       },
-      [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.end}`]: {
+      [`&.${classes.end}`]: {
         alignItems: 'start'
       },
-      [`.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.minLabel}`]: {
+      [`.${classes.minLabel}`]: {
         alignItems: 'end'
       },
-      [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.extremes}`]: {
-        [`.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.minLabel}, .${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.maxLabel}`]: {
+      [`&.${classes.extremes}`]: {
+        [`.${classes.minLabel}, .${classes.maxLabel}`]: {
           alignItems: 'center',
           display: 'flex',
           flexDirection: 'row'
         }
       }
     },
-    [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.vertical}`]: {
-      [`.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.item}`]: {
+    [`&.${classes.vertical}`]: {
+      [`.${classes.item}`]: {
         flexDirection: 'row',
         alignItems: 'center'
       },
-      [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.start}`]: {
+      [`&.${classes.start}, &.${classes.inlineStart}`]: {
         alignItems: 'end'
       },
-      [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.end}`]: {
+      [`&.${classes.end}, &.${classes.inlineEnd}`]: {
         alignItems: 'start'
       },
-      [`&.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.extremes}`]: {
+      [`&.${classes.extremes}`]: {
         alignItems: 'center',
-        [`.${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.minLabel}, .${_piecewiseColorLegendClasses.piecewiseColorLegendClasses.maxLabel}`]: {
+        [`.${classes.minLabel}, .${classes.maxLabel}`]: {
           alignItems: 'center',
           display: 'flex',
           flexDirection: 'column'
@@ -153,6 +161,8 @@ const PiecewiseColorLegend = exports.PiecewiseColorLegend = (0, _consumeThemePro
   const isStart = labelPosition === 'start';
   const isEnd = labelPosition === 'end';
   const isExtremes = labelPosition === 'extremes';
+  const isInlineStart = labelPosition === 'inline-start';
+  const isInlineEnd = labelPosition === 'inline-end';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(RootElement, (0, _extends2.default)({
     className: (0, _clsx.default)(classes?.root, className),
     ref: ref
@@ -186,8 +196,8 @@ const PiecewiseColorLegend = exports.PiecewiseColorLegend = (0, _consumeThemePro
       if (label === null || label === undefined) {
         return null;
       }
-      const isTextBefore = isStart || isExtremes && isFirst;
-      const isTextAfter = isEnd || isExtremes && isLast;
+      const isTextBefore = isStart || isExtremes && isFirst || isInlineStart;
+      const isTextAfter = isEnd || isExtremes && isLast || isInlineEnd;
       const clickObject = {
         type: 'piecewiseColor',
         color,
@@ -255,7 +265,7 @@ process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {
    * Where to position the labels relative to the gradient.
    * @default 'extremes'
    */
-  labelPosition: _propTypes.default.oneOf(['start', 'end', 'extremes']),
+  labelPosition: _propTypes.default.oneOf(['start', 'end', 'extremes', 'inline-start', 'inline-end']),
   /**
    * The type of the mark.
    * @default 'square'

package/ChartsLegend/piecewiseColorLegendClasses.d.ts

@@ -19,6 +19,10 @@ export interface PiecewiseColorLegendClasses {
   end: string;
   /** Styles applied to the legend with the labels on the extremes of the color marks. */
   extremes: string;
+  /** Styles applied to the legend with the labels inlined before the color marks. */
+  inlineStart: string;
+  /** Styles applied to the legend with the labels inlined after the color marks. */
+  inlineEnd: string;
   /** Styles applied to the marks. */
   mark: string;
   /** Styles applied to the series label. */

package/ChartsLegend/piecewiseColorLegendClasses.js

@@ -18,7 +18,7 @@ const useUtilityClasses = props => {
     labelPosition
   } = props;
   const slots = {
-    root: ['root', direction, labelPosition],
+    root: ['root', direction, labelPosition?.replaceAll(/-(\w)/g, match => match[1].toUpperCase())],
     minLabel: ['minLabel'],
     maxLabel: ['maxLabel'],
     item: ['item'],
@@ -28,4 +28,4 @@ const useUtilityClasses = props => {
   return (0, _composeClasses.default)(slots, getLegendUtilityClass, classes);
 };
 exports.useUtilityClasses = useUtilityClasses;
-const piecewiseColorLegendClasses = exports.piecewiseColorLegendClasses = (0, _generateUtilityClasses.default)('MuiPiecewiseColorLegendClasses', ['root', 'minLabel', 'maxLabel', 'item', 'vertical', 'horizontal', 'start', 'end', 'extremes', 'mark', 'label']);
+const piecewiseColorLegendClasses = exports.piecewiseColorLegendClasses = (0, _generateUtilityClasses.default)('MuiPiecewiseColorLegendClasses', ['root', 'minLabel', 'maxLabel', 'item', 'vertical', 'horizontal', 'start', 'end', 'extremes', 'inlineStart', 'inlineEnd', 'mark', 'label']);

package/ChartsSurface/ChartsSurface.js

@@ -37,7 +37,8 @@ const ChartsSurfaceStyles = (0, _styles.styled)('svg', {
   // This prevents default touch actions when using the svg on mobile devices.
   // For example, prevent page scroll & zoom.
   touchAction: 'pan-y',
-  userSelect: 'none'
+  userSelect: 'none',
+  gridArea: 'chart'
 }));
 
 /**

package/ChartsWrapper/ChartsWrapper.d.ts

@@ -13,6 +13,10 @@ export interface ChartsWrapperProps {
    * @default 'horizontal'
    */
   legendDirection?: Direction;
+  /**
+   * If `true`, the legend is not rendered.
+   */
+  hideLegend: boolean;
   /**
    * If `true`, the chart wrapper set `height: 100%`.
    * @default `false` if the `height` prop is set. And `true` otherwise.

package/ChartsWrapper/ChartsWrapper.js

@@ -14,50 +14,76 @@ var _useChartRootRef = require("../hooks/useChartRootRef");
 var _useStore = require("../internals/store/useStore");
 var _useSelector = require("../internals/store/useSelector");
 var _useChartDimensions = require("../internals/plugins/corePlugins/useChartDimensions");
+var _Toolbar = require("../Toolbar");
 var _jsxRuntime = require("react/jsx-runtime");
-const getDirection = (direction, position) => {
+const getJustifyItems = position => {
+  if (position?.horizontal === 'start') {
+    return 'start';
+  }
+  if (position?.horizontal === 'end') {
+    return 'end';
+  }
+  return 'center';
+};
+const getAlignItems = position => {
+  if (position?.vertical === 'top') {
+    return 'flex-start';
+  }
+  if (position?.vertical === 'bottom') {
+    return 'flex-end';
+  }
+  return 'center';
+};
+const addToolbar = template => {
+  return `"toolbar"
+          ${template}`;
+};
+const getGridTemplateAreas = (hideLegend, direction, position) => {
+  if (hideLegend) {
+    return `"chart"`;
+  }
   if (direction === 'vertical') {
     if (position?.horizontal === 'start') {
-      return 'row';
+      return `"legend chart"`;
     }
-    return 'row-reverse';
+    return `"chart legend"`;
   }
   if (position?.vertical === 'bottom') {
-    return 'column-reverse';
+    return `"chart"
+            "legend"`;
   }
-  return 'column';
+  return `"legend"
+          "chart"`;
 };
-const getAlign = (direction, position) => {
+const getTemplateColumns = (hideLegend, direction, position, width) => {
   if (direction === 'vertical') {
-    if (position?.vertical === 'top') {
-      return 'flex-start';
-    }
-    if (position?.vertical === 'bottom') {
-      return 'flex-end';
+    if (hideLegend) {
+      return '1fr';
     }
-  }
-  if (direction === 'horizontal') {
     if (position?.horizontal === 'start') {
-      return 'flex-start';
+      return 'auto 1fr';
     }
-    if (position?.horizontal === 'end') {
-      return 'flex-end';
+    return `${width ? 'auto' : '1fr'} auto`;
+  }
+  return '100%';
+};
+const getTemplateRows = (hideLegend, direction) => {
+  if (direction === 'vertical') {
+    if (hideLegend) {
+      return 'auto';
     }
+    return 'auto 1fr';
   }
-  return 'center';
+  return 'auto 1fr';
 };
 const Root = (0, _styles.styled)('div', {
   name: 'MuiChartsWrapper',
   slot: 'Root',
-  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'extendVertically'
+  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'extendVertically' && prop !== 'width'
 })(({
-  ownerState
+  ownerState,
+  width
 }) => ({
-  display: 'flex',
-  flexDirection: getDirection(ownerState.legendDirection, ownerState.legendPosition),
-  flex: 1,
-  justifyContent: 'center',
-  alignItems: getAlign(ownerState.legendDirection, ownerState.legendPosition),
   variants: [{
     props: {
       extendVertically: true
@@ -65,7 +91,23 @@ const Root = (0, _styles.styled)('div', {
     style: {
       height: '100%'
     }
-  }]
+  }],
+  flex: 1,
+  display: 'grid',
+  gridTemplateColumns: getTemplateColumns(ownerState.hideLegend, ownerState.legendDirection, ownerState.legendPosition, width),
+  gridTemplateRows: getTemplateRows(ownerState.hideLegend, ownerState.legendDirection),
+  [`&:has(.${_Toolbar.chartsToolbarClasses.root})`]: {
+    gridTemplateAreas: addToolbar(getGridTemplateAreas(ownerState.hideLegend, ownerState.legendDirection, ownerState.legendPosition))
+  },
+  [`&:not(:has(.${_Toolbar.chartsToolbarClasses.root}))`]: {
+    gridTemplateAreas: getGridTemplateAreas(ownerState.hideLegend, ownerState.legendDirection, ownerState.legendPosition)
+  },
+  justifyContent: 'center',
+  justifyItems: getJustifyItems(ownerState.legendPosition),
+  alignItems: getAlignItems(ownerState.legendPosition),
+  [`& > .${_Toolbar.chartsToolbarClasses.root}`]: {
+    justifySelf: 'center'
+  }
 }));
 
 /**
@@ -81,6 +123,7 @@ function ChartsWrapper(props) {
   const chartRootRef = (0, _useChartRootRef.useChartRootRef)();
   const store = (0, _useStore.useStore)();
   const {
+    width: propsWidth,
     height: propsHeight
   } = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartPropsSize);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
@@ -88,6 +131,7 @@ function ChartsWrapper(props) {
     ownerState: props,
     sx: sx,
     extendVertically: extendVertically ?? propsHeight === undefined,
+    width: propsWidth,
     children: children
   });
 }
@@ -102,6 +146,10 @@ process.env.NODE_ENV !== "production" ? ChartsWrapper.propTypes = {
    * @default `false` if the `height` prop is set. And `true` otherwise.
    */
   extendVertically: _propTypes.default.bool,
+  /**
+   * If `true`, the legend is not rendered.
+   */
+  hideLegend: _propTypes.default.bool.isRequired,
   /**
    * The direction of the legend.
    * @default 'horizontal'

package/ChartsXAxis/ChartsGroupedXAxisTicks.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChartsGroupedXAxisTicks = ChartsGroupedXAxisTicks;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _isBandScale = require("../internals/isBandScale");
+var _scaleGuards = require("../internals/scaleGuards");
 var _useChartContext = require("../context/ChartProvider/useChartContext");
 var _utilities = require("./utilities");
 var _useTicksGrouped = require("../hooks/useTicksGrouped");
@@ -40,7 +40,7 @@ function ChartsGroupedXAxisTicks(inProps) {
     TickLabel,
     axisTickLabelProps
   } = (0, _useAxisTicksProps.useAxisTicksProps)(inProps);
-  if (!(0, _isBandScale.isBandScale)(xScale)) {
+  if (!(0, _scaleGuards.isOrdinalScale)(xScale)) {
     throw new Error('MUI X Charts: ChartsGroupedXAxis only supports the `band` and `point` scale types.');
   }
   const {

package/ChartsXAxis/ChartsXAxisImpl.js

@@ -15,7 +15,7 @@ var _styles = require("@mui/material/styles");
 var _ChartsSingleXAxisTicks = require("./ChartsSingleXAxisTicks");
 var _ChartsGroupedXAxisTicks = require("./ChartsGroupedXAxisTicks");
 var _ChartsText = require("../ChartsText");
-var _isBandScale = require("../internals/isBandScale");
+var _scaleGuards = require("../internals/scaleGuards");
 var _isInfinity = require("../internals/isInfinity");
 var _utilities = require("./utilities");
 var _hooks = require("../hooks");
@@ -87,8 +87,8 @@ function ChartsXAxisImpl(_ref) {
   }
   const labelHeight = label ? (0, _domUtils.getStringSize)(label, axisLabelProps.style).height : 0;
   const domain = xScale.domain();
-  const isScaleBand = (0, _isBandScale.isBandScale)(xScale);
-  const skipTickRendering = isScaleBand && domain.length === 0 || !isScaleBand && domain.some(_isInfinity.isInfinity);
+  const isScaleOrdinal = (0, _scaleGuards.isOrdinalScale)(xScale);
+  const skipTickRendering = isScaleOrdinal ? domain.length === 0 : domain.some(_isInfinity.isInfinity);
   let children = null;
   if (!skipTickRendering) {
     children = 'groups' in axis && Array.isArray(axis.groups) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGroupedXAxisTicks.ChartsGroupedXAxisTicks, (0, _extends2.default)({}, inProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSingleXAxisTicks.ChartsSingleXAxisTicks, (0, _extends2.default)({}, inProps, {

package/ChartsXAxis/getVisibleLabels.js

@@ -43,8 +43,12 @@ function getVisibleLabels(xTicks, {
   return new Set(xTicks.filter((item, labelIndex) => {
     const {
       offset,
-      labelOffset
+      labelOffset,
+      formattedValue
     } = item;
+    if (formattedValue === '') {
+      return false;
+    }
     const textPosition = offset + labelOffset;
     if (labelIndex > 0 && direction * textPosition < direction * (previousTextLimit + tickLabelMinGap)) {
       return false;

package/ChartsYAxis/ChartsGroupedYAxisTicks.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChartsGroupedYAxisTicks = ChartsGroupedYAxisTicks;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _isBandScale = require("../internals/isBandScale");
+var _scaleGuards = require("../internals/scaleGuards");
 var _useChartContext = require("../context/ChartProvider/useChartContext");
 var _utilities = require("./utilities");
 var _useTicksGrouped = require("../hooks/useTicksGrouped");
@@ -41,7 +41,7 @@ function ChartsGroupedYAxisTicks(inProps) {
     TickLabel,
     axisTickLabelProps
   } = (0, _useAxisTicksProps.useAxisTicksProps)(inProps);
-  if (!(0, _isBandScale.isBandScale)(yScale)) {
+  if (!(0, _scaleGuards.isOrdinalScale)(yScale)) {
     throw new Error('MUI X Charts: ChartsGroupedYAxis only supports the `band` and `point` scale types.');
   }
   const {

package/ChartsYAxis/ChartsYAxisImpl.js

@@ -19,7 +19,7 @@ var _utilities = require("./utilities");
 var _isInfinity = require("../internals/isInfinity");
 var _useDrawingArea = require("../hooks/useDrawingArea");
 var _useIsHydrated = require("../hooks/useIsHydrated");
-var _isBandScale = require("../internals/isBandScale");
+var _scaleGuards = require("../internals/scaleGuards");
 var _domUtils = require("../internals/domUtils");
 var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -107,8 +107,8 @@ function ChartsYAxisImpl(_ref) {
   };
   const axisLabelHeight = label == null ? 0 : (0, _domUtils.getStringSize)(label, axisLabelProps.style).height;
   const domain = yScale.domain();
-  const isScaleBand = (0, _isBandScale.isBandScale)(yScale);
-  const skipTickRendering = isScaleBand && domain.length === 0 || !isScaleBand && domain.some(_isInfinity.isInfinity);
+  const isScaleOrdinal = (0, _scaleGuards.isOrdinalScale)(yScale);
+  const skipTickRendering = isScaleOrdinal ? domain.length === 0 : domain.some(_isInfinity.isInfinity);
   let children = null;
   if (!skipTickRendering) {
     children = 'groups' in axis && Array.isArray(axis.groups) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGroupedYAxisTicks.ChartsGroupedYAxisTicks, (0, _extends2.default)({}, inProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSingleYAxisTicks.ChartsSingleYAxisTicks, (0, _extends2.default)({}, inProps, {