@mui/x-charts 7.2.0 → 7.3.1

package/PieChart/PieChart.js

@@ -18,7 +18,7 @@ var _PiePlot = require("./PiePlot");
 var _useIsRTL = require("../internals/useIsRTL");
 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; }
+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 && {}.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; }
 const defaultMargin = {
   top: 5,
   bottom: 5,
@@ -132,30 +132,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
-  bottomAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    classes: _propTypes.default.object,
-    disableLine: _propTypes.default.bool,
-    disableTicks: _propTypes.default.bool,
-    fill: _propTypes.default.string,
-    label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
-    labelStyle: _propTypes.default.object,
-    position: _propTypes.default.oneOf(['bottom', 'top']),
-    slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    stroke: _propTypes.default.string,
-    tickFontSize: _propTypes.default.number,
-    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
-    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
-    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
-    tickLabelStyle: _propTypes.default.object,
-    tickMaxStep: _propTypes.default.number,
-    tickMinStep: _propTypes.default.number,
-    tickNumber: _propTypes.default.number,
-    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: _propTypes.default.number
-  }), _propTypes.default.string]),
+  bottomAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
   children: _propTypes.default.node,
   className: _propTypes.default.string,
   /**
@@ -183,30 +160,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
    * @default null
    */
-  leftAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    classes: _propTypes.default.object,
-    disableLine: _propTypes.default.bool,
-    disableTicks: _propTypes.default.bool,
-    fill: _propTypes.default.string,
-    label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
-    labelStyle: _propTypes.default.object,
-    position: _propTypes.default.oneOf(['left', 'right']),
-    slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    stroke: _propTypes.default.string,
-    tickFontSize: _propTypes.default.number,
-    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
-    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
-    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
-    tickLabelStyle: _propTypes.default.object,
-    tickMaxStep: _propTypes.default.number,
-    tickMinStep: _propTypes.default.number,
-    tickNumber: _propTypes.default.number,
-    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: _propTypes.default.number
-  }), _propTypes.default.string]),
+  leftAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
   /**
    * The props of the legend.
    * @default { direction: 'column', position: { vertical: 'middle', horizontal: 'right' } }
@@ -244,32 +198,10 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
    * @default null
    */
-  rightAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    classes: _propTypes.default.object,
-    disableLine: _propTypes.default.bool,
-    disableTicks: _propTypes.default.bool,
-    fill: _propTypes.default.string,
-    label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
-    labelStyle: _propTypes.default.object,
-    position: _propTypes.default.oneOf(['left', 'right']),
-    slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    stroke: _propTypes.default.string,
-    tickFontSize: _propTypes.default.number,
-    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
-    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
-    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
-    tickLabelStyle: _propTypes.default.object,
-    tickMaxStep: _propTypes.default.number,
-    tickMinStep: _propTypes.default.number,
-    tickNumber: _propTypes.default.number,
-    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: _propTypes.default.number
-  }), _propTypes.default.string]),
+  rightAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
   /**
    * The series to display in the pie chart.
+   * An array of [[PieSeriesType]] objects.
    */
   series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   /**
@@ -307,30 +239,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
-  topAxis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    classes: _propTypes.default.object,
-    disableLine: _propTypes.default.bool,
-    disableTicks: _propTypes.default.bool,
-    fill: _propTypes.default.string,
-    label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
-    labelStyle: _propTypes.default.object,
-    position: _propTypes.default.oneOf(['bottom', 'top']),
-    slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    stroke: _propTypes.default.string,
-    tickFontSize: _propTypes.default.number,
-    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
-    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
-    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
-    tickLabelStyle: _propTypes.default.object,
-    tickMaxStep: _propTypes.default.number,
-    tickMinStep: _propTypes.default.number,
-    tickNumber: _propTypes.default.number,
-    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
-    tickSize: _propTypes.default.number
-  }), _propTypes.default.string]),
+  topAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
   viewBox: _propTypes.default.shape({
     height: _propTypes.default.number,
     width: _propTypes.default.number,
@@ -343,11 +252,27 @@ 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.
+   * An array of [[AxisConfig]] objects.
    */
   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 +305,27 @@ 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.
+   * An array of [[AxisConfig]] objects.
    */
   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/PieChart/PiePlot.js

@@ -12,9 +12,10 @@ var _DrawingProvider = require("../context/DrawingProvider");
 var _PieArcPlot = require("./PieArcPlot");
 var _PieArcLabelPlot = require("./PieArcLabelPlot");
 var _utils = require("../internals/utils");
+var _getPieCoordinates = require("./getPieCoordinates");
 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; }
