@mui/x-charts 7.6.1 → 7.7.0

package/PieChart/PieChart.js

@@ -16,7 +16,7 @@ var _ChartsLegend = require("../ChartsLegend");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
 var _PiePlot = require("./PiePlot");
 var _useIsRTL = require("../internals/useIsRTL");
-var _ChartsOverlay = require("../ChartsOverlay/ChartsOverlay");
+var _ChartsOverlay = require("../ChartsOverlay");
 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 && {}.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; }
@@ -316,7 +316,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
+    position: _propTypes.default.oneOf(['bottom', 'top']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: _propTypes.default.object,
@@ -369,7 +369,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
+    position: _propTypes.default.oneOf(['left', 'right']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: _propTypes.default.object,

package/PieChart/PiePlot.js

@@ -7,12 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.PiePlot = PiePlot;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _DrawingProvider = require("../context/DrawingProvider");
 var _PieArcPlot = require("./PieArcPlot");
 var _PieArcLabelPlot = require("./PieArcLabelPlot");
 var _utils = require("../internals/utils");
 var _getPieCoordinates = require("./getPieCoordinates");
+var _useSeries = require("../hooks/useSeries");
 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 && {}.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; }
@@ -33,7 +33,7 @@ function PiePlot(props) {
     slotProps,
     onItemClick
   } = props;
-  const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).pie;
+  const seriesData = (0, _useSeries.usePieSeries)();
   const {
     left,
     top,

package/PieChart/plugin.d.ts

@@ -0,0 +1,2 @@
+import { ChartsPluginType } from '../models/plugin';
+export declare const plugin: ChartsPluginType<'pie'>;

package/PieChart/plugin.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.plugin = void 0;
+var _formatter = _interopRequireDefault(require("./formatter"));
+var _getColor = _interopRequireDefault(require("./getColor"));
+const plugin = exports.plugin = {
+  seriesType: 'pie',
+  colorProcessor: _getColor.default,
+  seriesFormatter: _formatter.default
+};

package/ResponsiveChartContainer/ResizableContainer.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { ResponsiveChartContainerProps } from './ResponsiveChartContainer';
+/**
+ * Wrapping div that take the shape of its parent.
+ *
+ * @ignore - do not document.
+ */
+export declare const ResizableContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    ownerState: Pick<ResponsiveChartContainerProps, 'width' | 'height'>;
+}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;

package/ResponsiveChartContainer/ResizableContainer.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ResizableContainer = void 0;
+var _styles = require("@mui/material/styles");
+/**
+ * Wrapping div that take the shape of its parent.
+ *
+ * @ignore - do not document.
+ */
+const ResizableContainer = exports.ResizableContainer = (0, _styles.styled)('div', {
+  name: 'MuiResponsiveChart',
+  slot: 'Container'
+})(({
+  ownerState
+}) => ({
+  width: ownerState.width ?? '100%',
+  height: ownerState.height ?? '100%',
+  display: 'flex',
+  position: 'relative',
+  flexGrow: 1,
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'hidden',
+  '&>svg': {
+    width: '100%',
+    height: '100%'
+  }
+}));

package/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -9,33 +9,13 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styles = require("@mui/material/styles");
 var _ChartContainer = require("../ChartContainer");
 var _useChartContainerDimensions = require("./useChartContainerDimensions");
+var _ResizableContainer = require("./ResizableContainer");
 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 && {}.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'
