@mui/x-charts 8.10.0 → 8.10.1

package/BarChart/BarChart.js

@@ -273,6 +273,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     fill: _propTypes.default.string,
     groups: _propTypes.default.arrayOf(_propTypes.default.shape({
       getValue: _propTypes.default.func.isRequired,
+      tickLabelStyle: _propTypes.default.object,
       tickSize: _propTypes.default.number
     })),
     height: _propTypes.default.number,
@@ -328,6 +329,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     fill: _propTypes.default.string,
     groups: _propTypes.default.arrayOf(_propTypes.default.shape({
       getValue: _propTypes.default.func.isRequired,
+      tickLabelStyle: _propTypes.default.object,
       tickSize: _propTypes.default.number
     })),
     height: _propTypes.default.number,
@@ -714,6 +716,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     fill: _propTypes.default.string,
     groups: _propTypes.default.arrayOf(_propTypes.default.shape({
       getValue: _propTypes.default.func.isRequired,
+      tickLabelStyle: _propTypes.default.object,
       tickSize: _propTypes.default.number
     })),
     hideTooltip: _propTypes.default.bool,
@@ -768,6 +771,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     fill: _propTypes.default.string,
     groups: _propTypes.default.arrayOf(_propTypes.default.shape({
       getValue: _propTypes.default.func.isRequired,
+      tickLabelStyle: _propTypes.default.object,
       tickSize: _propTypes.default.number
     })),
     hideTooltip: _propTypes.default.bool,

package/CHANGELOG.md

