@mui/x-charts 8.0.0-alpha.0 → 8.0.0-alpha.10

package/modern/ChartDataProvider/useChartDataProviderProps.js

@@ -0,0 +1,45 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["apiRef", "width", "height", "series", "margin", "colors", "dataset", "children", "skipAnimation", "plugins", "seriesConfig"];
+import { useTheme } from '@mui/material/styles';
+export const useChartDataProviderProps = props => {
+  const {
+      apiRef,
+      width,
+      height,
+      series,
+      margin,
+      colors,
+      dataset,
+      children,
+      skipAnimation,
+      plugins,
+      seriesConfig
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const theme = useTheme();
+  const chartProviderProps = {
+    plugins,
+    seriesConfig,
+    pluginParams: _extends({
+      apiRef,
+      width,
+      height,
+      margin,
+      dataset,
+      series,
+      colors,
+      theme: theme.palette.mode
+    }, other)
+  };
+  const animationProviderProps = {
+    skipAnimation
+  };
+  return {
+    children,
+    animationProviderProps,
+    chartProviderProps
+  };
+};

package/modern/ChartsAxis/ChartsAxis.js

@@ -3,9 +3,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { ChartsXAxis } from "../ChartsXAxis/index.js";
 import { ChartsYAxis } from "../ChartsYAxis/index.js";
+import { useXAxes, useYAxes } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getAxisId = (propsValue, defaultAxisId) => {
   if (propsValue == null) {
@@ -46,14 +46,12 @@ function ChartsAxis(props) {
   } = props;
   const {
     xAxis,
-    xAxisIds,
+    xAxisIds
+  } = useXAxes();
+  const {
     yAxis,
     yAxisIds
-  } = useCartesianContext();
-
-  // TODO: use for plotting line without ticks or any thing
-  // const drawingArea = React.useContext(DrawingContext);
-
+  } = useYAxes();
   const leftId = getAxisId(leftAxis === undefined ? yAxisIds[0] : leftAxis, yAxisIds[0]);
   const bottomId = getAxisId(bottomAxis === undefined ? xAxisIds[0] : bottomAxis, xAxisIds[0]);
   const topId = getAxisId(topAxis, xAxisIds[0]);

package/modern/ChartsAxis/axisClasses.js

@@ -1,4 +1,5 @@
-import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getAxisUtilityClass(slot) {
   return generateUtilityClass('MuiChartsAxis', slot);
 }

package/modern/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -1,57 +1,19 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import { styled } from '@mui/material/styles';
-import { InteractionContext } from "../context/InteractionProvider.js";
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
-import { getValueToPositionMapper } from "../hooks/useScale.js";
-import { isBandScale } from "../internals/isBandScale.js";
+import { getAxisHighlightUtilityClass } from "./chartsAxisHighlightClasses.js";
+import ChartsYHighlight from "./ChartsYAxisHighlight.js";
+import ChartsXHighlight from "./ChartsXAxisHighlight.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function getAxisHighlightUtilityClass(slot) {
-  return generateUtilityClass('MuiChartsAxisHighlight', slot);
-}
-export const chartsAxisHighlightClasses = generateUtilityClasses('MuiChartsAxisHighlight', ['root']);
 const useUtilityClasses = () => {
   const slots = {
     root: ['root']
   };
   return composeClasses(slots, getAxisHighlightUtilityClass);
 };
-export const ChartsAxisHighlightPath = styled('path', {
-  name: 'MuiChartsAxisHighlight',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.root
-})(({
-  theme
-}) => ({
-  pointerEvents: 'none',
-  variants: [{
-    props: {
-      axisHighlight: 'band'
-    },
-    style: _extends({
-      fill: 'white',
-      fillOpacity: 0.1
-    }, theme.applyStyles('light', {
-      fill: 'gray'
-    }))
-  }, {
-    props: {
-      axisHighlight: 'line'
-    },
-    style: _extends({
-      strokeDasharray: '5 2',
-      stroke: '#ffffff'
-    }, theme.applyStyles('light', {
-      stroke: '#000000'
-    }))
-  }]
-}));
+
 /**
  * Demos:
  *
@@ -66,62 +28,14 @@ function ChartsAxisHighlight(props) {
     x: xAxisHighlight,
     y: yAxisHighlight
   } = props;
-  const {
-    xAxisIds,
-    xAxis,
-    yAxisIds,
-    yAxis
-  } = useCartesianContext();
   const classes = useUtilityClasses();
-  const USED_X_AXIS_ID = xAxisIds[0];
-  const USED_Y_AXIS_ID = yAxisIds[0];
-  const xScale = xAxis[USED_X_AXIS_ID].scale;
-  const yScale = yAxis[USED_Y_AXIS_ID].scale;
-  const {
-    axis
-  } = React.useContext(InteractionContext);
-  const getXPosition = getValueToPositionMapper(xScale);
-  const getYPosition = getValueToPositionMapper(yScale);
-  const axisX = axis.x;
-  const axisY = axis.y;
-  const isBandScaleX = xAxisHighlight === 'band' && axisX !== null && isBandScale(xScale);
-  const isBandScaleY = yAxisHighlight === 'band' && axisY !== null && isBandScale(yScale);
-  if (process.env.NODE_ENV !== 'production') {
-    const isXError = isBandScaleX && xScale(axisX.value) === undefined;
-    const isYError = isBandScaleY && yScale(axisY.value) === undefined;
-    if (isXError || isYError) {
-      console.error([`MUI X: 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(axisX.value) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath
-    // @ts-expect-error, xScale value is checked in the statement above
-    , {
-      d: `M ${xScale(axisX.value) - (xScale.step() - xScale.bandwidth()) / 2} ${yScale.range()[0]} l ${xScale.step()} 0 l 0 ${yScale.range()[1] - yScale.range()[0]} l ${-xScale.step()} 0 Z`,
-      className: classes.root,
-      ownerState: {
-        axisHighlight: 'band'
-      }
-    }), isBandScaleY && yScale(axisY.value) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
-      d: `M ${xScale.range()[0]} ${
-      // @ts-expect-error, yScale value is checked in the statement above
-      yScale(axisY.value) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${xScale.range()[1] - xScale.range()[0]} 0 l 0 ${-yScale.step()} Z`,
-      className: classes.root,
-      ownerState: {
-        axisHighlight: 'band'
-      }
-    }), xAxisHighlight === 'line' && axis.x !== null && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
-      d: `M ${getXPosition(axis.x.value)} ${yScale.range()[0]} L ${getXPosition(axis.x.value)} ${yScale.range()[1]}`,
-      className: classes.root,
-      ownerState: {
-        axisHighlight: 'line'
-      }
-    }), yAxisHighlight === 'line' && axis.y !== null && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
-      d: `M ${xScale.range()[0]} ${getYPosition(axis.y.value)} L ${xScale.range()[1]} ${getYPosition(axis.y.value)}`,
-      className: classes.root,
-      ownerState: {
-        axisHighlight: 'line'
-      }
+    children: [xAxisHighlight && /*#__PURE__*/_jsx(ChartsXHighlight, {
+      type: xAxisHighlight,
+      classes: classes
+    }), yAxisHighlight && /*#__PURE__*/_jsx(ChartsYHighlight, {
+      type: yAxisHighlight,
+      classes: classes
     })]
   });
 }

