@mui/x-charts 8.11.2 → 8.11.3

package/LineChart/useAreaPlotData.js

@@ -8,7 +8,7 @@ exports.useAreaPlotData = useAreaPlotData;
 var React = _interopRequireWildcard(require("react"));
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _useChartGradientId = require("../hooks/useChartGradientId");
-var _isBandScale = require("../internals/isBandScale");
+var _scaleGuards = require("../internals/scaleGuards");
 var _getCurve = require("../internals/getCurve");
 var _hooks = require("../hooks");
 var _constants = require("../constants");
@@ -59,7 +59,7 @@ function useAreaPlotData(xAxes, yAxes) {
             throw new Error(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
           }
         }
-        const shouldExpand = curve?.includes('step') && !strictStepCurve && (0, _isBandScale.isBandScale)(xScale);
+        const shouldExpand = curve?.includes('step') && !strictStepCurve && (0, _scaleGuards.isOrdinalScale)(xScale);
         const formattedData = xData?.flatMap((x, index) => {
           const nullData = data[index] == null;
           if (shouldExpand) {

package/LineChart/useLineChartProps.js

@@ -125,7 +125,8 @@ const useLineChartProps = 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/LineChart/useLinePlotData.js

@@ -9,7 +9,7 @@ var React = _interopRequireWildcard(require("react"));
 var _warning = require("@mui/x-internals/warning");
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _useChartGradientId = require("../hooks/useChartGradientId");
-var _isBandScale = require("../internals/isBandScale");
+var _scaleGuards = require("../internals/scaleGuards");
 var _getCurve = require("../internals/getCurve");
 var _hooks = require("../hooks");
 var _constants = require("../constants");
@@ -57,7 +57,7 @@ function useLinePlotData(xAxes, yAxes) {
             (0, _warning.warnOnce)(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`, 'error');
           }
         }
-        const shouldExpand = curve?.includes('step') && !strictStepCurve && (0, _isBandScale.isBandScale)(xScale);
+        const shouldExpand = curve?.includes('step') && !strictStepCurve && (0, _scaleGuards.isOrdinalScale)(xScale);
         const formattedData = xData?.flatMap((x, index) => {
           const nullData = data[index] == null;
           if (shouldExpand) {

package/PieChart/PieChart.js

@@ -85,6 +85,7 @@ const PieChart = exports.PieChart = /*#__PURE__*/React.forwardRef(function PieCh
       legendPosition: props.slotProps?.legend?.position,
       legendDirection: props.slotProps?.legend?.direction ?? 'vertical',
       sx: sx,
+      hideLegend: hideLegend ?? false,
       children: [showToolbar && Toolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, {
         direction: props.slotProps?.legend?.direction ?? 'vertical',
         slots: slots,

package/RadarChart/RadarAxis/useRadarAxis.js

@@ -9,7 +9,7 @@ var _useAxis = require("../../hooks/useAxis");
 var _useScale = require("../../hooks/useScale");
 var _useChartContext = require("../../context/ChartProvider/useChartContext");
 var _useChartPolarAxis = require("../../internals/plugins/featurePlugins/useChartPolarAxis");
-var _isBandScale = require("../../internals/isBandScale");
+var _scaleGuards = require("../../internals/scaleGuards");
 var _degToRad = require("../../internals/degToRad");
 var _clampAngle = require("../../internals/clampAngle");
 var _useSelector = require("../../internals/store/useSelector");
@@ -48,7 +48,7 @@ function useRadarAxis(params) {
   }, (_, index) => (index + 1) / divisions);
   const radiusScale = radiusAxis[metric].scale;
   const R = radiusScale.range()[1];
-  if ((0, _isBandScale.isBandScale)(radiusScale)) {
+  if ((0, _scaleGuards.isOrdinalScale)(radiusScale)) {
     if (process.env.NODE_ENV !== 'production') {
       console.error('MUI X Charts: Radar chart does not support ordinal axes');
     }

package/RadarChart/useRadarChartProps.js

@@ -65,7 +65,8 @@ const useRadarChartProps = props => {
     slotProps
   };
   const chartsWrapperProps = {
-    sx
+    sx,
+    hideLegend: props.hideLegend ?? false
   };
   const radarGrid = {
     divisions,

package/ScatterChart/useScatterChartProps.js

@@ -95,7 +95,8 @@ const useScatterChartProps = 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/Toolbar/Toolbar.js

@@ -33,7 +33,8 @@ const ToolbarRoot = (0, _styles.styled)('div', {
   minHeight: 44,
   boxSizing: 'border-box',
   border: `1px solid ${(theme.vars || theme).palette.divider}`,
-  borderRadius: 4
+  borderRadius: 4,
+  gridArea: 'toolbar'
 }));
 const Toolbar = exports.Toolbar = /*#__PURE__*/React.forwardRef(function Toolbar(_ref, ref) {
   let {

package/esm/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/esm/BarChart/useBarChartProps.js

@@ -41,7 +41,7 @@ export const useBarChartProps = props => {
       barLabel,
       className
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
   const clipPathId = `${id}-clip-path`;
   const hasHorizontalSeries = layout === 'horizontal' || layout === undefined && series.some(item => item.layout === 'horizontal');
@@ -82,7 +82,7 @@ export const useBarChartProps = props => {
       scaleType: 'band'
     }, axis)) : yAxis;
   }, [defaultYAxis, hasHorizontalSeries, yAxis]);
-  const chartContainerProps = _extends({}, rest, {
+  const chartContainerProps = _extends({}, other, {
     series: seriesWithDefault,
     width,
     height,
@@ -136,7 +136,8 @@ export 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/esm/ChartsAxisHighlight/ChartsXAxisHighlight.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { getValueToPositionMapper } from "../hooks/useScale.js";
-import { isBandScale } from "../internals/isBandScale.js";
+import { isOrdinalScale } from "../internals/scaleGuards.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 import { selectorChartsHighlightXAxisValue, selectorChartXAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
@@ -35,15 +35,15 @@ export default function ChartsXHighlight(props) {
     const xAxis = xAxes.axis[axisId];
     const xScale = xAxis.scale;
     const getXPosition = getValueToPositionMapper(xScale);
-    const isBandScaleX = type === 'band' && value !== null && isBandScale(xScale);
+    const isXScaleOrdinal = type === 'band' && value !== null && 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__*/_jsxs(React.Fragment, {
-      children: [isBandScaleX && xScale(value) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
+      children: [isXScaleOrdinal && xScale(value) !== undefined && /*#__PURE__*/_jsx(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/esm/ChartsAxisHighlight/ChartsYAxisHighlight.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { getValueToPositionMapper } from "../hooks/useScale.js";
-import { isBandScale } from "../internals/isBandScale.js";
+import { isOrdinalScale } from "../internals/scaleGuards.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 import { selectorChartsHighlightYAxisValue, selectorChartYAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
@@ -35,15 +35,15 @@ export default function ChartsYHighlight(props) {
     const yAxis = yAxes.axis[axisId];
     const yScale = yAxis.scale;
     const getYPosition = getValueToPositionMapper(yScale);
-    const isBandScaleY = type === 'band' && value !== null && isBandScale(yScale);
+    const isYScaleOrdinal = type === 'band' && value !== null && 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__*/_jsxs(React.Fragment, {
-      children: [isBandScaleY && yScale(value) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
+      children: [isYScaleOrdinal && yScale(value) !== undefined && /*#__PURE__*/_jsx(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/esm/ChartsLegend/ChartsLegend.js

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

package/esm/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/esm/ChartsLegend/PiecewiseColorLegend.js

@@ -21,6 +21,7 @@ const RootElement = styled('ul', {
   theme,
   ownerState
 }) => {
+  const classes = piecewiseColorLegendClasses;
   return _extends({}, theme.typography.caption, {
     color: (theme.vars || theme).palette.text.primary,
     lineHeight: '100%',
@@ -32,8 +33,8 @@ const RootElement = styled('ul', {
     paddingInlineStart: 0,
     marginBlock: theme.spacing(1),
     marginInline: theme.spacing(1),
-    width: 'max-content',
-    [`button.${piecewiseColorLegendClasses.item}`]: {
+    width: 'fit-content',
+    [`button.${classes.item}`]: {
       // Reset button styles
       background: 'none',
       border: 'none',
@@ -45,55 +46,62 @@ const RootElement = styled('ul', {
       letterSpacing: 'inherit',
       color: 'inherit'
     },
-    [`.${piecewiseColorLegendClasses.item}`]: {
+    [`.${classes.item}`]: {
       display: 'flex',
       gap: theme.spacing(0.5)
     },
-    [`li :not(.${piecewiseColorLegendClasses.minLabel}, .${piecewiseColorLegendClasses.maxLabel}) .${piecewiseColorLegendClasses?.mark}`]: {
+    [`li :not(.${classes.minLabel}, .${classes.maxLabel}) .${classes?.mark}`]: {
       alignSelf: 'center'
     },
-    [`&.${piecewiseColorLegendClasses.start}`]: {
+    [`&.${classes.start}`]: {
       alignItems: 'end'
     },
-    [`&.${piecewiseColorLegendClasses.end}`]: {
+    [`&.${classes.end}`]: {
       alignItems: 'start'
     },
-    [`&.${piecewiseColorLegendClasses.horizontal}`]: {
+    [`&.${classes.horizontal}`]: {
       alignItems: 'center',
-      [`.${piecewiseColorLegendClasses.item}`]: {
+      [`.${classes.item}`]: {
         flexDirection: 'column'
       },
-      [`&.${piecewiseColorLegendClasses.start}`]: {
+      [`&.${classes.inlineStart}, &.${classes.inlineEnd}`]: {
+        gap: theme.spacing(1.5),
+        flexWrap: 'wrap',
+        [`.${classes.item}`]: {
+          flexDirection: 'row'
+        }
+      },
+      [`&.${classes.start}`]: {
         alignItems: 'end'
       },
-      [`&.${piecewiseColorLegendClasses.end}`]: {
+      [`&.${classes.end}`]: {
         alignItems: 'start'
       },
-      [`.${piecewiseColorLegendClasses.minLabel}`]: {
+      [`.${classes.minLabel}`]: {
         alignItems: 'end'
       },
-      [`&.${piecewiseColorLegendClasses.extremes}`]: {
-        [`.${piecewiseColorLegendClasses.minLabel}, .${piecewiseColorLegendClasses.maxLabel}`]: {
+      [`&.${classes.extremes}`]: {
+        [`.${classes.minLabel}, .${classes.maxLabel}`]: {
           alignItems: 'center',
           display: 'flex',
           flexDirection: 'row'
         }
       }
     },
-    [`&.${piecewiseColorLegendClasses.vertical}`]: {
-      [`.${piecewiseColorLegendClasses.item}`]: {
+    [`&.${classes.vertical}`]: {
+      [`.${classes.item}`]: {
         flexDirection: 'row',
         alignItems: 'center'
       },
-      [`&.${piecewiseColorLegendClasses.start}`]: {
+      [`&.${classes.start}, &.${classes.inlineStart}`]: {
         alignItems: 'end'
       },
-      [`&.${piecewiseColorLegendClasses.end}`]: {
+      [`&.${classes.end}, &.${classes.inlineEnd}`]: {
         alignItems: 'start'
       },
-      [`&.${piecewiseColorLegendClasses.extremes}`]: {
+      [`&.${classes.extremes}`]: {
         alignItems: 'center',
-        [`.${piecewiseColorLegendClasses.minLabel}, .${piecewiseColorLegendClasses.maxLabel}`]: {
+        [`.${classes.minLabel}, .${classes.maxLabel}`]: {
           alignItems: 'center',
           display: 'flex',
           flexDirection: 'column'
@@ -146,6 +154,8 @@ const PiecewiseColorLegend = consumeThemeProps('MuiPiecewiseColorLegend', {
   const isStart = labelPosition === 'start';
   const isEnd = labelPosition === 'end';
   const isExtremes = labelPosition === 'extremes';
+  const isInlineStart = labelPosition === 'inline-start';
+  const isInlineEnd = labelPosition === 'inline-end';
   return /*#__PURE__*/_jsx(RootElement, _extends({
     className: clsx(classes?.root, className),
     ref: ref
@@ -179,8 +189,8 @@ const PiecewiseColorLegend = consumeThemeProps('MuiPiecewiseColorLegend', {
       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,
@@ -248,7 +258,7 @@ process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {
    * Where to position the labels relative to the gradient.
    * @default 'extremes'
    */
-  labelPosition: PropTypes.oneOf(['start', 'end', 'extremes']),
+  labelPosition: PropTypes.oneOf(['start', 'end', 'extremes', 'inline-start', 'inline-end']),
   /**
    * The type of the mark.
    * @default 'square'

package/esm/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/esm/ChartsLegend/piecewiseColorLegendClasses.js

@@ -11,7 +11,7 @@ export 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'],
@@ -20,4 +20,4 @@ export const useUtilityClasses = props => {
   };
   return composeClasses(slots, getLegendUtilityClass, classes);
 };
-export const piecewiseColorLegendClasses = generateUtilityClasses('MuiPiecewiseColorLegendClasses', ['root', 'minLabel', 'maxLabel', 'item', 'vertical', 'horizontal', 'start', 'end', 'extremes', 'mark', 'label']);
+export const piecewiseColorLegendClasses = generateUtilityClasses('MuiPiecewiseColorLegendClasses', ['root', 'minLabel', 'maxLabel', 'item', 'vertical', 'horizontal', 'start', 'end', 'extremes', 'inlineStart', 'inlineEnd', 'mark', 'label']);

package/esm/ChartsSurface/ChartsSurface.js

@@ -30,7 +30,8 @@ const ChartsSurfaceStyles = 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/esm/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/esm/ChartsWrapper/ChartsWrapper.js

@@ -6,50 +6,76 @@ import { useChartRootRef } from "../hooks/useChartRootRef.js";
 import { useStore } from "../internals/store/useStore.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { selectorChartPropsSize } from "../internals/plugins/corePlugins/useChartDimensions/index.js";
+import { chartsToolbarClasses } from "../Toolbar/index.js";
 import { jsx as _jsx } from "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 = styled('div', {
   name: 'MuiChartsWrapper',
   slot: 'Root',
-  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'extendVertically'
+  shouldForwardProp: prop => 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
@@ -57,7 +83,23 @@ const Root = 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(.${chartsToolbarClasses.root})`]: {
+    gridTemplateAreas: addToolbar(getGridTemplateAreas(ownerState.hideLegend, ownerState.legendDirection, ownerState.legendPosition))
+  },
+  [`&:not(:has(.${chartsToolbarClasses.root}))`]: {
+    gridTemplateAreas: getGridTemplateAreas(ownerState.hideLegend, ownerState.legendDirection, ownerState.legendPosition)
+  },
+  justifyContent: 'center',
+  justifyItems: getJustifyItems(ownerState.legendPosition),
+  alignItems: getAlignItems(ownerState.legendPosition),
+  [`& > .${chartsToolbarClasses.root}`]: {
+    justifySelf: 'center'
+  }
 }));
 
 /**
@@ -73,6 +115,7 @@ function ChartsWrapper(props) {
   const chartRootRef = useChartRootRef();
   const store = useStore();
   const {
+    width: propsWidth,
     height: propsHeight
   } = useSelector(store, selectorChartPropsSize);
   return /*#__PURE__*/_jsx(Root, {
@@ -80,6 +123,7 @@ function ChartsWrapper(props) {
     ownerState: props,
     sx: sx,
     extendVertically: extendVertically ?? propsHeight === undefined,
+    width: propsWidth,
     children: children
   });
 }
@@ -94,6 +138,10 @@ process.env.NODE_ENV !== "production" ? ChartsWrapper.propTypes = {
    * @default `false` if the `height` prop is set. And `true` otherwise.
    */
   extendVertically: PropTypes.bool,
+  /**
+   * If `true`, the legend is not rendered.
+   */
+  hideLegend: PropTypes.bool.isRequired,
   /**
    * The direction of the legend.
    * @default 'horizontal'

package/esm/ChartsXAxis/ChartsGroupedXAxisTicks.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { isBandScale } from "../internals/isBandScale.js";
+import { isOrdinalScale } from "../internals/scaleGuards.js";
 import { useChartContext } from "../context/ChartProvider/useChartContext.js";
 import { TICK_LABEL_GAP } from "./utilities.js";
 import { useTicksGrouped } from "../hooks/useTicksGrouped.js";
@@ -33,7 +33,7 @@ function ChartsGroupedXAxisTicks(inProps) {
     TickLabel,
     axisTickLabelProps
   } = useAxisTicksProps(inProps);
-  if (!isBandScale(xScale)) {
+  if (!isOrdinalScale(xScale)) {
     throw new Error('MUI X Charts: ChartsGroupedXAxis only supports the `band` and `point` scale types.');
   }
   const {

package/esm/ChartsXAxis/ChartsXAxisImpl.js

@@ -10,7 +10,7 @@ import { styled, useTheme, useThemeProps } from '@mui/material/styles';
 import { ChartsSingleXAxisTicks } from "./ChartsSingleXAxisTicks.js";
 import { ChartsGroupedXAxisTicks } from "./ChartsGroupedXAxisTicks.js";
 import { ChartsText } from "../ChartsText/index.js";
-import { isBandScale } from "../internals/isBandScale.js";
+import { isOrdinalScale } from "../internals/scaleGuards.js";
 import { isInfinity } from "../internals/isInfinity.js";
 import { defaultProps, useUtilityClasses } from "./utilities.js";
 import { useDrawingArea } from "../hooks/index.js";
@@ -80,8 +80,8 @@ export function ChartsXAxisImpl(_ref) {
   }
   const labelHeight = label ? getStringSize(label, axisLabelProps.style).height : 0;
   const domain = xScale.domain();
-  const isScaleBand = isBandScale(xScale);
-  const skipTickRendering = isScaleBand && domain.length === 0 || !isScaleBand && domain.some(isInfinity);
+  const isScaleOrdinal = isOrdinalScale(xScale);
+  const skipTickRendering = isScaleOrdinal ? domain.length === 0 : domain.some(isInfinity);
   let children = null;
   if (!skipTickRendering) {
     children = 'groups' in axis && Array.isArray(axis.groups) ? /*#__PURE__*/_jsx(ChartsGroupedXAxisTicks, _extends({}, inProps)) : /*#__PURE__*/_jsx(ChartsSingleXAxisTicks, _extends({}, inProps, {

package/esm/ChartsXAxis/getVisibleLabels.js

@@ -39,8 +39,12 @@ export 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/esm/ChartsYAxis/ChartsGroupedYAxisTicks.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { isBandScale } from "../internals/isBandScale.js";
+import { isOrdinalScale } from "../internals/scaleGuards.js";
 import { useChartContext } from "../context/ChartProvider/useChartContext.js";
 import { TICK_LABEL_GAP } from "./utilities.js";
 import { useTicksGrouped } from "../hooks/useTicksGrouped.js";
@@ -34,7 +34,7 @@ function ChartsGroupedYAxisTicks(inProps) {
     TickLabel,
     axisTickLabelProps
   } = useAxisTicksProps(inProps);
-  if (!isBandScale(yScale)) {
+  if (!isOrdinalScale(yScale)) {
     throw new Error('MUI X Charts: ChartsGroupedYAxis only supports the `band` and `point` scale types.');
   }
   const {