@mui/x-charts 8.14.0 → 8.14.1

package/BarChart/useBarPlotData.js

@@ -36,6 +36,7 @@ function useBarPlotData(drawingArea, xAxes, yAxes) {
       const xAxisConfig = xAxes[xAxisId];
       const yAxisConfig = yAxes[yAxisId];
       const verticalLayout = series[seriesId].layout === 'vertical';
+      const reverse = (verticalLayout ? yAxisConfig.reverse : xAxisConfig.reverse) ?? false;
       (0, _checkScaleErrors.checkScaleErrors)(verticalLayout, seriesId, series[seriesId], xAxisId, xAxes, yAxisId, yAxes);
       const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
       const xScale = xAxisConfig.scale;
@@ -57,19 +58,20 @@ function useBarPlotData(drawingArea, xAxes, yAxes) {
         layout,
         minBarSize
       } = series[seriesId];
-      const seriesDataPoints = baseScaleConfig.data.map((baseValue, dataIndex) => {
-        if (currentSeriesData[dataIndex] == null) {
-          return null;
+      const seriesDataPoints = [];
+      for (let dataIndex = 0; dataIndex < baseScaleConfig.data.length; dataIndex += 1) {
+        const baseValue = baseScaleConfig.data[dataIndex];
+        const seriesValue = currentSeriesData[dataIndex];
+        if (seriesValue == null) {
+          continue;
         }
         const values = stackedData[dataIndex];
         const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
         const minValueCoord = Math.round(Math.min(...valueCoordinates));
         const maxValueCoord = Math.round(Math.max(...valueCoordinates));
         const stackId = series[seriesId].stack;
-        const {
-          barSize,
-          startCoordinate
-        } = getValueCoordinate(verticalLayout, minValueCoord, maxValueCoord, currentSeriesData[dataIndex], minBarSize);
+        const barSize = seriesValue === 0 ? 0 : Math.max(minBarSize, maxValueCoord - minValueCoord);
+        const startCoordinate = shouldInvertStartCoordinate(verticalLayout, seriesValue, reverse) ? maxValueCoord - barSize : minValueCoord;
         const result = {
           seriesId,
           dataIndex,
@@ -85,7 +87,7 @@ function useBarPlotData(drawingArea, xAxes, yAxes) {
           maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
         };
         if (result.x > xMax || result.x + result.width < xMin || result.y > yMax || result.y + result.height < yMin) {
-          return null;
+          continue;
         }
         if (!masks[result.maskId]) {
           masks[result.maskId] = {
@@ -106,10 +108,11 @@ function useBarPlotData(drawingArea, xAxes, yAxes) {
         mask.height = result.layout === 'vertical' ? mask.height + result.height : result.height;
         mask.x = Math.min(mask.x === 0 ? Infinity : mask.x, result.x);
         mask.y = Math.min(mask.y === 0 ? Infinity : mask.y, result.y);
-        mask.hasNegative = mask.hasNegative || (result.value ?? 0) < 0;
-        mask.hasPositive = mask.hasPositive || (result.value ?? 0) > 0;
-        return result;
-      }).filter(rectangle => rectangle !== null);
+        const value = result.value ?? 0;
+        mask.hasNegative = mask.hasNegative || (reverse ? value > 0 : value < 0);
+        mask.hasPositive = mask.hasPositive || (reverse ? value < 0 : value > 0);
+        seriesDataPoints.push(result);
+      }
       return {
         seriesId,
         data: seriesDataPoints
@@ -149,25 +152,9 @@ function getBandSize({
     offset
   };
 }
-function getValueCoordinate(isVertical, minValueCoord, maxValueCoord, baseValue, minBarSize) {
-  if (baseValue === 0 || baseValue == null) {
-    return {
-      barSize: 0,
-      startCoordinate: minValueCoord
-    };
-  }
-  const isSizeLessThanMin = maxValueCoord - minValueCoord < minBarSize;
-  const barSize = isSizeLessThanMin ? minBarSize : maxValueCoord - minValueCoord;
-  const isVerticalAndPositive = isVertical && baseValue >= 0;
-  const isHorizontalAndNegative = !isVertical && baseValue < 0;
-  if (isSizeLessThanMin && (isVerticalAndPositive || isHorizontalAndNegative)) {
-    return {
-      barSize,
-      startCoordinate: maxValueCoord - barSize
-    };
-  }
-  return {
-    barSize,
-    startCoordinate: minValueCoord
-  };
+function shouldInvertStartCoordinate(verticalLayout, baseValue, reverse) {
+  const isVerticalAndPositive = verticalLayout && baseValue > 0;
+  const isHorizontalAndNegative = !verticalLayout && baseValue < 0;
+  const invertStartCoordinate = isVerticalAndPositive || isHorizontalAndNegative;
+  return reverse ? !invertStartCoordinate : invertStartCoordinate;
 }

package/CHANGELOG.md

@@ -5,6 +5,101 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.14.1
+
+_Oct 16, 2025_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Charts have optimized data structures for closest point calculations — initial render times reduced by ~25% for 1,000+ data points, with greater gains at larger scales (#19790) @bernardobelchior
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to the community members for their valuable contributions:
+@djpremier, @jacknot, @justdoit1897, @mellis481, @sai6855
+
+The following are all team members who have contributed to this release:
+@arminmeh, @bernardobelchior, @brijeshb42, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @noraleonte, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.14.1`
+
+- [DataGrid] Fix cell not rerendering on `isCellEditable` prop change (#19898) @cherniavskii
+- [DataGrid] Fix virtualizer memory leaks (#19886) @cherniavskii
+- [DataGrid] Fix tree data unable to deselect row for exclude model (#19846) @siriwatknp
+- [l10n] Improve Italian (it-IT) locale (#19322) @jacknot and (#19940) @justdoit1897
+
+#### `@mui/x-data-grid-pro@8.14.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.14.1`, plus:
+
+- [DataGridPro] Clear cache before new request to the nested request queue after a row has been edited (#19873) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.14.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.14.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.14.1`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.14.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-date-pickers@8.14.1`.
+
+### Charts
+
+#### `@mui/x-charts@8.14.1`
+
+- [charts] Fix `minBarSize` when y-axis is reversed (#19932) @bernardobelchior
+- [charts] Fix bar chart border radius when axis is reversed (#19895) @bernardobelchior
+- [charts] Fix scatter chart `datasetKeys.id` not being optional (#19897) @bernardobelchior
+- [charts] Use more performant data structure for closest point (#19790) @bernardobelchior
+- [charts] Fix `GaugeValueArc` having wrong class (#19965) @bernardobelchior
+- [charts] Fix `undefined` path when highlight empty line chart axis (#19969) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.14.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.14.1`, plus:
+
+- [charts-pro] Add `highlighting` to Sankey chart (#19662) @JCQuintas
+
+#### `@mui/x-charts-premium@8.14.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-charts-pro@8.14.1`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.14.1`
+
+- [tree view] Do not forward the `ownerState` to the icon (#19772) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.14.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.14.1`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.14.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add `'bumpX'` and `'bumpY'` curve types to the interpolation demo (#19676) @djpremier
+- [docs] Add scatter chart with linear regression demo (#19900) @bernardobelchior
+- [docs] Correctly describe Data Grid's row selection behavior (#19968) @arminmeh
+- [docs] Fix `isExpanded` type in tree view docs (#19092) @mellis481
+
+### Core
+
+- [code-infra] Disable Netlify cache plugin (#19950) @Janpot
+- [code-infra] Lint json through eslint (#19890) @Janpot
+- [docs-infra] Use published netlify cache plugin package (#19929) @brijeshb42
+
 ## 8.14.0
 
 _Oct 9, 2025_

package/Gauge/Gauge.js

@@ -25,10 +25,7 @@ const useUtilityClasses = props => {
     classes
   } = props;
   const slots = {
-    root: ['root'],
-    valueArc: ['valueArc'],
-    referenceArc: ['referenceArc'],
-    valueText: ['valueText']
+    root: ['root']
   };
   return (0, _composeClasses.default)(slots, _gaugeClasses.getGaugeUtilityClass, classes);
 };
@@ -44,13 +41,9 @@ const Gauge = exports.Gauge = /*#__PURE__*/React.forwardRef(function Gauge(props
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GaugeContainer.GaugeContainer, (0, _extends2.default)({}, other, {
     className: (0, _clsx.default)(classes.root, className),
     ref: ref,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeReferenceArc.GaugeReferenceArc, {
-      className: classes.referenceArc
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeValueArc.GaugeValueArc, {
-      className: classes.valueArc,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeReferenceArc.GaugeReferenceArc, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeValueArc.GaugeValueArc, {
       skipAnimation: skipAnimation
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeValueText.GaugeValueText, {
-      className: classes.valueText,
       text: text
     }), children]
   }));

package/Gauge/GaugeReferenceArc.d.ts

@@ -1,2 +1,5 @@
 import * as React from 'react';
-export declare function GaugeReferenceArc(props: React.ComponentProps<'path'>): React.JSX.Element;
+export declare function GaugeReferenceArc({
+  className,
+  ...other
+}: React.ComponentProps<'path'>): React.JSX.Element;

package/Gauge/GaugeReferenceArc.js

@@ -1,18 +1,22 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GaugeReferenceArc = GaugeReferenceArc;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _styles = require("@mui/material/styles");
+var _clsx = _interopRequireDefault(require("clsx"));
 var _GaugeProvider = require("./GaugeProvider");
+var _gaugeClasses = require("./gaugeClasses");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["className"];
 const StyledPath = (0, _styles.styled)('path', {
   name: 'MuiGauge',
   slot: 'ReferenceArc'
@@ -21,7 +25,11 @@ const StyledPath = (0, _styles.styled)('path', {
 }) => ({
   fill: (theme.vars || theme).palette.divider
 }));
-function GaugeReferenceArc(props) {
+function GaugeReferenceArc(_ref) {
+  let {
+      className
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const {
     startAngle,
     endAngle,
@@ -32,6 +40,7 @@ function GaugeReferenceArc(props) {
     cy
   } = (0, _GaugeProvider.useGaugeState)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPath, (0, _extends2.default)({
+    className: (0, _clsx.default)(_gaugeClasses.gaugeClasses.referenceArc, className),
     transform: `translate(${cx}, ${cy})`,
     d: (0, _d3Shape.arc)().cornerRadius(cornerRadius)({
       startAngle,
@@ -39,5 +48,5 @@ function GaugeReferenceArc(props) {
       innerRadius,
       outerRadius
     })
-  }, props));
+  }, other));
 }

package/Gauge/GaugeValueArc.d.ts

@@ -1,5 +1,8 @@
 import * as React from 'react';
-declare function GaugeValueArc(props: React.ComponentProps<'path'> & {
+declare function GaugeValueArc({
+  className,
+  ...other
+}: React.ComponentProps<'path'> & {
   skipAnimation?: boolean;
 }): React.JSX.Element | null;
 declare namespace GaugeValueArc {

package/Gauge/GaugeValueArc.js

@@ -7,25 +7,32 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GaugeValueArc = GaugeValueArc;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
+var _clsx = _interopRequireDefault(require("clsx"));
 var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _useAnimateGaugeValueArc = require("../hooks/animation/useAnimateGaugeValueArc");
 var _GaugeProvider = require("./GaugeProvider");
+var _gaugeClasses = require("./gaugeClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["cx", "cy", "startAngle", "endAngle", "cornerRadius", "innerRadius", "outerRadius", "skipAnimation"];
+const _excluded = ["className"],
+  _excluded2 = ["cx", "cy", "startAngle", "endAngle", "cornerRadius", "innerRadius", "outerRadius", "skipAnimation"];
 const StyledPath = (0, _styles.styled)('path', {
   name: 'MuiGauge',
-  slot: 'ReferenceArc'
+  slot: 'ValueArc'
 })(({
   theme
 }) => ({
   fill: (theme.vars || theme).palette.primary.main
 }));
-function GaugeValueArc(props) {
+function GaugeValueArc(_ref) {
+  let {
+      className
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const {
     value,
     valueMin,
@@ -42,7 +49,8 @@ function GaugeValueArc(props) {
     return null;
   }
   const valueAngle = startAngle + (value - valueMin) / (valueMax - valueMin) * (endAngle - startAngle);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedGaugeValueArc, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedGaugeValueArc, (0, _extends2.default)({}, other, {
+    className: (0, _clsx.default)(_gaugeClasses.gaugeClasses.valueArc, className),
     cx: cx,
     cy: cy,
     startAngle: startAngle,
@@ -59,7 +67,7 @@ process.env.NODE_ENV !== "production" ? GaugeValueArc.propTypes = {
   // ----------------------------------------------------------------------
   skipAnimation: _propTypes.default.bool
 } : void 0;
-function AnimatedGaugeValueArc(_ref) {
+function AnimatedGaugeValueArc(_ref2) {
   let {
       cx,
       cy,
@@ -69,8 +77,8 @@ function AnimatedGaugeValueArc(_ref) {
       innerRadius,
       outerRadius,
       skipAnimation: inSkipAnimation
-    } = _ref,
-    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+    } = _ref2,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref2, _excluded2);
   const skipAnimation = (0, _useSkipAnimation.useSkipAnimation)(inSkipAnimation);
   const animatedProps = (0, _useAnimateGaugeValueArc.useAnimateGaugeValueArc)({
     startAngle,

package/Gauge/GaugeValueText.js

@@ -11,8 +11,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _GaugeProvider = require("./GaugeProvider");
 var _ChartsText = require("../ChartsText");
+var _gaugeClasses = require("./gaugeClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["text", "className"];
 function defaultFormatter({
@@ -42,7 +44,7 @@ function GaugeValueText(props) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-    className: className,
+    className: (0, _clsx.default)(_gaugeClasses.gaugeClasses.valueText, className),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsText.ChartsText, (0, _extends2.default)({
       x: cx,
       y: cy,

package/ScatterChart/seriesConfig/seriesProcessor.js

@@ -12,7 +12,7 @@ const seriesProcessor = ({
 }, dataset) => {
   const completeSeries = Object.fromEntries(Object.entries(series).map(([seriesId, seriesData]) => {
     const datasetKeys = seriesData?.datasetKeys;
-    const missingKeys = ['x', 'y', 'id'].filter(key => typeof datasetKeys?.[key] !== 'string');
+    const missingKeys = ['x', 'y'].filter(key => typeof datasetKeys?.[key] !== 'string');
     if (seriesData?.datasetKeys && missingKeys.length > 0) {
       throw new Error([`MUI X Charts: scatter series with id='${seriesId}' has incomplete datasetKeys.`, `Properties ${missingKeys.map(key => `"${key}"`).join(', ')} are missing.`].join('\n'));
     }

package/esm/BarChart/useBarPlotData.js

@@ -29,6 +29,7 @@ export function useBarPlotData(drawingArea, xAxes, yAxes) {
       const xAxisConfig = xAxes[xAxisId];
       const yAxisConfig = yAxes[yAxisId];
       const verticalLayout = series[seriesId].layout === 'vertical';
+      const reverse = (verticalLayout ? yAxisConfig.reverse : xAxisConfig.reverse) ?? false;
       checkScaleErrors(verticalLayout, seriesId, series[seriesId], xAxisId, xAxes, yAxisId, yAxes);
       const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
       const xScale = xAxisConfig.scale;
@@ -50,19 +51,20 @@ export function useBarPlotData(drawingArea, xAxes, yAxes) {
         layout,
         minBarSize
       } = series[seriesId];
-      const seriesDataPoints = baseScaleConfig.data.map((baseValue, dataIndex) => {
-        if (currentSeriesData[dataIndex] == null) {
-          return null;
+      const seriesDataPoints = [];
+      for (let dataIndex = 0; dataIndex < baseScaleConfig.data.length; dataIndex += 1) {
+        const baseValue = baseScaleConfig.data[dataIndex];
+        const seriesValue = currentSeriesData[dataIndex];
+        if (seriesValue == null) {
+          continue;
         }
         const values = stackedData[dataIndex];
         const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
         const minValueCoord = Math.round(Math.min(...valueCoordinates));
         const maxValueCoord = Math.round(Math.max(...valueCoordinates));
         const stackId = series[seriesId].stack;
-        const {
-          barSize,
-          startCoordinate
-        } = getValueCoordinate(verticalLayout, minValueCoord, maxValueCoord, currentSeriesData[dataIndex], minBarSize);
+        const barSize = seriesValue === 0 ? 0 : Math.max(minBarSize, maxValueCoord - minValueCoord);
+        const startCoordinate = shouldInvertStartCoordinate(verticalLayout, seriesValue, reverse) ? maxValueCoord - barSize : minValueCoord;
         const result = {
           seriesId,
           dataIndex,
@@ -78,7 +80,7 @@ export function useBarPlotData(drawingArea, xAxes, yAxes) {
           maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
         };
         if (result.x > xMax || result.x + result.width < xMin || result.y > yMax || result.y + result.height < yMin) {
-          return null;
+          continue;
         }
         if (!masks[result.maskId]) {
           masks[result.maskId] = {
@@ -99,10 +101,11 @@ export function useBarPlotData(drawingArea, xAxes, yAxes) {
         mask.height = result.layout === 'vertical' ? mask.height + result.height : result.height;
         mask.x = Math.min(mask.x === 0 ? Infinity : mask.x, result.x);
         mask.y = Math.min(mask.y === 0 ? Infinity : mask.y, result.y);
-        mask.hasNegative = mask.hasNegative || (result.value ?? 0) < 0;
-        mask.hasPositive = mask.hasPositive || (result.value ?? 0) > 0;
-        return result;
-      }).filter(rectangle => rectangle !== null);
+        const value = result.value ?? 0;
+        mask.hasNegative = mask.hasNegative || (reverse ? value > 0 : value < 0);
+        mask.hasPositive = mask.hasPositive || (reverse ? value < 0 : value > 0);
+        seriesDataPoints.push(result);
+      }
       return {
         seriesId,
         data: seriesDataPoints
@@ -142,25 +145,9 @@ function getBandSize({
     offset
   };
 }
-function getValueCoordinate(isVertical, minValueCoord, maxValueCoord, baseValue, minBarSize) {
-  if (baseValue === 0 || baseValue == null) {
-    return {
-      barSize: 0,
-      startCoordinate: minValueCoord
-    };
-  }
-  const isSizeLessThanMin = maxValueCoord - minValueCoord < minBarSize;
-  const barSize = isSizeLessThanMin ? minBarSize : maxValueCoord - minValueCoord;
-  const isVerticalAndPositive = isVertical && baseValue >= 0;
-  const isHorizontalAndNegative = !isVertical && baseValue < 0;
-  if (isSizeLessThanMin && (isVerticalAndPositive || isHorizontalAndNegative)) {
-    return {
-      barSize,
-      startCoordinate: maxValueCoord - barSize
-    };
-  }
-  return {
-    barSize,
-    startCoordinate: minValueCoord
-  };
+function shouldInvertStartCoordinate(verticalLayout, baseValue, reverse) {
+  const isVerticalAndPositive = verticalLayout && baseValue > 0;
+  const isHorizontalAndNegative = !verticalLayout && baseValue < 0;
+  const invertStartCoordinate = isVerticalAndPositive || isHorizontalAndNegative;
+  return reverse ? !invertStartCoordinate : invertStartCoordinate;
 }

package/esm/Gauge/Gauge.js

@@ -18,10 +18,7 @@ const useUtilityClasses = props => {
     classes
   } = props;
   const slots = {
-    root: ['root'],
-    valueArc: ['valueArc'],
-    referenceArc: ['referenceArc'],
-    valueText: ['valueText']
+    root: ['root']
   };
   return composeClasses(slots, getGaugeUtilityClass, classes);
 };
@@ -37,13 +34,9 @@ const Gauge = /*#__PURE__*/React.forwardRef(function Gauge(props, ref) {
   return /*#__PURE__*/_jsxs(GaugeContainer, _extends({}, other, {
     className: clsx(classes.root, className),
     ref: ref,
-    children: [/*#__PURE__*/_jsx(GaugeReferenceArc, {
-      className: classes.referenceArc
-    }), /*#__PURE__*/_jsx(GaugeValueArc, {
-      className: classes.valueArc,
+    children: [/*#__PURE__*/_jsx(GaugeReferenceArc, {}), /*#__PURE__*/_jsx(GaugeValueArc, {
       skipAnimation: skipAnimation
     }), /*#__PURE__*/_jsx(GaugeValueText, {
-      className: classes.valueText,
       text: text
     }), children]
   }));

package/esm/Gauge/GaugeReferenceArc.d.ts

@@ -1,2 +1,5 @@
 import * as React from 'react';
-export declare function GaugeReferenceArc(props: React.ComponentProps<'path'>): React.JSX.Element;
+export declare function GaugeReferenceArc({
+  className,
+  ...other
+}: React.ComponentProps<'path'>): React.JSX.Element;

package/esm/Gauge/GaugeReferenceArc.js

@@ -1,10 +1,14 @@
 'use client';
 
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className"];
 import * as React from 'react';
 import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
 import { styled } from '@mui/material/styles';
+import clsx from 'clsx';
 import { useGaugeState } from "./GaugeProvider.js";
+import { gaugeClasses } from "./gaugeClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledPath = styled('path', {
   name: 'MuiGauge',
@@ -14,7 +18,11 @@ const StyledPath = styled('path', {
 }) => ({
   fill: (theme.vars || theme).palette.divider
 }));
-export function GaugeReferenceArc(props) {
+export function GaugeReferenceArc(_ref) {
+  let {
+      className
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
     startAngle,
     endAngle,
@@ -25,6 +33,7 @@ export function GaugeReferenceArc(props) {
     cy
   } = useGaugeState();
   return /*#__PURE__*/_jsx(StyledPath, _extends({
+    className: clsx(gaugeClasses.referenceArc, className),
     transform: `translate(${cx}, ${cy})`,
     d: d3Arc().cornerRadius(cornerRadius)({
       startAngle,
@@ -32,5 +41,5 @@ export function GaugeReferenceArc(props) {
       innerRadius,
       outerRadius
     })
-  }, props));
+  }, other));
 }

package/esm/Gauge/GaugeValueArc.d.ts

@@ -1,5 +1,8 @@
 import * as React from 'react';
-declare function GaugeValueArc(props: React.ComponentProps<'path'> & {
+declare function GaugeValueArc({
+  className,
+  ...other
+}: React.ComponentProps<'path'> & {
   skipAnimation?: boolean;
 }): React.JSX.Element | null;
 declare namespace GaugeValueArc {

package/esm/Gauge/GaugeValueArc.js

@@ -1,24 +1,31 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["cx", "cy", "startAngle", "endAngle", "cornerRadius", "innerRadius", "outerRadius", "skipAnimation"];
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className"],
+  _excluded2 = ["cx", "cy", "startAngle", "endAngle", "cornerRadius", "innerRadius", "outerRadius", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
+import clsx from 'clsx';
 import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
 import { useAnimateGaugeValueArc } from "../hooks/animation/useAnimateGaugeValueArc.js";
 import { useGaugeState } from "./GaugeProvider.js";
+import { gaugeClasses } from "./gaugeClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledPath = styled('path', {
   name: 'MuiGauge',
-  slot: 'ReferenceArc'
+  slot: 'ValueArc'
 })(({
   theme
 }) => ({
   fill: (theme.vars || theme).palette.primary.main
 }));
-function GaugeValueArc(props) {
+function GaugeValueArc(_ref) {
+  let {
+      className
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
     value,
     valueMin,
@@ -35,7 +42,8 @@ function GaugeValueArc(props) {
     return null;
   }
   const valueAngle = startAngle + (value - valueMin) / (valueMax - valueMin) * (endAngle - startAngle);
-  return /*#__PURE__*/_jsx(AnimatedGaugeValueArc, _extends({}, props, {
+  return /*#__PURE__*/_jsx(AnimatedGaugeValueArc, _extends({}, other, {
+    className: clsx(gaugeClasses.valueArc, className),
     cx: cx,
     cy: cy,
     startAngle: startAngle,
@@ -53,7 +61,7 @@ process.env.NODE_ENV !== "production" ? GaugeValueArc.propTypes = {
   skipAnimation: PropTypes.bool
 } : void 0;
 export { GaugeValueArc };
-function AnimatedGaugeValueArc(_ref) {
+function AnimatedGaugeValueArc(_ref2) {
   let {
       cx,
       cy,
@@ -63,8 +71,8 @@ function AnimatedGaugeValueArc(_ref) {
       innerRadius,
       outerRadius,
       skipAnimation: inSkipAnimation
-    } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = _ref2,
+    other = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   const skipAnimation = useSkipAnimation(inSkipAnimation);
   const animatedProps = useAnimateGaugeValueArc({
     startAngle,

package/esm/Gauge/GaugeValueText.js

@@ -5,8 +5,10 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["text", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { useGaugeState } from "./GaugeProvider.js";
 import { ChartsText } from "../ChartsText/index.js";
+import { gaugeClasses } from "./gaugeClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function defaultFormatter({
   value
@@ -35,7 +37,7 @@ function GaugeValueText(props) {
     return null;
   }
   return /*#__PURE__*/_jsx("g", {
-    className: className,
+    className: clsx(gaugeClasses.valueText, className),
     children: /*#__PURE__*/_jsx(ChartsText, _extends({
       x: cx,
       y: cy,