@@ -5,6 +5,102 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.10.1
+
+_Aug 15, 2025_
+
+We'd like to extend a big thank you to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Y-axes can now be grouped by category when using `band` and `point` scales.
+- 📚 Documentation improvements
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @Janpot, @JCQuintas, @mnajdova, @oliviertassinari, @prakhargupta1, @romgrk
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.10.1`
+
+- [DataGrid] Fix scroll jumping (#19156) @romgrk
+- [DataGrid] Fix scroll restoration (#19182) @romgrk
+- [DataGrid] Fix "no row with id" error (#19193) @romgrk
+
+#### `@mui/x-data-grid-pro@8.10.1` [![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.10.1`.
+
+#### `@mui/x-data-grid-premium@8.10.1` [![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.10.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.10.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.10.0` [![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.10.0`.
+
+### Charts
+
+- Axes can now be grouped by category when using `band` and `point` scales
+
+  <img width="643" height="455" alt="Bar chart with y-axis grouped per categories" src="https://github.com/user-attachments/assets/59044afe-bcc5-4152-8bf1-225db0635025" />
+
+#### `@mui/x-charts@8.10.1`
+
+- [charts] Allow y-axis to be grouped (#19081) @JCQuintas
+- [charts] Fix default axis highlight for axes without data attribute (#18985) @alexfauquette
+- [charts] Fix tooltip mark unexpected wrapping in mobile (#19122) @bernardobelchior
+- [charts] Prevent overflow on charts tooltip (#19123) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.10.1` [![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.10.1`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.10.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.10.1` [![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.10.1`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.10.1`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add all planned charts on the overview page (#19077) @prakhargupta1
+- [docs] Add future charts components link in the sidebar (#19140) @prakhargupta1
+- [docs] Fix Heatmap docs duplicate text (#19138) @JCQuintas
+- [docs] Remove preview from Toolbar & Funnel (#19131) @mnajdova
+- [docs] Reproduce npm sparkline (#19089) @alexfauquette
+
+### Core
+
+- [core] Fix licensing model name (#19025) @oliviertassinari
+- [core] Fix usage of `:catalog` for `@babel/runtime` (#19028) @oliviertassinari
+- [core] Refactor virtualizer API (#18995) @romgrk
+
+### Miscellaneous
+
+- [code-infra] Remove namespaces (#19071) @Janpot
+- [code-infra] Fix `fs-extra` removal from `formattedTSDemos` script (#19132) @bernardobelchior
+- [code-infra] Remove unused code and dependency (#19139) @bernardobelchior
+- [code-infra] Replace `fs-extra` with `node:fs` where possible (#19127) @bernardobelchior
+- [internal] Edit, keep `lockFileMaintenance` simple @oliviertassinari
+- [internal] Fix writing style action name @oliviertassinari
+- [internal] Make it clear that `lockFileMaintenance` is enabled @oliviertassinari
+- [support-infra] Remove default issue label (#19104) @oliviertassinari
+
 ## 8.10.0
 
 _Aug 8, 2025_

package/ChartContainer/ChartContainer.js

@@ -243,6 +243,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     fill: _propTypes.default.string,
     groups: _propTypes.default.arrayOf(_propTypes.default.shape({
       getValue: _propTypes.default.func.isRequired,
+      tickLabelStyle: _propTypes.default.object,
       tickSize: _propTypes.default.number
     })),
     height: _propTypes.default.number,
@@ -299,6 +300,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     fill: _propTypes.default.string,
     groups: _propTypes.default.arrayOf(_propTypes.default.shape({
       getValue: _propTypes.default.func.isRequired,
+      tickLabelStyle: _propTypes.default.object,
       tickSize: _propTypes.default.number
     })),
     height: _propTypes.default.number,
@@ -724,6 +726,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     fill: _propTypes.default.string,
     groups: _propTypes.default.arrayOf(_propTypes.default.shape({
       getValue: _propTypes.default.func.isRequired,
+      tickLabelStyle: _propTypes.default.object,
       tickSize: _propTypes.default.number
     })),
     height: _propTypes.default.number,
@@ -779,6 +782,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     fill: _propTypes.default.string,
     groups: _propTypes.default.arrayOf(_propTypes.default.shape({
       getValue: _propTypes.default.func.isRequired,
+      tickLabelStyle: _propTypes.default.object,
       tickSize: _propTypes.default.number
     })),
     height: _propTypes.default.number,
@@ -1165,6 +1169,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     fill: _propTypes.default.string,
     groups: _propTypes.default.arrayOf(_propTypes.default.shape({
       getValue: _propTypes.default.func.isRequired,
+      tickLabelStyle: _propTypes.default.object,
       tickSize: _propTypes.default.number
     })),
     hideTooltip: _propTypes.default.bool,
@@ -1219,6 +1224,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     fill: _propTypes.default.string,
     groups: _propTypes.default.arrayOf(_propTypes.default.shape({
       getValue: _propTypes.default.func.isRequired,
+      tickLabelStyle: _propTypes.default.object,
       tickSize: _propTypes.default.number
     })),
     hideTooltip: _propTypes.default.bool,

package/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -37,10 +37,10 @@ function ChartsAxisHighlight(props) {
   } = props;
   const classes = useUtilityClasses();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [xAxisHighlight && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsXAxisHighlight.default, {
+    children: [xAxisHighlight && xAxisHighlight !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsXAxisHighlight.default, {
       type: xAxisHighlight,
       classes: classes
-    }), yAxisHighlight && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsYAxisHighlight.default, {
+    }), yAxisHighlight && yAxisHighlight !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsYAxisHighlight.default, {
       type: yAxisHighlight,
       classes: classes
     })]

package/ChartsLabel/labelGradientClasses.d.ts

@@ -13,4 +13,4 @@ export interface ChartsLabelGradientClasses {
 }
 export declare function getLabelGradientUtilityClass(slot: string): string;
 export declare const labelGradientClasses: ChartsLabelGradientClasses;
-export declare const useUtilityClasses: (props: ChartsLabelGradientProps) => Record<"root" | "mask" | "fill", string>;
+export declare const useUtilityClasses: (props: ChartsLabelGradientProps) => Record<"root" | "fill" | "mask", string>;

package/ChartsLabel/labelMarkClasses.d.ts

@@ -15,4 +15,4 @@ export interface ChartsLabelMarkClasses {
 }
 export declare function getLabelMarkUtilityClass(slot: string): string;
 export declare const labelMarkClasses: ChartsLabelMarkClasses;
-export declare const useUtilityClasses: (props: ChartsLabelMarkProps) => Record<"root" | "mask" | "fill", string>;
+export declare const useUtilityClasses: (props: ChartsLabelMarkProps) => Record<"root" | "fill" | "mask", string>;

package/ChartsReferenceLine/ChartsXReferenceLine.d.ts

@@ -8,7 +8,7 @@ export type ChartsXReferenceLineProps<TValue extends string | number | Date = st
    */
   x: TValue;
 };
-export declare function getXReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"root" | "line" | "label", string>;
+export declare function getXReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"line" | "root" | "label", string>;
 declare function ChartsXReferenceLine(props: ChartsXReferenceLineProps): React.JSX.Element | null;
 declare namespace ChartsXReferenceLine {
   var propTypes: any;

package/ChartsReferenceLine/ChartsYReferenceLine.d.ts

@@ -8,7 +8,7 @@ export type ChartsYReferenceLineProps<TValue extends string | number | Date = st
    */
   y: TValue;
 };
-export declare function getYReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"root" | "line" | "label", string>;
+export declare function getYReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"line" | "root" | "label", string>;
 declare function ChartsYReferenceLine(props: ChartsYReferenceLineProps): React.JSX.Element | null;
 declare namespace ChartsYReferenceLine {
   var propTypes: any;

package/ChartsTooltip/ChartsTooltipContainer.js

@@ -124,8 +124,14 @@ function ChartsTooltipContainer(inProps) {
     options: {
       fallbackPlacements: ['top-end', 'top-start', 'bottom-end', 'bottom']
     }
-  }] : []) // Keep default behavior
-  ], [isMouse, isTouch]);
+  }] : []),
+  // Keep default behavior
+  {
+    name: 'preventOverflow',
+    options: {
+      altAxis: true
+    }
+  }], [isMouse, isTouch]);
   if (trigger === 'none') {
     return null;
   }

package/ChartsTooltip/ChartsTooltipTable.d.ts

@@ -13,6 +13,6 @@ export declare const ChartsTooltipRow: import("@emotion/styled").StyledComponent
 /**
  * @ignore - internal component.
  */
-export declare const ChartsTooltipCell: import("@emotion/styled").StyledComponent<Pick<import("@mui/material/Typography").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "p" | "style" | "typography" | "zIndex" | "classes" | "border" | "boxShadow" | "fontWeight" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "className" | "children" | "sx" | "align" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping">, "p" | "slot" | "style" | "title" | "ref" | "typography" | "zIndex" | "classes" | "border" | "boxShadow" | "fontWeight" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "content" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "translate" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "sx" | "align" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+export declare const ChartsTooltipCell: import("@emotion/styled").StyledComponent<Pick<import("@mui/material/Typography").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "p" | "style" | "typography" | "zIndex" | "classes" | "color" | "className" | "sx" | "border" | "boxShadow" | "fontWeight" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "children" | "align" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping">, "p" | "slot" | "style" | "title" | "ref" | "typography" | "zIndex" | "classes" | "color" | "className" | "sx" | "border" | "boxShadow" | "fontWeight" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "content" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "translate" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "align" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
   component?: React.ElementType;
 }, {}, {}>;

package/ChartsTooltip/ChartsTooltipTable.js

@@ -84,6 +84,7 @@ const ChartsTooltipCell = exports.ChartsTooltipCell = (0, _styles.styled)(_Typog
     paddingRight: theme.spacing(1)
   },
   [`&.${_chartsTooltipClasses.chartsTooltipClasses.labelCell}`]: {
+    whiteSpace: 'nowrap',
     fontWeight: theme.typography.fontWeightRegular
   },
   [`&.${_chartsTooltipClasses.chartsTooltipClasses.valueCell}, &.${_chartsTooltipClasses.chartsTooltipClasses.axisValueCell}`]: {

package/ChartsTooltip/chartsTooltipClasses.d.ts

@@ -23,4 +23,4 @@ export interface ChartsTooltipClasses {
 export type ChartsTooltipClassKey = keyof Omit<ChartsTooltipClasses, 'markContainer' | 'labelCell' | 'valueCell'>;
 export declare function getChartsTooltipUtilityClass(slot: string): string;
 export declare const chartsTooltipClasses: ChartsTooltipClasses;
-export declare const useUtilityClasses: (classes?: Partial<ChartsTooltipClasses>) => Record<"root" | "mark" | "table" | "cell" | "row" | "markContainer" | "labelCell" | "valueCell" | "paper" | "axisValueCell", string>;
+export declare const useUtilityClasses: (classes?: Partial<ChartsTooltipClasses>) => Record<"root" | "mark" | "table" | "cell" | "row" | "paper" | "markContainer" | "labelCell" | "valueCell" | "axisValueCell", string>;

package/ChartsXAxis/ChartsGroupedXAxis.js

@@ -129,6 +129,7 @@ function ChartsGroupedXAxis(inProps) {
           x: xTickLabel,
           y: labelPositionY
         }, axisTickLabelProps, {
+          style: (0, _extends2.default)({}, axisTickLabelProps.style, groupConfig.tickLabelStyle),
           text: tickLabel
         }))]
       }, index);

package/ChartsXAxis/useAxisProps.d.ts

@@ -3534,7 +3534,7 @@ export declare const useAxisProps: (inProps: ChartsXAxisProps) => {
   tickNumber: number;
   positionSign: number;
   skipAxisRendering: boolean;
-  classes: Record<"root" | "line" | "label" | "tickContainer" | "tick" | "tickLabel", string>;
+  classes: Record<"line" | "root" | "label" | "tickContainer" | "tick" | "tickLabel", string>;
   Line: string | import("react").JSXElementConstructor<import("react").SVGAttributes<SVGPathElement>>;
   Tick: string | import("react").JSXElementConstructor<import("react").SVGAttributes<SVGPathElement>>;
   TickLabel: import("react").JSXElementConstructor<ChartsTextProps> | typeof ChartsText;
@@ -3543,18 +3543,19 @@ export declare const useAxisProps: (inProps: ChartsXAxisProps) => {
     lineHeight?: number | undefined;
     ownerState: any;
     string?: number | string | undefined | undefined;
-    mask?: string | undefined | undefined;
-    fill?: string | undefined | undefined;
     type?: string | undefined | undefined;
     filter?: string | undefined | undefined;
+    fill?: string | undefined | undefined;
     values?: string | undefined | undefined;
+    mask?: string | undefined | undefined;
     clipPath?: string | undefined | undefined;
     path?: string | undefined | undefined;
     direction?: number | string | undefined | undefined;
     spacing?: number | string | undefined | undefined;
     name?: string | undefined | undefined;
-    fontWeight?: number | string | undefined | undefined;
     color?: string | undefined | undefined;
+    className?: string | undefined | undefined;
+    fontWeight?: number | string | undefined | undefined;
     cursor?: number | string | undefined | undefined;
     display?: number | string | undefined | undefined;
     fontFamily?: string | undefined | undefined;
@@ -3612,7 +3613,6 @@ export declare const useAxisProps: (inProps: ChartsXAxisProps) => {
     vectorEffect?: number | string | undefined | undefined;
     key?: import("react").Key | null | undefined;
     suppressHydrationWarning?: boolean | undefined | undefined;
-    className?: string | undefined | undefined;
     id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
     tabIndex?: number | undefined | undefined;
@@ -4034,18 +4034,19 @@ export declare const useAxisProps: (inProps: ChartsXAxisProps) => {
     lineHeight?: number | undefined;
     ownerState: any;
     string?: number | string | undefined | undefined;
-    mask?: string | undefined | undefined;
-    fill?: string | undefined | undefined;
     type?: string | undefined | undefined;
     filter?: string | undefined | undefined;
+    fill?: string | undefined | undefined;
     values?: string | undefined | undefined;
+    mask?: string | undefined | undefined;
     clipPath?: string | undefined | undefined;
     path?: string | undefined | undefined;
     direction?: number | string | undefined | undefined;
     spacing?: number | string | undefined | undefined;
     name?: string | undefined | undefined;
-    fontWeight?: number | string | undefined | undefined;
     color?: string | undefined | undefined;
+    className?: string | undefined | undefined;
+    fontWeight?: number | string | undefined | undefined;
     cursor?: number | string | undefined | undefined;
     display?: number | string | undefined | undefined;
     fontFamily?: string | undefined | undefined;
@@ -4103,7 +4104,6 @@ export declare const useAxisProps: (inProps: ChartsXAxisProps) => {
     vectorEffect?: number | string | undefined | undefined;
     key?: import("react").Key | null | undefined;
     suppressHydrationWarning?: boolean | undefined | undefined;
-    className?: string | undefined | undefined;
     id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
     tabIndex?: number | undefined | undefined;

package/ChartsXAxis/utilities.d.ts

@@ -1,5 +1,5 @@
 import { AxisConfig, ChartsXAxisProps } from "../models/axis.js";
-export declare const useUtilityClasses: (ownerState: AxisConfig<any, any, ChartsXAxisProps>) => Record<"root" | "line" | "label" | "tickContainer" | "tick" | "tickLabel", string>;
+export declare const useUtilityClasses: (ownerState: AxisConfig<any, any, ChartsXAxisProps>) => Record<"line" | "root" | "label" | "tickContainer" | "tick" | "tickLabel", string>;
 export declare const TICK_LABEL_GAP = 3;
 export declare const AXIS_LABEL_TICK_LABEL_GAP = 4;
 export declare const XAxisRoot: import("@emotion/styled").StyledComponent<Pick<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Pick<import("react").SVGProps<SVGGElement>, keyof import("react").SVGProps<SVGGElement>>, keyof import("react").SVGProps<SVGGElement> | keyof import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/ChartsYAxis/ChartsGroupedYAxis.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { ChartsYAxisProps } from "../models/axis.js";
+/**
+ * @ignore - internal component.
+ */
+declare function ChartsGroupedYAxis(inProps: ChartsYAxisProps): React.JSX.Element | null;
+export { ChartsGroupedYAxis };

package/ChartsYAxis/ChartsGroupedYAxis.js

@@ -0,0 +1,144 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsGroupedYAxis = ChartsGroupedYAxis;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useDrawingArea = require("../hooks/useDrawingArea");
+var _isBandScale = require("../internals/isBandScale");
+var _useChartContext = require("../context/ChartProvider/useChartContext");
+var _utilities = require("./utilities");
+var _useTicksGrouped = require("../hooks/useTicksGrouped");
+var _useAxisProps = require("./useAxisProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const DEFAULT_GROUPING_CONFIG = {
+  tickSize: 6
+};
+const getGroupingConfig = (groups, groupIndex, tickSize) => {
+  const config = groups[groupIndex] ?? {};
+  const defaultTickSize = tickSize ?? DEFAULT_GROUPING_CONFIG.tickSize;
+  const calculatedTickSize = defaultTickSize * groupIndex * 2 + defaultTickSize;
+  return (0, _extends2.default)({}, DEFAULT_GROUPING_CONFIG, config, {
+    tickSize: config.tickSize ?? calculatedTickSize
+  });
+};
+
+/**
+ * @ignore - internal component.
+ */
+function ChartsGroupedYAxis(inProps) {
+  const {
+    yScale,
+    defaultizedProps,
+    tickNumber,
+    positionSign,
+    skipAxisRendering,
+    classes,
+    Line,
+    Tick,
+    TickLabel,
+    Label,
+    axisTickLabelProps,
+    axisLabelProps,
+    lineProps
+  } = (0, _useAxisProps.useAxisProps)(inProps);
+  if (!(0, _isBandScale.isBandScale)(yScale)) {
+    throw new Error('MUI X Charts: ChartsGroupedYAxis only supports the `band` and `point` scale types.');
+  }
+  const {
+    position,
+    disableLine,
+    disableTicks,
+    label,
+    tickSize,
+    valueFormatter,
+    slotProps,
+    tickInterval,
+    tickPlacement,
+    tickLabelPlacement,
+    sx,
+    offset,
+    width: axisWidth
+  } = defaultizedProps;
+  const groups = defaultizedProps.groups;
+  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
+  const {
+    left,
+    top,
+    width,
+    height
+  } = drawingArea;
+  const {
+    instance
+  } = (0, _useChartContext.useChartContext)();
+  const labelRefPoint = {
+    x: positionSign * axisWidth,
+    y: top + height / 2
+  };
+  const yTicks = (0, _useTicksGrouped.useTicksGrouped)({
+    scale: yScale,
+    tickNumber,
+    valueFormatter,
+    tickInterval,
+    tickPlacement,
+    tickLabelPlacement,
+    direction: 'y',
+    groups
+  });
+
+  // Skip axis rendering if no data is available
+  // - The domain is an empty array for band/point scales.
+  // - The domains contains Infinity for continuous scales.
+  // - The position is set to 'none'.
+  if (skipAxisRendering) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_utilities.YAxisRoot, {
+    transform: `translate(${position === 'right' ? left + width + offset : left - offset}, 0)`,
+    className: classes.root,
+    sx: sx,
+    children: [!disableLine && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({
+      y1: top,
+      y2: top + height,
+      className: classes.line
+    }, lineProps)), yTicks.map((item, index) => {
+      const {
+        offset: tickOffset,
+        labelOffset
+      } = item;
+      const yTickLabel = labelOffset ?? 0;
+      const showTick = instance.isYInside(tickOffset);
+      const tickLabel = item.formattedValue;
+      const ignoreTick = item.ignoreTick ?? false;
+      const groupIndex = item.groupIndex ?? 0;
+      const groupConfig = getGroupingConfig(groups, groupIndex, tickSize);
+      const tickXSize = positionSign * groupConfig.tickSize;
+      const labelPositionX = positionSign * (groupConfig.tickSize + _utilities.TICK_LABEL_GAP);
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+        transform: `translate(0, ${tickOffset})`,
+        className: classes.tickContainer,
+        "data-group-index": groupIndex,
+        children: [!disableTicks && !ignoreTick && showTick && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tick, (0, _extends2.default)({
+          x2: tickXSize,
+          className: classes.tick
+        }, slotProps?.axisTick)), tickLabel !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(TickLabel, (0, _extends2.default)({
+          x: labelPositionX,
+          y: yTickLabel
+        }, axisTickLabelProps, {
+          style: (0, _extends2.default)({}, axisTickLabelProps.style, groupConfig.tickLabelStyle),
+          text: tickLabel
+        }))]
+      }, index);
+    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      className: classes.label,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, axisLabelProps, {
+        text: label
+      }))
+    })]
+  });
+}

package/ChartsYAxis/ChartsSingleYAxis.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { ChartsYAxisProps } from "../models/axis.js";
+/**
+ * @ignore - internal component.
+ */
+declare function ChartsSingleYAxis(inProps: ChartsYAxisProps): React.JSX.Element | null;
+export { ChartsSingleYAxis };