+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 && {}.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; }
 /**
  * Demos:
  *
@@ -42,7 +43,6 @@ function PiePlot(props) {
   if (seriesData === undefined) {
     return null;
   }
-  const availableRadius = Math.min(width, height) / 2;
   const {
     series,
     seriesOrder
@@ -61,10 +61,19 @@ function PiePlot(props) {
         faded,
         highlightScope
       } = series[seriesId];
+      const {
+        cx,
+        cy,
+        availableRadius
+      } = (0, _getPieCoordinates.getPieCoordinates)({
+        cx: cxParam,
+        cy: cyParam
+      }, {
+        width,
+        height
+      });
       const outerRadius = (0, _utils.getPercentageValue)(outerRadiusParam ?? availableRadius, availableRadius);
       const innerRadius = (0, _utils.getPercentageValue)(innerRadiusParam ?? 0, availableRadius);
-      const cx = (0, _utils.getPercentageValue)(cxParam ?? '50%', width);
-      const cy = (0, _utils.getPercentageValue)(cyParam ?? '50%', height);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
         transform: `translate(${left + cx}, ${top + cy})`,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PieArcPlot.PieArcPlot, {
@@ -97,11 +106,20 @@ function PiePlot(props) {
         cy: cyParam,
         highlightScope
       } = series[seriesId];
+      const {
+        cx,
+        cy,
+        availableRadius
+      } = (0, _getPieCoordinates.getPieCoordinates)({
+        cx: cxParam,
+        cy: cyParam
+      }, {
+        width,
+        height
+      });
       const outerRadius = (0, _utils.getPercentageValue)(outerRadiusParam ?? availableRadius, availableRadius);
       const innerRadius = (0, _utils.getPercentageValue)(innerRadiusParam ?? 0, availableRadius);
       const arcLabelRadius = arcLabelRadiusParam === undefined ? (outerRadius + innerRadius) / 2 : (0, _utils.getPercentageValue)(arcLabelRadiusParam, availableRadius);
-      const cx = (0, _utils.getPercentageValue)(cxParam ?? '50%', width);
-      const cy = (0, _utils.getPercentageValue)(cyParam ?? '50%', height);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
         transform: `translate(${left + cx}, ${top + cy})`,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PieArcLabelPlot.PieArcLabelPlot, {
@@ -115,7 +133,9 @@ function PiePlot(props) {
           skipAnimation: skipAnimation,
           arcLabel: arcLabel,
           arcLabelMinAngle: arcLabelMinAngle,
-          highlightScope: highlightScope
+          highlightScope: highlightScope,
+          slots: slots,
+          slotProps: slotProps
         })
       }, seriesId);
     })]

package/PieChart/dataTransform/transition.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@react-spring/core" />
 import { UseTransitionProps } from '@react-spring/web';
 import { ValueWithHighlight } from './useTransformData';
 export declare const defaultTransitionConfig: UseTransitionProps<ValueWithHighlight>;

package/PieChart/dataTransform/useTransformData.js

@@ -10,7 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _InteractionProvider = require("../../context/InteractionProvider");
 var _useInteractionItemProps = require("../../hooks/useInteractionItemProps");
 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 _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 && {}.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 useTransformData(series) {
   const {
     id: seriesId,

package/PieChart/formatter.js

@@ -35,8 +35,10 @@ const formatter = params => {
     }, series[seriesId], {
       data: series[seriesId].data.map((item, index) => (0, _extends2.default)({}, item, {
         id: item.id ?? `auto-generated-pie-id-${seriesId}-${index}`
-      }, arcs[index])).map(item => (0, _extends2.default)({}, item, {
-        formattedValue: series[seriesId].valueFormatter?.(item) ?? item.value.toLocaleString()
+      }, arcs[index])).map((item, index) => (0, _extends2.default)({}, item, {
+        formattedValue: series[seriesId].valueFormatter?.(item, {
+          dataIndex: index
+        }) ?? item.value.toLocaleString()
       }))
     });
   });

package/PieChart/getColor.d.ts

@@ -0,0 +1,2 @@
+import { DefaultizedPieSeriesType } from '../models/seriesType/pie';
+export default function getColor(series: DefaultizedPieSeriesType): (dataIndex: number) => string;

package/PieChart/getColor.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getColor;
+function getColor(series) {
+  return dataIndex => {
+    return series.data[dataIndex].color;
+  };
+}

package/PieChart/getPieCoordinates.d.ts

@@ -0,0 +1,7 @@
+import { DrawingArea } from '../context/DrawingProvider';
+import { DefaultizedPieSeriesType } from '../models/seriesType/pie';
+export declare function getPieCoordinates(series: Pick<DefaultizedPieSeriesType, 'cx' | 'cy'>, drawing: Pick<DrawingArea, 'width' | 'height'>): {
+    cx: number;
+    cy: number;
+    availableRadius: number;
+};

package/PieChart/getPieCoordinates.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPieCoordinates = getPieCoordinates;
+var _utils = require("../internals/utils");
+function getPieCoordinates(series, drawing) {
+  const {
+    height,
+    width
+  } = drawing;
+  const {
+    cx: cxParam,
+    cy: cyParam
+  } = series;
+  const availableRadius = Math.min(width, height) / 2;
+  const cx = (0, _utils.getPercentageValue)(cxParam ?? '50%', width);
+  const cy = (0, _utils.getPercentageValue)(cyParam ?? '50%', height);
+  return {
+    cx,
+    cy,
+    availableRadius
+  };
+}

package/PieChart/index.d.ts

@@ -4,3 +4,4 @@ export * from './PieArcPlot';
 export * from './PieArcLabelPlot';
 export * from './PieArc';
 export * from './PieArcLabel';
+export * from './getPieCoordinates';

package/PieChart/index.js

@@ -68,4 +68,15 @@ Object.keys(_PieArcLabel).forEach(function (key) {
       return _PieArcLabel[key];
     }
   });
+});
+var _getPieCoordinates = require("./getPieCoordinates");
+Object.keys(_getPieCoordinates).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _getPieCoordinates[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _getPieCoordinates[key];
+    }
+  });
 });

package/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -15,7 +15,7 @@ var _useChartContainerDimensions = require("./useChartContainerDimensions");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["width", "height"];
 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 _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 && {}.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; }
 const ResizableContainer = (0, _styles.styled)('div', {
   name: 'MuiResponsiveChart',
   slot: 'Container'
@@ -115,11 +115,27 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.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.
+   * An array of [[AxisConfig]] objects.
    */
   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,