package/modern/ChartsAxisHighlight/ChartsAxisHighlight.types.js

@@ -0,0 +1 @@
+export {};

package/modern/ChartsAxisHighlight/ChartsAxisHighlightPath.js

@@ -0,0 +1,34 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { styled } from '@mui/material/styles';
+export const ChartsAxisHighlightPath = styled('path', {
+  name: 'MuiChartsAxisHighlight',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  theme
+}) => ({
+  pointerEvents: 'none',
+  variants: [{
+    props: {
+      axisHighlight: 'band'
+    },
+    style: _extends({
+      fill: 'white',
+      fillOpacity: 0.1
+    }, theme.applyStyles('light', {
+      fill: 'gray'
+    }))
+  }, {
+    props: {
+      axisHighlight: 'line'
+    },
+    style: _extends({
+      strokeDasharray: '5 2',
+      stroke: '#ffffff'
+    }, theme.applyStyles('light', {
+      stroke: '#000000'
+    }))
+  }]
+}));

package/modern/ChartsAxisHighlight/ChartsXAxisHighlight.js

@@ -0,0 +1,53 @@
+'use client';
+
+import * as React from 'react';
+import { getValueToPositionMapper, useXScale } from "../hooks/useScale.js";
+import { isBandScale } from "../internals/isBandScale.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
+import { selectorChartsInteractionXAxis } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { useDrawingArea } from "../hooks/index.js";
+import { ChartsAxisHighlightPath } from "./ChartsAxisHighlightPath.js";
+
+/**
+ * @ignore - internal component.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function ChartsXHighlight(props) {
+  const {
+    type,
+    classes
+  } = props;
+  const {
+    top,
+    height
+  } = useDrawingArea();
+  const xScale = useXScale();
+  const store = useStore();
+  const axisX = useSelector(store, selectorChartsInteractionXAxis);
+  const getXPosition = getValueToPositionMapper(xScale);
+  const isBandScaleX = type === 'band' && axisX !== null && isBandScale(xScale);
+  if (process.env.NODE_ENV !== 'production') {
+    const isError = isBandScaleX && xScale(axisX.value) === undefined;
+    if (isError) {
+      console.error([`MUI X: 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(axisX.value) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath
+    // @ts-expect-error, xScale value is checked in the statement above
+    , {
+      d: `M ${xScale(axisX.value) - (xScale.step() - xScale.bandwidth()) / 2} ${top} l ${xScale.step()} 0 l 0 ${height} l ${-xScale.step()} 0 Z`,
+      className: classes.root,
+      ownerState: {
+        axisHighlight: 'band'
+      }
+    }), type === 'line' && axisX !== null && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
+      d: `M ${getXPosition(axisX.value)} ${top} L ${getXPosition(axisX.value)} ${top + height}`,
+      className: classes.root,
+      ownerState: {
+        axisHighlight: 'line'
+      }
+    })]
+  });
+}

package/modern/ChartsAxisHighlight/ChartsYAxisHighlight.js

@@ -0,0 +1,53 @@
+'use client';
+
+import * as React from 'react';
+import { getValueToPositionMapper, useYScale } from "../hooks/useScale.js";
+import { isBandScale } from "../internals/isBandScale.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { useStore } from "../internals/store/useStore.js";
+import { selectorChartsInteractionYAxis } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { useDrawingArea } from "../hooks/index.js";
+import { ChartsAxisHighlightPath } from "./ChartsAxisHighlightPath.js";
+
+/**
+ * @ignore - internal component.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function ChartsYHighlight(props) {
+  const {
+    type,
+    classes
+  } = props;
+  const {
+    left,
+    width
+  } = useDrawingArea();
+  const yScale = useYScale();
+  const store = useStore();
+  const axisY = useSelector(store, selectorChartsInteractionYAxis);
+  const getYPosition = getValueToPositionMapper(yScale);
+  const isBandScaleY = type === 'band' && axisY !== null && isBandScale(yScale);
+  if (process.env.NODE_ENV !== 'production') {
+    const isError = isBandScaleY && yScale(axisY.value) === undefined;
+    if (isError) {
+      console.error([`MUI X: 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(axisY.value) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
+      d: `M ${left} ${
+      // @ts-expect-error, yScale value is checked in the statement above
+      yScale(axisY.value) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${width} 0 l 0 ${-yScale.step()} Z`,
+      className: classes.root,
+      ownerState: {
+        axisHighlight: 'band'
+      }
+    }), type === 'line' && axisY !== null && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
+      d: `M ${left} ${getYPosition(axisY.value)} L ${left + width} ${getYPosition(axisY.value)}`,
+      className: classes.root,
+      ownerState: {
+        axisHighlight: 'line'
+      }
+    })]
+  });
+}

package/modern/ChartsAxisHighlight/chartsAxisHighlightClasses.js

@@ -0,0 +1,6 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getAxisHighlightUtilityClass(slot) {
+  return generateUtilityClass('MuiChartsAxisHighlight', slot);
+}
+export const chartsAxisHighlightClasses = generateUtilityClasses('MuiChartsAxisHighlight', ['root']);

package/modern/ChartsAxisHighlight/index.js

@@ -1 +1,4 @@
-export * from "./ChartsAxisHighlight.js";
+export * from "./ChartsAxisHighlight.js";
+export * from "./chartsAxisHighlightClasses.js";
+export * from "./ChartsAxisHighlight.types.js";
+export * from "./ChartsAxisHighlightPath.js";

package/modern/ChartsGrid/ChartsGrid.js

@@ -7,12 +7,12 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps } from '@mui/material/styles';
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { getChartsGridUtilityClass } from "./chartsGridClasses.js";
 import { useDrawingArea } from "../hooks/useDrawingArea.js";
-import { GridRoot } from "./styledCommonents.js";
+import { GridRoot } from "./styledComponents.js";
 import { ChartsGridVertical } from "./ChartsVerticalGrid.js";
 import { ChartsGridHorizontal } from "./ChartsHorizontalGrid.js";
+import { useXAxes, useYAxes } from "../hooks/useAxis.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ({
   classes
@@ -46,10 +46,12 @@ function ChartsGrid(inProps) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
     xAxis,
-    xAxisIds,
+    xAxisIds
+  } = useXAxes();
+  const {
     yAxis,
     yAxisIds
-  } = useCartesianContext();
+  } = useYAxes();
   const classes = useUtilityClasses(props);
   const horizontalAxis = yAxis[yAxisIds[0]];
   const verticalAxis = xAxis[xAxisIds[0]];
@@ -57,11 +59,13 @@ function ChartsGrid(inProps) {
     className: classes.root,
     children: [vertical && /*#__PURE__*/_jsx(ChartsGridVertical, {
       axis: verticalAxis,
-      drawingArea: drawingArea,
+      start: drawingArea.top,
+      end: drawingArea.height + drawingArea.top,
       classes: classes
     }), horizontal && /*#__PURE__*/_jsx(ChartsGridHorizontal, {
       axis: horizontalAxis,
-      drawingArea: drawingArea,
+      start: drawingArea.left,
+      end: drawingArea.width + drawingArea.left,
       classes: classes
     })]
   }));

