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

package/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/ChartsAxisHighlight/ChartsAxisHighlight.types.d.ts

@@ -0,0 +1,5 @@
+export type ChartsAxisHighlightType = 'none' | 'line' | 'band';
+export type ChartsAxisHighlightProps = {
+    x?: ChartsAxisHighlightType;
+    y?: ChartsAxisHighlightType;
+};

package/ChartsAxisHighlight/ChartsAxisHighlightPath.d.ts

@@ -0,0 +1,6 @@
+import { ChartsAxisHighlightType } from './ChartsAxisHighlight.types';
+export declare const ChartsAxisHighlightPath: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    ownerState: {
+        axisHighlight: ChartsAxisHighlightType;
+    };
+}, Pick<import("react").SVGProps<SVGPathElement>, keyof import("react").SVGProps<SVGPathElement>>, {}>;

package/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/ChartsAxisHighlight/ChartsXAxisHighlight.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { ChartsAxisHighlightType } from './ChartsAxisHighlight.types';
+import { ChartsAxisHighlightClasses } from './chartsAxisHighlightClasses';
+/**
+ * @ignore - internal component.
+ */
+export default function ChartsXHighlight(props: {
+    type: ChartsAxisHighlightType;
+    classes: ChartsAxisHighlightClasses;
+}): React.JSX.Element;

package/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/ChartsAxisHighlight/ChartsYAxisHighlight.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { ChartsAxisHighlightType } from './ChartsAxisHighlight.types';
+import { ChartsAxisHighlightClasses } from './chartsAxisHighlightClasses';
+/**
+ * @ignore - internal component.
+ */
+export default function ChartsYHighlight(props: {
+    type: ChartsAxisHighlightType;
+    classes: ChartsAxisHighlightClasses;
+}): React.JSX.Element;

package/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/ChartsAxisHighlight/chartsAxisHighlightClasses.d.ts

@@ -0,0 +1,7 @@
+export interface ChartsAxisHighlightClasses {
+    /** Styles applied to the root element. */
+    root: string;
+}
+export type ChartsAxisHighlightClassKey = keyof ChartsAxisHighlightClasses;
+export declare function getAxisHighlightUtilityClass(slot: string): string;
+export declare const chartsAxisHighlightClasses: ChartsAxisHighlightClasses;

package/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/ChartsAxisHighlight/index.d.ts

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

package/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/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/ChartsGrid/ChartsHorizontalGrid.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { DrawingArea } from '../context/DrawingProvider';
 import { AxisDefaultized, ChartsYAxisProps, ScaleName } from '../models/axis';
 import { ChartsGridClasses } from './chartsGridClasses';
 interface ChartsGridHorizontalProps {
     axis: AxisDefaultized<ScaleName, any, ChartsYAxisProps>;
-    drawingArea: DrawingArea;
+    start: number;
+    end: number;
     classes: Partial<ChartsGridClasses>;
 }
 /**

package/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/ChartsGrid/ChartsVerticalGrid.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { DrawingArea } from '../context/DrawingProvider';
 import { AxisDefaultized, ChartsXAxisProps, ScaleName } from '../models/axis';
 import { ChartsGridClasses } from './chartsGridClasses';
 interface ChartsGridVerticalProps {
     axis: AxisDefaultized<ScaleName, any, ChartsXAxisProps>;
-    drawingArea: DrawingArea;
+    start: number;
+    end: number;
     classes: Partial<ChartsGridClasses>;
 }
 /**

package/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/ChartsLabel/ChartsLabel.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import { ChartsLabelClasses } from './labelClasses';
+export interface ChartsLabelProps {
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<ChartsLabelClasses>;
+    children?: React.ReactNode;
+    className?: string;
+    sx?: SxProps<Theme>;
+}
+/**
+ * Generates the label mark for the tooltip and legend.
+ * @ignore - internal component.
+ */
+declare const ChartsLabel: React.ForwardRefExoticComponent<ChartsLabelProps & React.RefAttributes<{}>>;
+export { ChartsLabel };

package/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/ChartsLabel/ChartsLabelGradient.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import { ChartsLabelGradientClasses } from './labelGradientClasses';
+export interface ChartsLabelGradientProps {
+    /**
+     * A unique identifier for the gradient.
+     * The `gradientId` will be used as `fill="url(#gradientId)"`.
+     */
+    gradientId: string;
+    /**
+     * The direction of the gradient.
+     * @default 'horizontal'
+     */
+    direction?: 'vertical' | 'horizontal';
+    /**
+     * If `true`, the gradient will be reversed.
+     */
+    reverse?: boolean;
+    /**
+     * If provided, the gradient will be rotated by 90deg.
+     * Useful for linear gradients that are not in the correct orientation.
+     */
+    rotate?: boolean;
+    /**
+     * The thickness of the gradient
+     * @default 12
+     */
+    thickness?: number;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<ChartsLabelGradientClasses>;
+    className?: string;
+    sx?: SxProps<Theme>;
+}
+/**
+ * Generates the label Gradient for the tooltip and legend.
+ * @ignore - internal component.
+ */
+declare const ChartsLabelGradient: React.ForwardRefExoticComponent<ChartsLabelGradientProps & React.RefAttributes<{}>>;
+export { ChartsLabelGradient };