@@ -152,11 +168,27 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.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.
+   * An array of [[AxisConfig]] objects.
    */
   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/ResponsiveChartContainer/useChartContainerDimensions.js

@@ -9,7 +9,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _ownerWindow = _interopRequireDefault(require("@mui/utils/ownerWindow"));
 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 _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 && {}.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; }
 const useChartContainerDimensions = (inWidth, inHeight) => {
   const rootRef = React.useRef(null);
   const displayError = React.useRef(false);

package/ScatterChart/Scatter.d.ts

@@ -7,6 +7,7 @@ export interface ScatterProps {
     yScale: D3Scale;
     markerSize: number;
     color: string;
+    colorGetter?: (dataIndex: number) => string;
     /**
      * Callback fired when clicking on a scatter item.
      * @param {MouseEvent} event Mouse event recorded on the `<svg/>` element.

package/ScatterChart/Scatter.js

@@ -13,7 +13,7 @@ var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _InteractionProvider = require("../context/InteractionProvider");
 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; }
+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 && {}.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; }
 /**
  * Demos:
  *
@@ -30,6 +30,7 @@ function Scatter(props) {
     xScale,
     yScale,
     color,
+    colorGetter,
     markerSize,
     onItemClick
   } = props;
@@ -72,19 +73,20 @@ function Scatter(props) {
           isFaded: !isHighlighted && (0, _useInteractionItemProps.getIsFaded)(item, pointCtx, highlightScope),
           interactionProps: getInteractionItemProps(pointCtx),
           id: scatterPoint.id,
-          dataIndex: i
+          dataIndex: i,
+          color: colorGetter ? colorGetter(i) : color
         });
       }
     }
     return temp;
-  }, [xScale, yScale, series.data, series.id, item, highlightScope, getInteractionItemProps]);
+  }, [xScale, yScale, series.data, series.id, item, highlightScope, getInteractionItemProps, color, colorGetter]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
     children: cleanData.map(dataPoint => /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", (0, _extends2.default)({
       cx: 0,
       cy: 0,
       r: (dataPoint.isHighlighted ? 1.2 : 1) * markerSize,
       transform: `translate(${dataPoint.x}, ${dataPoint.y})`,
-      fill: color,
+      fill: dataPoint.color,
       opacity: dataPoint.isFaded && 0.3 || 1,
       onClick: onItemClick && (event => onItemClick(event, {
         type: 'scatter',
@@ -101,6 +103,7 @@ process.env.NODE_ENV !== "production" ? Scatter.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   color: _propTypes.default.string.isRequired,
+  colorGetter: _propTypes.default.func,
   markerSize: _propTypes.default.number.isRequired,
   /**
    * Callback fired when clicking on a scatter item.

package/ScatterChart/ScatterChart.d.ts

@@ -10,13 +10,15 @@ import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsAxisSlots, ChartsAxisSlotProps } from '../models/axis';
 import { ChartsVoronoiHandlerProps } from '../ChartsVoronoiHandler/ChartsVoronoiHandler';
 import { ChartsGridProps } from '../ChartsGrid';
+import { ZAxisContextProviderProps } from '../context/ZAxisContextProvider';
 export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, ChartsLegendSlots, ChartsTooltipSlots {
 }
 export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps {
 }
-export interface ScatterChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsVoronoiHandlerProps, 'onItemClick'> {
+export interface ScatterChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ZAxisContextProviderProps, 'children' | 'dataset'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsVoronoiHandlerProps, 'onItemClick'> {
     /**
      * The series to display in the scatter chart.
+     * An array of [[ScatterSeriesType]] objects.
      */
     series: MakeOptional<ScatterSeriesType, 'type'>[];
     /**