-})(({
-  ownerState
-}) => ({
-  width: ownerState.width ?? '100%',
-  height: ownerState.height ?? '100%',
-  display: 'flex',
-  position: 'relative',
-  flexGrow: 1,
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'center',
-  overflow: 'hidden',
-  '&>svg': {
-    width: '100%',
-    height: '100%'
-  }
-}));
 const ResponsiveChartContainer = exports.ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function ResponsiveChartContainer(props, ref) {
   const {
       width: inWidth,
@@ -43,7 +23,7 @@ const ResponsiveChartContainer = exports.ResponsiveChartContainer = /*#__PURE__*
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [containerRef, width, height] = (0, _useChartContainerDimensions.useChartContainerDimensions)(inWidth, inHeight);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizableContainer, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResizableContainer.ResizableContainer, {
     ref: containerRef,
     ownerState: {
       width: inWidth,
@@ -108,6 +88,11 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: _propTypes.default.func,
+  /**
+   * An array of plugins defining how to preprocess data.
+   * If not provided, the container supports line, bar, scatter and pie charts.
+   */
+  plugins: _propTypes.default.arrayOf(_propTypes.default.object),
   /**
    * The array of series to display.
    * Each type of series has its own specificity.
@@ -161,7 +146,7 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
+    position: _propTypes.default.oneOf(['bottom', 'top']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: _propTypes.default.object,
@@ -214,7 +199,7 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
+    position: _propTypes.default.oneOf(['left', 'right']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: _propTypes.default.object,
@@ -231,5 +216,28 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
+  })),
+  /**
+   * The configuration of the z-axes.
+   */
+  zAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    colorMap: _propTypes.default.oneOfType([_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)
+    }), _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
+    })]),
+    data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
+    id: _propTypes.default.string
   }))
 } : void 0;

package/ScatterChart/ScatterChart.d.ts

@@ -6,7 +6,7 @@ import { ScatterSeriesType } from '../models/seriesType/scatter';
 import { MakeOptional } from '../models/helpers';
 import { ChartsTooltipProps, ChartsTooltipSlotProps, ChartsTooltipSlots } from '../ChartsTooltip';
 import { ChartsLegendProps, ChartsLegendSlotProps, ChartsLegendSlots } from '../ChartsLegend';
-import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '../ChartsOverlay/ChartsOverlay';
+import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '../ChartsOverlay';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsAxisSlots, ChartsAxisSlotProps } from '../models/axis';
 import { ChartsVoronoiHandlerProps } from '../ChartsVoronoiHandler/ChartsVoronoiHandler';
@@ -16,7 +16,7 @@ export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, Ch
 }
 export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps, ChartsOverlaySlotProps {
 }