package/modern/ChartsGrid/ChartsHorizontalGrid.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useTicks } from "../hooks/useTicks.js";
-import { GridLine } from "./styledCommonents.js";
+import { GridLine } from "./styledComponents.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -8,7 +8,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export function ChartsGridHorizontal(props) {
   const {
     axis,
-    drawingArea,
+    start,
+    end,
     classes
   } = props;
   const {
@@ -23,14 +24,14 @@ export function ChartsGridHorizontal(props) {
   });
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: yTicks.map(({
-      formattedValue,
+      value,
       offset
     }) => /*#__PURE__*/_jsx(GridLine, {
       y1: offset,
       y2: offset,
-      x1: drawingArea.left,
-      x2: drawingArea.left + drawingArea.width,
+      x1: start,
+      x2: end,
       className: classes.horizontalLine
-    }, `horizontal-${formattedValue}`))
+    }, `horizontal-${value}`))
   });
 }

package/modern/ChartsGrid/ChartsVerticalGrid.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useTicks } from "../hooks/useTicks.js";
-import { GridLine } from "./styledCommonents.js";
+import { GridLine } from "./styledComponents.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -8,7 +8,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export function ChartsGridVertical(props) {
   const {
     axis,
-    drawingArea,
+    start,
+    end,
     classes
   } = props;
   const {
@@ -23,14 +24,14 @@ export function ChartsGridVertical(props) {
   });
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: xTicks.map(({
-      formattedValue,
+      value,
       offset
     }) => /*#__PURE__*/_jsx(GridLine, {
-      y1: drawingArea.top,
-      y2: drawingArea.top + drawingArea.height,
+      y1: start,
+      y2: end,
       x1: offset,
       x2: offset,
       className: classes.verticalLine
-    }, `vertical-${formattedValue}`))
+    }, `vertical-${value}`))
   });
 }

