@mui/x-charts 7.2.0 → 7.3.0

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"];
@@ -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';

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");
@@ -102,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,

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;

package/LineChart/getColor.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getColor;
+function getColor(series, xAxis, yAxis) {
+  const yColorScale = yAxis.colorScale;
+  const xColorScale = xAxis.colorScale;
+  if (yColorScale) {
+    return dataIndex => {
+      const value = series.data[dataIndex];
+      const color = value === null ? series.color : yColorScale(value);
+      if (color === null) {
+        return series.color;
+      }
+      return color;
+    };
+  }
+  if (xColorScale) {
+    return dataIndex => {
+      const value = xAxis.data?.[dataIndex];
+      const color = value === null ? series.color : xColorScale(value);
+      if (color === null) {
+        return series.color;
+      }
+      return color;
+    };
+  }
+  return () => series.color;
+}

package/PieChart/PieChart.js

@@ -343,11 +343,26 @@ process.env.NODE_ENV !== "production" ? PieChart.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,
@@ -380,11 +395,26 @@ process.env.NODE_ENV !== "production" ? PieChart.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,