-export interface ScatterChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ZAxisContextProviderProps, 'children' | 'dataset'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Omit<ChartsVoronoiHandlerProps, 'onItemClick'> {
+export interface ScatterChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'plugins'>, Omit<ZAxisContextProviderProps, 'children' | 'dataset'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Omit<ChartsVoronoiHandlerProps, 'onItemClick'> {
     /**
      * The series to display in the scatter chart.
      * An array of [[ScatterSeriesType]] objects.

package/ScatterChart/ScatterChart.js

@@ -13,7 +13,7 @@ var _ResponsiveChartContainer = require("../ResponsiveChartContainer");
 var _ChartsAxis = require("../ChartsAxis");
 var _ChartsTooltip = require("../ChartsTooltip");
 var _ChartsLegend = require("../ChartsLegend");
-var _ChartsOverlay = require("../ChartsOverlay/ChartsOverlay");
+var _ChartsOverlay = require("../ChartsOverlay");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
 var _ChartsVoronoiHandler = require("../ChartsVoronoiHandler/ChartsVoronoiHandler");
 var _ChartsGrid = require("../ChartsGrid");
@@ -311,7 +311,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
+    position: _propTypes.default.oneOf(['bottom', 'top']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: _propTypes.default.object,
@@ -364,7 +364,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
+    position: _propTypes.default.oneOf(['left', 'right']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: _propTypes.default.object,

package/ScatterChart/ScatterPlot.js

@@ -9,10 +9,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 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 _ZAxisContextProvider = require("../context/ZAxisContextProvider");
+var _useSeries = require("../hooks/useSeries");
 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 && {}.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; }
@@ -32,7 +32,7 @@ function ScatterPlot(props) {
     slotProps,
     onItemClick
   } = props;
-  const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).scatter;
+  const seriesData = (0, _useSeries.useScatterSeries)();
   const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
   const {
     zAxis,

package/ScatterChart/formatter.js

@@ -1,17 +1,16 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defaultizeValueFormatter = _interopRequireDefault(require("../internals/defaultizeValueFormatter"));
+var _defaultizeValueFormatter = require("../internals/defaultizeValueFormatter");
 const formatter = ({
   series,
   seriesOrder
 }) => {
   return {
-    series: (0, _defaultizeValueFormatter.default)(series, v => `(${v.x}, ${v.y})`),
+    series: (0, _defaultizeValueFormatter.defaultizeValueFormatter)(series, v => `(${v.x}, ${v.y})`),
     seriesOrder
   };
 };

package/ScatterChart/getColor.d.ts

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

package/ScatterChart/getColor.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = getColor;
 function getColor(series, xAxis, yAxis, zAxis) {
   const zColorScale = zAxis?.colorScale;
-  const yColorScale = yAxis.colorScale;
-  const xColorScale = xAxis.colorScale;
+  const yColorScale = yAxis?.colorScale;
+  const xColorScale = xAxis?.colorScale;
   if (zColorScale) {
     return dataIndex => {
       if (zAxis?.data?.[dataIndex] !== undefined) {

package/ScatterChart/plugin.d.ts

@@ -0,0 +1,2 @@
+import { ChartsPluginType } from '../models/plugin';
+export declare const plugin: ChartsPluginType<'scatter'>;

package/ScatterChart/plugin.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.plugin = void 0;
+var _extremums = require("./extremums");
+var _formatter = _interopRequireDefault(require("./formatter"));
+var _getColor = _interopRequireDefault(require("./getColor"));
+const plugin = exports.plugin = {
+  seriesType: 'scatter',
+  seriesFormatter: _formatter.default,
+  colorProcessor: _getColor.default,
+  xExtremumGetter: _extremums.getExtremumX,
+  yExtremumGetter: _extremums.getExtremumY
+};

package/SparkLineChart/SparkLineChart.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
 import { ChartsTooltipProps, ChartsTooltipSlotProps, ChartsTooltipSlots } from '../ChartsTooltip';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
-import { AxisConfig } from '../models/axis';
+import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '../models/axis';
 import { MakeOptional } from '../models/helpers';
 import { LineSeriesType } from '../models/seriesType/line';
 import { CardinalDirections } from '../models/layout';
@@ -15,12 +15,17 @@ export interface SparkLineChartSlots extends AreaPlotSlots, LinePlotSlots, MarkP
 }
 export interface SparkLineChartSlotProps extends AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, BarPlotSlotProps, ChartsTooltipSlotProps {
 }
-export interface SparkLineChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'margin'> {
+export interface SparkLineChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'margin' | 'plugins'> {
     /**
      * The xAxis configuration.
-     * Notice it is a single configuration object, not an array of configuration.
+     * Notice it is a single [[AxisConfig]] object, not an array of configuration.
      */
-    xAxis?: MakeOptional<AxisConfig, 'id'>;
+    xAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsXAxisProps>, 'id'>;
+    /**
+     * The yAxis configuration.
+     * Notice it is a single [[AxisConfig]] object, not an array of configuration.
+     */
+    yAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, 'id'>;
     tooltip?: ChartsTooltipProps;
     axisHighlight?: ChartsAxisHighlightProps;
     /**

package/SparkLineChart/SparkLineChart.js

@@ -36,6 +36,7 @@ const SPARKLINE_DEFAULT_MARGIN = {
 const SparkLineChart = exports.SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props, ref) {
   const {
     xAxis,
+    yAxis,
     width,
     height,
     margin = SPARKLINE_DEFAULT_MARGIN,
@@ -82,6 +83,9 @@ const SparkLineChart = exports.SparkLineChart = /*#__PURE__*/React.forwardRef(fu
       }, (_, index) => index),
       hideTooltip: xAxis === undefined
     }, xAxis)],
+    yAxis: [(0, _extends2.default)({
+      id: _constants.DEFAULT_X_AXIS_KEY
+    }, yAxis)],
     colors: colors,
     sx: sx,
     disableAxisListener: (!showTooltip || tooltip?.trigger !== 'axis') && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
