@mui/x-charts 7.1.1 → 7.3.0

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,

package/PieChart/PiePlot.js

@@ -12,6 +12,7 @@ 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; }
@@ -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/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

@@ -115,11 +115,26 @@ 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.
    */
   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 +167,26 @@ 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.
    */
   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/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

@@ -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.js

@@ -336,11 +336,26 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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,
@@ -373,11 +388,26 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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/ScatterChart/ScatterPlot.js

@@ -11,6 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Scatter = require("./Scatter");
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _getColor = _interopRequireDefault(require("./getColor"));
 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; }
@@ -57,12 +58,14 @@ function ScatterPlot(props) {
         markerSize,
         color
       } = series[seriesId];
+      const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisKey ?? defaultXAxisId], yAxis[yAxisKey ?? defaultYAxisId]);
       const xScale = xAxis[xAxisKey ?? defaultXAxisId].scale;
       const yScale = yAxis[yAxisKey ?? defaultYAxisId].scale;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(ScatterItems, (0, _extends2.default)({
         xScale: xScale,
         yScale: yScale,
         color: color,
+        colorGetter: colorGetter,
         markerSize: markerSize ?? 4,
         series: series[seriesId],
         onItemClick: onItemClick

package/ScatterChart/getColor.d.ts

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

package/ScatterChart/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.y);
+      if (color === null) {
+        return series.color;
+      }
+      return color;
+    };
+  }
+  if (xColorScale) {
+    return dataIndex => {
+      const value = series.data[dataIndex];
+      const color = value === null ? series.color : xColorScale(value.x);
+      if (color === null) {
+        return series.color;
+      }
+      return color;
+    };
+  }
+  return () => series.color;
+}

package/SparkLineChart/SparkLineChart.js

@@ -234,6 +234,21 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   xAxis: _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/context/CartesianContextProvider.d.ts

@@ -6,12 +6,12 @@ import { MakeOptional } from '../models/helpers';
 export type CartesianContextProviderProps = {
     /**
      * 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?: MakeOptional<AxisConfig, 'id'>[];
     /**
      * 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?: MakeOptional<AxisConfig, 'id'>[];
     /**

package/context/CartesianContextProvider.js

@@ -14,10 +14,11 @@ var _extremums2 = require("../ScatterChart/extremums");
 var _extremums3 = require("../LineChart/extremums");
 var _axis = require("../models/axis");
 var _getScale = require("../internals/getScale");
-var _DrawingProvider = require("./DrawingProvider");
 var _SeriesContextProvider = require("./SeriesContextProvider");
 var _constants = require("../constants");
 var _useTicks = require("../hooks/useTicks");
+var _useDrawingArea = require("../hooks/useDrawingArea");
+var _colorScale = require("../internals/colorScale");
 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; }
@@ -52,7 +53,7 @@ function CartesianContextProvider(props) {
     children
   } = props;
   const formattedSeries = React.useContext(_SeriesContextProvider.SeriesContext);
-  const drawingArea = React.useContext(_DrawingProvider.DrawingContext);
+  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
   const xAxis = React.useMemo(() => inXAxis?.map(axisConfig => {
     const dataKey = axisConfig.dataKey;
     if (dataKey === undefined || axisConfig.data !== undefined) {
@@ -122,13 +123,19 @@ function CartesianContextProvider(props) {
           barGapRatio
         }, axis, {
           scale: (0, _d3Scale.scaleBand)(axis.data, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
-          tickNumber: axis.data.length
+          tickNumber: axis.data.length,
+          colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? (0, _colorScale.getOrdinalColorScale)((0, _extends2.default)({
+            values: axis.data
+          }, axis.colorMap)) : (0, _colorScale.getColorScale)(axis.colorMap))
         });
       }
       if ((0, _axis.isPointScaleConfig)(axis)) {
         completedXAxis[axis.id] = (0, _extends2.default)({}, axis, {
           scale: (0, _d3Scale.scalePoint)(axis.data, range),
-          tickNumber: axis.data.length
+          tickNumber: axis.data.length,
+          colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? (0, _colorScale.getOrdinalColorScale)((0, _extends2.default)({
+            values: axis.data
+          }, axis.colorMap)) : (0, _colorScale.getColorScale)(axis.colorMap))
         });
       }
       if (axis.scaleType === 'band' || axis.scaleType === 'point') {
@@ -147,7 +154,8 @@ function CartesianContextProvider(props) {
       completedXAxis[axis.id] = (0, _extends2.default)({}, axis, {
         scaleType,
         scale: niceScale.domain(domain),
-        tickNumber
+        tickNumber,
+        colorScale: axis.colorMap && (0, _colorScale.getColorScale)(axis.colorMap)
       });
     });
     const allYAxis = [...(yAxis?.map((axis, index) => (0, _extends2.default)({
@@ -170,13 +178,19 @@ function CartesianContextProvider(props) {
           barGapRatio: 0
         }, axis, {
           scale: (0, _d3Scale.scaleBand)(axis.data, [range[1], range[0]]).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
-          tickNumber: axis.data.length
+          tickNumber: axis.data.length,
+          colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? (0, _colorScale.getOrdinalColorScale)((0, _extends2.default)({
+            values: axis.data
+          }, axis.colorMap)) : (0, _colorScale.getColorScale)(axis.colorMap))
         });
       }
       if ((0, _axis.isPointScaleConfig)(axis)) {
         completedYAxis[axis.id] = (0, _extends2.default)({}, axis, {
           scale: (0, _d3Scale.scalePoint)(axis.data, [range[1], range[0]]),
-          tickNumber: axis.data.length
+          tickNumber: axis.data.length,
+          colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' ? (0, _colorScale.getOrdinalColorScale)((0, _extends2.default)({
+            values: axis.data
+          }, axis.colorMap)) : (0, _colorScale.getColorScale)(axis.colorMap))
         });
       }
       if (axis.scaleType === 'band' || axis.scaleType === 'point') {
@@ -195,7 +209,8 @@ function CartesianContextProvider(props) {
       completedYAxis[axis.id] = (0, _extends2.default)({}, axis, {
         scaleType,
         scale: niceScale.domain(domain),
-        tickNumber
+        tickNumber,
+        colorScale: axis.colorMap && (0, _colorScale.getColorScale)(axis.colorMap)
       });
     });
     return {