package/modern/ChartsLabel/ChartsLabel.js

@@ -0,0 +1,43 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["children", "className", "classes"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { useUtilityClasses } from "./labelClasses.js";
+import { consumeThemeProps } from "../internals/consumeThemeProps.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Generates the label mark for the tooltip and legend.
+ * @ignore - internal component.
+ */
+const ChartsLabel = consumeThemeProps('MuiChartsLabel', {
+  classesResolver: useUtilityClasses
+}, function ChartsLabel(props, ref) {
+  const {
+      children,
+      className,
+      classes
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  return /*#__PURE__*/_jsx("span", _extends({
+    className: clsx(classes?.root, className),
+    ref: ref
+  }, other, {
+    children: children
+  }));
+});
+process.env.NODE_ENV !== "production" ? ChartsLabel.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object
+} : void 0;
+export { ChartsLabel };

package/modern/ChartsLabel/ChartsLabelGradient.js

@@ -0,0 +1,135 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["gradientId", "direction", "classes", "className", "rotate", "reverse", "thickness"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import clsx from 'clsx';
+import { useRtl } from '@mui/system/RtlProvider';
+import { useUtilityClasses, labelGradientClasses } from "./labelGradientClasses.js";
+import { consumeThemeProps } from "../internals/consumeThemeProps.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getRotation = (direction, reverse, rotate, isRtl) => {
+  const angle = (direction === 'vertical' ? -90 : 0) + (rotate ? 90 : 0) + (reverse ? 180 : 0);
+  if (isRtl && direction !== 'vertical') {
+    return angle + 180;
+  }
+  return angle;
+};
+const Root = styled('div', {
+  name: 'MuiChartsLabelGradient',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  ownerState
+}) => {
+  const rotation = getRotation(ownerState.direction, ownerState.reverse, ownerState.rotate, ownerState.isRtl);
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    [`.${labelGradientClasses.mask}`]: {
+      borderRadius: 2,
+      overflow: 'hidden'
+    },
+    [`&.${labelGradientClasses.horizontal}`]: {
+      width: '100%',
+      [`.${labelGradientClasses.mask}`]: {
+        height: ownerState.thickness,
+        width: '100%'
+      }
+    },
+    [`&.${labelGradientClasses.vertical}`]: {
+      height: '100%',
+      [`.${labelGradientClasses.mask}`]: {
+        width: ownerState.thickness,
+        height: '100%',
+        '> svg': {
+          height: '100%'
+        }
+      }
+    },
+    svg: {
+      transform: `rotate(${rotation}deg)`,
+      display: 'block'
+    }
+  };
+});
+
+/**
+ * Generates the label Gradient for the tooltip and legend.
+ * @ignore - internal component.
+ */
+const ChartsLabelGradient = consumeThemeProps('MuiChartsLabelGradient', {
+  defaultProps: {
+    direction: 'horizontal',
+    thickness: 12
+  },
+  classesResolver: useUtilityClasses
+}, function ChartsLabelGradient(props, ref) {
+  const {
+      gradientId,
+      classes,
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const isRtl = useRtl();
+  return /*#__PURE__*/_jsx(Root, _extends({
+    className: clsx(classes?.root, className),
+    ownerState: _extends({}, props, {
+      isRtl
+    }),
+    "aria-hidden": "true",
+    ref: ref
+  }, other, {
+    children: /*#__PURE__*/_jsx("div", {
+      className: classes?.mask,
+      children: /*#__PURE__*/_jsx("svg", {
+        viewBox: "0 0 24 24",
+        children: /*#__PURE__*/_jsx("rect", {
+          className: classes?.fill,
+          width: "24",
+          height: "24",
+          fill: `url(#${gradientId})`
+        })
+      })
+    })
+  }));
+});
+process.env.NODE_ENV !== "production" ? ChartsLabelGradient.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * The direction of the gradient.
+   * @default 'horizontal'
+   */
+  direction: PropTypes.oneOf(['vertical', 'horizontal']),
+  /**
+   * A unique identifier for the gradient.
+   * The `gradientId` will be used as `fill="url(#gradientId)"`.
+   */
+  gradientId: PropTypes.string.isRequired,
+  /**
+   * If `true`, the gradient will be reversed.
+   */
+  reverse: PropTypes.bool,
+  /**
+   * If provided, the gradient will be rotated by 90deg.
+   * Useful for linear gradients that are not in the correct orientation.
+   */
+  rotate: PropTypes.bool,
+  /**
+   * The thickness of the gradient
+   * @default 12
+   */
+  thickness: PropTypes.number
+} : void 0;
+export { ChartsLabelGradient };