@@ -242,7 +246,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   width: _propTypes.default.number,
   /**
    * The xAxis configuration.
-   * Notice it is a single configuration object, not an array of configuration.
+   * Notice it is a single [[AxisConfig]] object, not an array of configuration.
    */
   xAxis: _propTypes.default.shape({
     axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
@@ -274,7 +278,59 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
+    position: _propTypes.default.oneOf(['bottom', 'top']),
+    reverse: _propTypes.default.bool,
+    scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    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,
+    valueFormatter: _propTypes.default.func
+  }),
+  /**
+   * The yAxis configuration.
+   * Notice it is a single [[AxisConfig]] object, not an array of configuration.
+   */
+  yAxis: _propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    classes: _propTypes.default.object,
+    colorMap: _propTypes.default.oneOfType([_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)
+    }), _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
+    })]),
+    data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
+    disableLine: _propTypes.default.bool,
+    disableTicks: _propTypes.default.bool,
+    fill: _propTypes.default.string,
+    hideTooltip: _propTypes.default.bool,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    label: _propTypes.default.string,
+    labelFontSize: _propTypes.default.number,
+    labelStyle: _propTypes.default.object,
+    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    position: _propTypes.default.oneOf(['left', 'right']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
     slotProps: _propTypes.default.object,

package/context/CartesianContextProvider.d.ts

@@ -1,42 +1,53 @@
 import * as React from 'react';
-import { AxisConfig, AxisDefaultized } from '../models/axis';
-import { DatasetType } from '../models/seriesType/config';
+import { AxisConfig, AxisDefaultized, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '../models/axis';
+import { CartesianChartSeriesType, ChartSeriesType, DatasetType, ExtremumGetter } from '../models/seriesType/config';
 import { MakeOptional } from '../models/helpers';
+export type ExtremumGettersConfig<T extends ChartSeriesType = CartesianChartSeriesType> = {
+    [K in T]?: ExtremumGetter<K>;
+};
 export type CartesianContextProviderProps = {
     /**
      * The configuration of the x-axes.
      * If not provided, a default axis config is used.
      * An array of [[AxisConfig]] objects.
      */
-    xAxis?: MakeOptional<AxisConfig, 'id'>[];
+    xAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsXAxisProps>, 'id'>[];
     /**
      * The configuration of the y-axes.
      * If not provided, a default axis config is used.
      * An array of [[AxisConfig]] objects.
      */
-    yAxis?: MakeOptional<AxisConfig, 'id'>[];
+    yAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, 'id'>[];
     /**
      * An array of objects that can be used to populate series and axes data using their `dataKey` property.
      */
     dataset?: DatasetType;
+    /**
+     * An object with x-axis extremum getters per series type.
+     */
+    xExtremumGetters: ExtremumGettersConfig;
+    /**
+     * An object with y-axis extremum getters per series type.
+     */
+    yExtremumGetters: ExtremumGettersConfig;
     children: React.ReactNode;
 };
-type DefaultizedAxisConfig = {
-    [axisKey: string]: AxisDefaultized;
+type DefaultizedAxisConfig<AxisProps> = {
+    [axisKey: string]: AxisDefaultized<ScaleName, any, AxisProps>;
 };
 export declare const CartesianContext: React.Context<{
     /**
      * Mapping from x-axis key to scaling configuration.
      */
     xAxis: {
-        DEFAULT_X_AXIS_KEY: AxisDefaultized;
-    } & DefaultizedAxisConfig;
+        DEFAULT_X_AXIS_KEY: AxisDefaultized<ScaleName, any, ChartsXAxisProps>;
+    } & DefaultizedAxisConfig<ChartsXAxisProps>;
     /**
      * Mapping from y-axis key to scaling configuration.
      */
     yAxis: {
-        DEFAULT_X_AXIS_KEY: AxisDefaultized;
-    } & DefaultizedAxisConfig;
+        DEFAULT_X_AXIS_KEY: AxisDefaultized<ScaleName, any, ChartsYAxisProps>;
+    } & DefaultizedAxisConfig<ChartsYAxisProps>;
     /**
      * The x-axes IDs sorted by order they got provided.
      */

package/context/CartesianContextProvider.js

@@ -9,33 +9,18 @@ exports.CartesianContextProvider = CartesianContextProvider;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _d3Scale = require("d3-scale");
-var _extremums = require("../BarChart/extremums");
-var _extremums2 = require("../ScatterChart/extremums");
-var _extremums3 = require("../LineChart/extremums");
 var _axis = require("../models/axis");
 var _getScale = require("../internals/getScale");
-var _SeriesContextProvider = require("./SeriesContextProvider");
 var _constants = require("../constants");
 var _useTicks = require("../hooks/useTicks");
 var _useDrawingArea = require("../hooks/useDrawingArea");
 var _colorScale = require("../internals/colorScale");
+var _useSeries = require("../hooks/useSeries");
 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 && {}.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 DEFAULT_CATEGORY_GAP_RATIO = 0.2;
 const DEFAULT_BAR_GAP_RATIO = 0.1;
-
-// TODO: those might be better placed in a distinct file
-const xExtremumGetters = {
-  bar: _extremums.getExtremumX,
-  scatter: _extremums2.getExtremumX,
-  line: _extremums3.getExtremumX
-};
-const yExtremumGetters = {
-  bar: _extremums.getExtremumY,
-  scatter: _extremums2.getExtremumY,
-  line: _extremums3.getExtremumY
-};
 const CartesianContext = exports.CartesianContext = /*#__PURE__*/React.createContext({
   xAxis: {},
   yAxis: {},
@@ -50,9 +35,11 @@ function CartesianContextProvider(props) {
     xAxis: inXAxis,
     yAxis: inYAxis,
     dataset,
+    xExtremumGetters,
+    yExtremumGetters,
     children
   } = props;
-  const formattedSeries = React.useContext(_SeriesContextProvider.SeriesContext);
+  const formattedSeries = (0, _useSeries.useSeries)();
   const drawingArea = (0, _useDrawingArea.useDrawingArea)();
   const xAxis = React.useMemo(() => inXAxis?.map(axisConfig => {
     const dataKey = axisConfig.dataKey;
@@ -82,11 +69,11 @@ function CartesianContextProvider(props) {
     const axisExtremumCallback = (acc, chartType, axis, getters, isDefaultAxis) => {
       const getter = getters[chartType];
       const series = formattedSeries[chartType]?.series ?? {};
-      const [minChartTypeData, maxChartTypeData] = getter({
+      const [minChartTypeData, maxChartTypeData] = getter?.({
         series,
         axis,
         isDefaultAxis
-      });
+      }) ?? [null, null];
       const [minData, maxData] = acc;
       if (minData === null || maxData === null) {
         return [minChartTypeData, maxChartTypeData];
@@ -223,7 +210,7 @@ function CartesianContextProvider(props) {
         id
       }) => id)
     };
-  }, [drawingArea.height, drawingArea.left, drawingArea.top, drawingArea.width, formattedSeries, xAxis, yAxis]);
+  }, [drawingArea.height, drawingArea.left, drawingArea.top, drawingArea.width, formattedSeries, xAxis, xExtremumGetters, yAxis, yExtremumGetters]);
 
   // @ts-ignore
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(CartesianContext.Provider, {

package/context/ColorProvider.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { ColorProcessorsConfig } from '../models';
+import { ChartSeriesType } from '../internals';
+export interface ColorProviderProps {
+    children: React.ReactNode;
+    /**
+     * A mapping defining for each series type how to get item colors.
+     */
+    colorProcessors: ColorProcessorsConfig<ChartSeriesType>;
+}
+export declare const ColorContext: React.Context<ColorProcessorsConfig<keyof import("../internals").ChartsSeriesConfig>>;
+export declare function ColorProvider(props: ColorProviderProps): React.JSX.Element;