@mui/x-charts 7.1.1 → 7.3.0

package/ChartsTooltip/DefaultChartsAxisTooltipContent.js

@@ -49,10 +49,13 @@ function DefaultChartsAxisTooltipContent(props) {
           id,
           label,
           valueFormatter,
-          data
+          data,
+          getColor
         }) => {
           // @ts-ignore
-          const formattedValue = valueFormatter(data[dataIndex] ?? null);
+          const formattedValue = valueFormatter(data[dataIndex] ?? null, {
+            dataIndex
+          });
           if (formattedValue == null) {
             return null;
           }
@@ -62,7 +65,7 @@ function DefaultChartsAxisTooltipContent(props) {
               className: (0, _clsx.default)(classes.markCell, classes.cell),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipMark, {
                 ownerState: {
-                  color
+                  color: getColor(dataIndex) ?? color
                 },
                 boxShadow: 1,
                 className: classes.mark

package/ChartsTooltip/DefaultChartsItemTooltipContent.js

@@ -17,7 +17,8 @@ function DefaultChartsItemTooltipContent(props) {
     series,
     itemData,
     sx,
-    classes
+    classes,
+    getColor
   } = props;
   if (itemData.dataIndex === undefined || !series.data[itemData.dataIndex]) {
     return null;
@@ -26,14 +27,16 @@ function DefaultChartsItemTooltipContent(props) {
     displayedLabel,
     color
   } = series.type === 'pie' ? {
-    color: series.data[itemData.dataIndex].color,
+    color: getColor(itemData.dataIndex),
     displayedLabel: series.data[itemData.dataIndex].label
   } : {
-    color: series.color,
+    color: getColor(itemData.dataIndex) ?? series.color,
     displayedLabel: series.label
   };
   const value = series.data[itemData.dataIndex];
-  const formattedValue = series.valueFormatter?.(value);
+  const formattedValue = series.valueFormatter?.(value, {
+    dataIndex: itemData.dataIndex
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipPaper, {
     sx: sx,
     className: classes.root,
@@ -71,6 +74,12 @@ process.env.NODE_ENV !== "production" ? DefaultChartsItemTooltipContent.propType
    * Override or extend the styles applied to the component.
    */
   classes: _propTypes.default.object.isRequired,
+  /**
+   * Get the color of the item with index `dataIndex`.
+   * @param {number} dataIndex The data index of the item.
+   * @returns {string} The color to display.
+   */
+  getColor: _propTypes.default.func.isRequired,
   /**
    * The data used to identify the triggered item.
    */

package/ChartsTooltip/utils.d.ts

@@ -23,5 +23,9 @@ export declare function useMouseTracker(): {
 export type TriggerOptions = 'item' | 'axis' | 'none';
 export declare function getTooltipHasData(trigger: TriggerOptions, displayedData: null | AxisInteractionData | ItemInteractionData<ChartSeriesType>): boolean;
 export declare function isCartesianSeriesType(seriesType: string): seriesType is CartesianChartSeriesType;
-export declare function isCartesianSeries(series: ChartSeriesDefaultized<ChartSeriesType>): series is ChartSeriesDefaultized<CartesianChartSeriesType>;
+export declare function isCartesianSeries(series: ChartSeriesDefaultized<ChartSeriesType> & {
+    getColor: (dataIndex: number) => string;
+}): series is ChartSeriesDefaultized<CartesianChartSeriesType> & {
+    getColor: (dataIndex: number) => string;
+};
 export declare function utcFormatter(v: string | number | Date): string;

package/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -11,10 +11,10 @@ var _d3Delaunay = require("d3-delaunay");
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _InteractionProvider = require("../context/InteractionProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
-var _DrawingProvider = require("../context/DrawingProvider");
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _useScale = require("../hooks/useScale");
 var _utils = require("../internals/utils");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -23,13 +23,13 @@ function ChartsVoronoiHandler(props) {
     voronoiMaxRadius,
     onItemClick
   } = props;
-  const svgRef = React.useContext(_DrawingProvider.SvgContext);
+  const svgRef = (0, _hooks.useSvgRef)();
   const {
-    width,
-    height,
+    left,
     top,
-    left
-  } = React.useContext(_DrawingProvider.DrawingContext);
+    width,
+    height
+  } = (0, _hooks.useDrawingArea)();
   const {
     xAxis,
     yAxis,

package/ChartsXAxis/ChartsXAxis.js

@@ -13,13 +13,13 @@ var _utils = require("@mui/base/utils");
 var _utils2 = require("@mui/utils");
 var _styles = require("@mui/material/styles");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
-var _DrawingProvider = require("../context/DrawingProvider");
 var _useTicks = require("../hooks/useTicks");
 var _axisClasses = require("../ChartsAxis/axisClasses");
 var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
 var _ChartsText = require("../ChartsText");
 var _geometry = require("../internals/geometry");
 var _useMounted = require("../hooks/useMounted");
+var _useDrawingArea = require("../hooks/useDrawingArea");
 var _getWordsByLines = require("../internals/getWordsByLines");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["scale", "tickNumber", "reverse"];
@@ -71,7 +71,7 @@ function addLabelDimension(xTicks, {
 
   // Filter label to avoid overlap
   let currentTextLimit = 0;
-  let previouseTextLimit = 0;
+  let previousTextLimit = 0;
   const direction = reverse ? -1 : 1;
   return withDimension.map((item, labelIndex) => {
     const {
@@ -85,14 +85,14 @@ function addLabelDimension(xTicks, {
     const gapRatio = 1.2; // Ratio applied to the minimal distance to add some margin.
 
     currentTextLimit = textPosition - direction * (gapRatio * distance) / 2;
-    if (labelIndex > 0 && direction * currentTextLimit < direction * previouseTextLimit) {
+    if (labelIndex > 0 && direction * currentTextLimit < direction * previousTextLimit) {
       // Except for the first label, we skip all label that overlap with the last accepted.
-      // Notice that the early return prevents `previouseTextLimit` from being updated.
+      // Notice that the early return prevents `previousTextLimit` from being updated.
       return (0, _extends2.default)({}, item, {
         skipLabel: true
       });
     }
-    previouseTextLimit = textPosition + direction * (gapRatio * distance) / 2;
+    previousTextLimit = textPosition + direction * (gapRatio * distance) / 2;
     return item;
   });
 }
@@ -161,7 +161,7 @@ function ChartsXAxis(inProps) {
     top,
     width,
     height
-  } = React.useContext(_DrawingProvider.DrawingContext);
+  } = (0, _useDrawingArea.useDrawingArea)();
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const positionSign = position === 'bottom' ? 1 : -1;
   const Line = slots?.axisLine ?? 'line';
@@ -354,7 +354,7 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    */
   tickMinStep: _propTypes.default.number,
   /**
-   * The number of ticks. This number is not guaranted.
+   * The number of ticks. This number is not guaranteed.
    * Not supported by categorical axis (band, points).
    */
   tickNumber: _propTypes.default.number,

package/ChartsYAxis/ChartsYAxis.js

@@ -13,8 +13,8 @@ var _utils = require("@mui/base/utils");
 var _utils2 = require("@mui/utils");
 var _styles = require("@mui/material/styles");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
-var _DrawingProvider = require("../context/DrawingProvider");
 var _useTicks = require("../hooks/useTicks");
+var _useDrawingArea = require("../hooks/useDrawingArea");
 var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
 var _ChartsText = require("../ChartsText");
 var _axisClasses = require("../ChartsAxis/axisClasses");
@@ -90,7 +90,8 @@ function ChartsYAxis(inProps) {
     slotProps,
     tickPlacement,
     tickLabelPlacement,
-    tickInterval
+    tickInterval,
+    tickLabelInterval
   } = defaultizedProps;
   const theme = (0, _styles.useTheme)();
   const classes = useUtilityClasses((0, _extends2.default)({}, defaultizedProps, {
@@ -101,7 +102,7 @@ function ChartsYAxis(inProps) {
     top,
     width,
     height
-  } = React.useContext(_DrawingProvider.DrawingContext);
+  } = (0, _useDrawingArea.useDrawingArea)();
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const yTicks = (0, _useTicks.useTicks)({
     scale: yScale,
@@ -156,17 +157,19 @@ function ChartsYAxis(inProps) {
     }, slotProps?.axisLine)), yTicks.map(({
       formattedValue,
       offset,
-      labelOffset
+      labelOffset,
+      value
     }, index) => {
       const xTickLabel = positionSign * (tickSize + 2);
       const yTickLabel = labelOffset;
+      const skipLabel = typeof tickLabelInterval === 'function' && !tickLabelInterval?.(value, index);
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
         transform: `translate(0, ${offset})`,
         className: classes.tickContainer,
         children: [!disableTicks && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tick, (0, _extends2.default)({
           x2: positionSign * tickSize,
           className: classes.tick
-        }, slotProps?.axisTick)), formattedValue !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(TickLabel, (0, _extends2.default)({
+        }, slotProps?.axisTick)), formattedValue !== undefined && !skipLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(TickLabel, (0, _extends2.default)({
           x: xTickLabel,
           y: yTickLabel,
           text: formattedValue.toString()
@@ -286,7 +289,7 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    */
   tickMinStep: _propTypes.default.number,
   /**
-   * The number of ticks. This number is not guaranted.
+   * The number of ticks. This number is not guaranteed.
    * Not supported by categorical axis (band, points).
    */
   tickNumber: _propTypes.default.number,

package/Gauge/GaugeProvider.js

@@ -7,9 +7,9 @@ exports.GaugeContext = void 0;
 exports.GaugeProvider = GaugeProvider;
 exports.useGaugeState = useGaugeState;
 var React = _interopRequireWildcard(require("react"));
-var _DrawingProvider = require("../context/DrawingProvider");
 var _utils = require("../internals/utils");
 var _utils2 = require("./utils");
+var _useDrawingArea = require("../hooks/useDrawingArea");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -47,11 +47,11 @@ function GaugeProvider(props) {
     children
   } = props;
   const {
-    width,
-    height,
+    left,
     top,
-    left
-  } = React.useContext(_DrawingProvider.DrawingContext);
+    width,
+    height
+  } = (0, _useDrawingArea.useDrawingArea)();
   const ratios = (0, _utils2.getArcRatios)(startAngle, endAngle);
   const innerCx = cxParam ? (0, _utils.getPercentageValue)(cxParam, width) : ratios.cx * width;
   const innerCy = cyParam ? (0, _utils.getPercentageValue)(cyParam, height) : ratios.cy * height;

package/LineChart/AnimatedArea.js

@@ -14,8 +14,8 @@ var _styles = require("@mui/material/styles");
 var _d3Color = require("d3-color");
 var _web = require("@react-spring/web");
 var _useAnimatedPath = require("../internals/useAnimatedPath");
-var _DrawingProvider = require("../context/DrawingProvider");
 var _utils = require("../internals/utils");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["d", "skipAnimation", "ownerState"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -28,7 +28,7 @@ const AreaElementPath = exports.AreaElementPath = (0, _styles.styled)(_web.anima
   ownerState
 }) => ({
   stroke: 'none',
-  fill: ownerState.isHighlighted ? (0, _d3Color.color)(ownerState.color).brighter(1).formatHex() : (0, _d3Color.color)(ownerState.color).brighter(0.5).formatHex(),
+  fill: ownerState.gradientId && `url(#${ownerState.gradientId})` || ownerState.isHighlighted && (0, _d3Color.color)(ownerState.color).brighter(1).formatHex() || (0, _d3Color.color)(ownerState.color).brighter(0.5).formatHex(),
   transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
   opacity: ownerState.isFaded ? 0.3 : 1
 }));
@@ -55,9 +55,9 @@ function AnimatedArea(props) {
     right,
     bottom,
     width,
-    height,
-    chartId
-  } = React.useContext(_DrawingProvider.DrawingContext);
+    height
+  } = (0, _hooks.useDrawingArea)();
+  const chartId = (0, _hooks.useChartId)();
   const path = (0, _useAnimatedPath.useAnimatedPath)(d, skipAnimation);
   const {
     animatedWidth
@@ -99,6 +99,7 @@ process.env.NODE_ENV !== "production" ? AnimatedArea.propTypes = {
   ownerState: _propTypes.default.shape({
     classes: _propTypes.default.object,
     color: _propTypes.default.string.isRequired,
+    gradientId: _propTypes.default.string,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     isFaded: _propTypes.default.bool.isRequired,
     isHighlighted: _propTypes.default.bool.isRequired

package/LineChart/AnimatedLine.js

@@ -14,8 +14,9 @@ var _web = require("@react-spring/web");
 var _d3Color = require("d3-color");
 var _styles = require("@mui/material/styles");
 var _useAnimatedPath = require("../internals/useAnimatedPath");
-var _DrawingProvider = require("../context/DrawingProvider");
 var _utils = require("../internals/utils");
+var _useChartId = require("../hooks/useChartId");
+var _useDrawingArea = require("../hooks/useDrawingArea");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["d", "skipAnimation", "ownerState"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -30,7 +31,7 @@ const LineElementPath = exports.LineElementPath = (0, _styles.styled)(_web.anima
   strokeWidth: 2,
   strokeLinejoin: 'round',
   fill: 'none',
-  stroke: ownerState.isHighlighted ? (0, _d3Color.color)(ownerState.color).brighter(0.5).formatHex() : ownerState.color,
+  stroke: ownerState.gradientId && `url(#${ownerState.gradientId})` || ownerState.isHighlighted && (0, _d3Color.color)(ownerState.color).brighter(0.5).formatHex() || ownerState.color,
   transition: 'opacity 0.2s ease-in, stroke 0.2s ease-in',
   opacity: ownerState.isFaded ? 0.3 : 1
 }));
@@ -57,9 +58,9 @@ function AnimatedLine(props) {
     bottom,
     width,
     height,
-    right,
-    chartId
-  } = React.useContext(_DrawingProvider.DrawingContext);
+    right
+  } = (0, _useDrawingArea.useDrawingArea)();
+  const chartId = (0, _useChartId.useChartId)();
   const path = (0, _useAnimatedPath.useAnimatedPath)(d, skipAnimation);
   const {
     animatedWidth
@@ -101,6 +102,7 @@ process.env.NODE_ENV !== "production" ? AnimatedLine.propTypes = {
   ownerState: _propTypes.default.shape({
     classes: _propTypes.default.object,
     color: _propTypes.default.string.isRequired,
+    gradientId: _propTypes.default.string,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     isFaded: _propTypes.default.bool.isRequired,
     isHighlighted: _propTypes.default.bool.isRequired

package/LineChart/AreaElement.d.ts

@@ -14,6 +14,7 @@ export type AreaElementClassKey = keyof AreaElementClasses;
 export interface AreaElementOwnerState {
     id: SeriesId;
     color: string;
+    gradientId?: string;
     isFaded: boolean;
     isHighlighted: boolean;
     classes?: Partial<AreaElementClasses>;

package/LineChart/AreaElement.js

@@ -19,7 +19,7 @@ var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _InteractionProvider = require("../context/InteractionProvider");
 var _AnimatedArea = require("./AnimatedArea");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "classes", "color", "highlightScope", "slots", "slotProps", "onClick"];
+const _excluded = ["id", "classes", "color", "gradientId", "highlightScope", "slots", "slotProps", "onClick"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function getAreaElementUtilityClass(slot) {
@@ -53,6 +53,7 @@ function AreaElement(props) {
       id,
       classes: innerClasses,
       color,
+      gradientId,
       highlightScope,
       slots,
       slotProps,
@@ -75,6 +76,7 @@ function AreaElement(props) {
     id,
     classes: innerClasses,
     color,
+    gradientId,
     isFaded,
     isHighlighted
   };
@@ -103,6 +105,7 @@ process.env.NODE_ENV !== "production" ? AreaElement.propTypes = {
   classes: _propTypes.default.object,
   color: _propTypes.default.string.isRequired,
   d: _propTypes.default.string.isRequired,
+  gradientId: _propTypes.default.string,
   highlightScope: _propTypes.default.shape({
     faded: _propTypes.default.oneOf(['global', 'none', 'series']),
     highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])

package/LineChart/AreaPlot.js

@@ -16,6 +16,7 @@ var _AreaElement = require("./AreaElement");
 var _useScale = require("../hooks/useScale");
 var _getCurve = _interopRequireDefault(require("../internals/getCurve"));
 var _constants = require("../constants");
+var _ChartsAxesGradients = require("../internals/components/ChartsAxesGradients");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "onItemClick", "skipAnimation"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -52,6 +53,7 @@ const useAggregatedData = () => {
       const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisKey].scale);
       const yScale = yAxis[yAxisKey].scale;
       const xData = xAxis[xAxisKey].data;
+      const gradientUsed = yAxis[yAxisKey].colorScale && [yAxisKey, 'y'] || xAxis[xAxisKey].colorScale && [xAxisKey, 'x'] || undefined;
       if (process.env.NODE_ENV !== 'production') {
         if (xData === undefined) {
           throw new Error(`MUI X Charts: ${xAxisKey === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
@@ -69,6 +71,7 @@ const useAggregatedData = () => {
       const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
       const d = areaPath.curve(curve)(d3Data) || '';
       return (0, _extends2.default)({}, series[seriesId], {
+        gradientUsed,
         d,
         seriesId
       });
@@ -95,6 +98,7 @@ function AreaPlot(props) {
       skipAnimation
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const getGradientId = (0, _ChartsAxesGradients.useChartGradient)();
   const completedData = useAggregatedData();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
     children: completedData.reverse().map(({
@@ -102,11 +106,13 @@ function AreaPlot(props) {
       seriesId,
       color,
       highlightScope,
-      area
+      area,
+      gradientUsed
     }) => !!area && /*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaElement.AreaElement, {
       id: seriesId,
       d: d,
       color: color,
+      gradientId: gradientUsed && getGradientId(...gradientUsed),
       highlightScope: highlightScope,
       slots: slots,
       slotProps: slotProps,

package/LineChart/LineChart.js

@@ -387,11 +387,26 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   width: _propTypes.default.number,
   /**
    * The configuration of the x-axes.
-   * If not provided, a default axis config is used with id set to `DEFAULT_X_AXIS_KEY`.
+   * If not provided, a default axis config is used.
    */
   xAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
     axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
+    colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    })]),
     data: _propTypes.default.array,
     dataKey: _propTypes.default.string,
     disableLine: _propTypes.default.bool,
@@ -424,11 +439,26 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   })),
   /**
    * The configuration of the y-axes.
-   * If not provided, a default axis config is used with id set to `DEFAULT_Y_AXIS_KEY`.
+   * If not provided, a default axis config is used.
    */
   yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
     axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
+    colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    })]),
     data: _propTypes.default.array,
     dataKey: _propTypes.default.string,
     disableLine: _propTypes.default.bool,

package/LineChart/LineElement.d.ts

@@ -14,6 +14,7 @@ export type LineElementClassKey = keyof LineElementClasses;
 export interface LineElementOwnerState {
     id: SeriesId;
     color: string;
+    gradientId?: string;
     isFaded: boolean;
     isHighlighted: boolean;
     classes?: Partial<LineElementClasses>;

package/LineChart/LineElement.js

@@ -19,7 +19,7 @@ var _InteractionProvider = require("../context/InteractionProvider");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _AnimatedLine = require("./AnimatedLine");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "classes", "color", "highlightScope", "slots", "slotProps", "onClick"];
+const _excluded = ["id", "classes", "color", "gradientId", "highlightScope", "slots", "slotProps", "onClick"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function getLineElementUtilityClass(slot) {
@@ -53,6 +53,7 @@ function LineElement(props) {
       id,
       classes: innerClasses,
       color,
+      gradientId,
       highlightScope,
       slots,
       slotProps,
@@ -75,6 +76,7 @@ function LineElement(props) {
     id,
     classes: innerClasses,
     color,
+    gradientId,
     isFaded,
     isHighlighted
   };
@@ -103,6 +105,7 @@ process.env.NODE_ENV !== "production" ? LineElement.propTypes = {
   classes: _propTypes.default.object,
   color: _propTypes.default.string.isRequired,
   d: _propTypes.default.string.isRequired,
+  gradientId: _propTypes.default.string,
   highlightScope: _propTypes.default.shape({
     faded: _propTypes.default.oneOf(['global', 'none', 'series']),
     highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])

package/LineChart/LineHighlightPlot.js

@@ -15,6 +15,7 @@ var _LineHighlightElement = require("./LineHighlightElement");
 var _useScale = require("../hooks/useScale");
 var _InteractionProvider = require("../context/InteractionProvider");
 var _constants = require("../constants");
+var _getColor = _interopRequireDefault(require("./getColor"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -83,9 +84,11 @@ function LineHighlightPlot(props) {
         }
         const x = xScale(xData[highlightedIndex]);
         const y = yScale(stackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale
+
+        const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisKey], yAxis[yAxisKey]);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({
           id: seriesId,
-          color: series[seriesId].color,
+          color: colorGetter(highlightedIndex),
           x: x,
           y: y
         }, slotProps?.lineHighlight), `${seriesId}`);

package/LineChart/LinePlot.js

@@ -16,6 +16,7 @@ var _LineElement = require("./LineElement");
 var _useScale = require("../hooks/useScale");
 var _getCurve = _interopRequireDefault(require("../internals/getCurve"));
 var _constants = require("../constants");
+var _ChartsAxesGradients = require("../internals/components/ChartsAxesGradients");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -52,6 +53,7 @@ const useAggregatedData = () => {
       const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisKey].scale);
       const yScale = yAxis[yAxisKey].scale;
       const xData = xAxis[xAxisKey].data;
+      const gradientUsed = yAxis[yAxisKey].colorScale && [yAxisKey, 'y'] || xAxis[xAxisKey].colorScale && [xAxisKey, 'x'] || undefined;
       if (process.env.NODE_ENV !== 'production') {
         if (xData === undefined) {
           throw new Error(`MUI X Charts: ${xAxisKey === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
@@ -68,6 +70,7 @@ const useAggregatedData = () => {
       const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
       const d = linePath.curve((0, _getCurve.default)(series[seriesId].curve))(d3Data) || '';
       return (0, _extends2.default)({}, series[seriesId], {
+        gradientUsed,
         d,
         seriesId
       });
@@ -93,18 +96,21 @@ function LinePlot(props) {
       onItemClick
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const getGradientId = (0, _ChartsAxesGradients.useChartGradient)();
   const completedData = useAggregatedData();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
     children: completedData.map(({
       d,
       seriesId,
       color,
-      highlightScope
+      highlightScope,
+      gradientUsed
     }) => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineElement.LineElement, {
         id: seriesId,
         d: d,
         color: color,
+        gradientId: gradientUsed && getGradientId(...gradientUsed),
         highlightScope: highlightScope,
         skipAnimation: skipAnimation,
         slots: slots,

package/LineChart/MarkPlot.js

@@ -13,9 +13,10 @@ var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _MarkElement = require("./MarkElement");
 var _useScale = require("../hooks/useScale");
+var _useChartId = require("../hooks/useChartId");
 var _constants = require("../constants");
-var _DrawingProvider = require("../context/DrawingProvider");
 var _utils = require("../internals/utils");
+var _getColor = _interopRequireDefault(require("./getColor"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -40,9 +41,7 @@ function MarkPlot(props) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).line;
   const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
-  const {
-    chartId
-  } = React.useContext(_DrawingProvider.DrawingContext);
+  const chartId = (0, _useChartId.useChartId)();
   const Mark = slots?.mark ?? _MarkElement.MarkElement;
   if (seriesData === undefined) {
     return null;
@@ -96,6 +95,7 @@ function MarkPlot(props) {
         }
         const clipId = (0, _utils.cleanId)(`${chartId}-${seriesId}-line-clip`); // We assume that if displaying line mark, the line will also be rendered
 
+        const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisKey], yAxis[yAxisKey]);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           clipPath: `url(#${clipId})`,
           children: xData?.map((x, index) => {
@@ -144,7 +144,7 @@ function MarkPlot(props) {
               id: seriesId,
               dataIndex: index,
               shape: "circle",
-              color: series[seriesId].color,
+              color: colorGetter(index),
               x: x,
               y: y // Don't know why TS doesn't get from the filter that y can't be null
               ,

package/LineChart/getColor.d.ts

@@ -0,0 +1,3 @@
+import { AxisDefaultized } from '../models/axis';
+import { DefaultizedLineSeriesType } from '../models/seriesType/line';
+export default function getColor(series: DefaultizedLineSeriesType, xAxis: AxisDefaultized, yAxis: AxisDefaultized): (dataIndex: number) => string;