@mui/x-charts 7.6.0 → 7.6.2

package/ChartsXAxis/ChartsXAxis.js

@@ -113,27 +113,23 @@ const defaultProps = {
  * - [ChartsXAxis API](https://mui.com/x/api/charts/charts-x-axis/)
  */
 function ChartsXAxis(inProps) {
-  const props = (0, _styles.useThemeProps)({
-    props: (0, _extends2.default)({}, defaultProps, inProps),
-    name: 'MuiChartsXAxis'
-  });
   const {
-    xAxisIds
+    xAxisIds,
+    xAxis
   } = React.useContext(_CartesianContextProvider.CartesianContext);
-  const _React$useContext = React.useContext(_CartesianContextProvider.CartesianContext),
-    _ref = props.axisId ?? xAxisIds[0],
+  const _xAxis = xAxis[inProps.axisId ?? xAxisIds[0]],
     {
-      xAxis: {
-        [_ref]: {
-          scale: xScale,
-          tickNumber,
-          reverse
-        }
-      }
-    } = _React$useContext,
-    settings = (0, _objectWithoutPropertiesLoose2.default)(_React$useContext.xAxis[_ref], _excluded);
+      scale: xScale,
+      tickNumber,
+      reverse
+    } = _xAxis,
+    settings = (0, _objectWithoutPropertiesLoose2.default)(_xAxis, _excluded);
   const isMounted = (0, _useMounted.useMounted)();
-  const defaultizedProps = (0, _extends2.default)({}, defaultProps, settings, props);
+  const themedProps = (0, _styles.useThemeProps)({
+    props: (0, _extends2.default)({}, settings, inProps),
+    name: 'MuiChartsXAxis'
+  });
+  const defaultizedProps = (0, _extends2.default)({}, defaultProps, themedProps);
   const {
     position,
     disableLine,
@@ -323,10 +319,12 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    */
   tickFontSize: _propTypes.default.number,
   /**
-   * Defines which ticks are displayed. Its value can be:
+   * Defines which ticks are displayed.
+   * Its value can be:
    * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
-   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has a data property.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
    * - an array containing the values where ticks should be displayed.
+   * @see See {@link https://mui.com/x/react-charts/axis/#fixed-tick-positions}
    * @default 'auto'
    */
   tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),

package/ChartsYAxis/ChartsYAxis.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsYAxis = ChartsYAxis;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 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 _utils = require("@mui/base/utils");
@@ -56,25 +56,21 @@ const defaultProps = {
  * - [ChartsYAxis API](https://mui.com/x/api/charts/charts-y-axis/)
  */
 function ChartsYAxis(inProps) {
-  const props = (0, _styles.useThemeProps)({
-    props: (0, _extends2.default)({}, defaultProps, inProps),
-    name: 'MuiChartsYAxis'
-  });
   const {
-    yAxisIds
+    yAxisIds,
+    yAxis
   } = React.useContext(_CartesianContextProvider.CartesianContext);
-  const _React$useContext = React.useContext(_CartesianContextProvider.CartesianContext),
-    _ref = props.axisId ?? yAxisIds[0],
+  const _yAxis = yAxis[inProps.axisId ?? yAxisIds[0]],
     {
-      yAxis: {
-        [_ref]: {
-          scale: yScale,
-          tickNumber
-        }
-      }
-    } = _React$useContext,
-    settings = (0, _objectWithoutPropertiesLoose2.default)(_React$useContext.yAxis[_ref], _excluded);
-  const defaultizedProps = (0, _extends2.default)({}, defaultProps, settings, props);
+      scale: yScale,
+      tickNumber
+    } = _yAxis,
+    settings = (0, _objectWithoutPropertiesLoose2.default)(_yAxis, _excluded);
+  const themedProps = (0, _styles.useThemeProps)({
+    props: (0, _extends2.default)({}, settings, inProps),
+    name: 'MuiChartsYAxis'
+  });
+  const defaultizedProps = (0, _extends2.default)({}, defaultProps, themedProps);
   const {
     position,
     disableLine,
@@ -259,10 +255,12 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    */
   tickFontSize: _propTypes.default.number,
   /**
-   * Defines which ticks are displayed. Its value can be:
+   * Defines which ticks are displayed.
+   * Its value can be:
    * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
-   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has a data property.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
    * - an array containing the values where ticks should be displayed.
+   * @see See {@link https://mui.com/x/react-charts/axis/#fixed-tick-positions}
    * @default 'auto'
    */
   tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),

package/LineChart/AreaPlot.js

@@ -10,19 +10,19 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _d3Shape = require("d3-shape");
-var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _AreaElement = require("./AreaElement");
 var _useScale = require("../hooks/useScale");
 var _getCurve = _interopRequireDefault(require("../internals/getCurve"));
 var _constants = require("../constants");
 var _ChartsAxesGradients = require("../internals/components/ChartsAxesGradients");
+var _useSeries = require("../hooks/useSeries");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "onItemClick", "skipAnimation"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 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 useAggregatedData = () => {
-  const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).line;
+  const seriesData = (0, _useSeries.useLineSeries)();
   const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
   if (seriesData === undefined) {
     return [];

package/LineChart/LineChart.d.ts

@@ -18,7 +18,7 @@ export interface LineChartSlots extends ChartsAxisSlots, AreaPlotSlots, LinePlot
 }
 export interface LineChartSlotProps extends ChartsAxisSlotProps, AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps, ChartsOverlaySlotProps {
 }
-export interface LineChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, ChartsOnAxisClickHandlerProps {
+export interface LineChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'plugins'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, ChartsOnAxisClickHandlerProps {
     /**
      * The series to display in the line chart.
      * An array of [[LineSeriesType]] objects.

package/LineChart/LineChart.js

@@ -357,7 +357,7 @@ process.env.NODE_ENV !== "production" ? LineChart.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,
@@ -410,7 +410,7 @@ process.env.NODE_ENV !== "production" ? LineChart.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/LineChart/LineHighlightPlot.js

@@ -9,13 +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 _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _LineHighlightElement = require("./LineHighlightElement");
 var _useScale = require("../hooks/useScale");
 var _InteractionProvider = require("../context/InteractionProvider");
 var _constants = require("../constants");
 var _getColor = _interopRequireDefault(require("./getColor"));
+var _useSeries = require("../hooks/useSeries");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -36,7 +36,7 @@ function LineHighlightPlot(props) {
       slotProps
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).line;
+  const seriesData = (0, _useSeries.useLineSeries)();
   const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
   const {
     axis

package/LineChart/LinePlot.js

@@ -10,19 +10,19 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _d3Shape = require("d3-shape");
-var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _LineElement = require("./LineElement");
 var _useScale = require("../hooks/useScale");
 var _getCurve = _interopRequireDefault(require("../internals/getCurve"));
 var _constants = require("../constants");
 var _ChartsAxesGradients = require("../internals/components/ChartsAxesGradients");
+var _useSeries = require("../hooks/useSeries");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 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 useAggregatedData = () => {
-  const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).line;
+  const seriesData = (0, _useSeries.useLineSeries)();
   const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
   if (seriesData === undefined) {
     return [];

package/LineChart/MarkPlot.js

@@ -9,7 +9,6 @@ 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 _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _MarkElement = require("./MarkElement");
 var _useScale = require("../hooks/useScale");
@@ -17,6 +16,7 @@ var _useChartId = require("../hooks/useChartId");
 var _constants = require("../constants");
 var _utils = require("../internals/utils");
 var _getColor = _interopRequireDefault(require("./getColor"));
+var _useSeries = require("../hooks/useSeries");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -39,7 +39,7 @@ function MarkPlot(props) {
       onItemClick
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).line;
+  const seriesData = (0, _useSeries.useLineSeries)();
   const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
   const chartId = (0, _useChartId.useChartId)();
   const Mark = slots?.mark ?? _MarkElement.MarkElement;

package/LineChart/formatter.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _d3Shape = require("d3-shape");
 var _stackSeries = require("../internals/stackSeries");
-var _defaultizeValueFormatter = _interopRequireDefault(require("../internals/defaultizeValueFormatter"));
+var _defaultizeValueFormatter = require("../internals/defaultizeValueFormatter");
 let warnedOnce = false;
 
 // For now it's a copy past of bar charts formatter, but maybe will diverge later
@@ -76,7 +76,7 @@ const formatter = (params, dataset) => {
   return {
     seriesOrder,
     stackingGroups,
-    series: (0, _defaultizeValueFormatter.default)(completedSeries, v => v == null ? '' : v.toLocaleString())
+    series: (0, _defaultizeValueFormatter.defaultizeValueFormatter)(completedSeries, v => v == null ? '' : v.toLocaleString())
   };
 };
 var _default = exports.default = formatter;

package/LineChart/getColor.d.ts

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

package/LineChart/getColor.js

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

package/LineChart/plugin.d.ts

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

package/LineChart/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: 'line',
+  colorProcessor: _getColor.default,
+  seriesFormatter: _formatter.default,
+  xExtremumGetter: _extremums.getExtremumX,
+  yExtremumGetter: _extremums.getExtremumY
+};

package/PieChart/PieChart.d.ts

@@ -14,7 +14,7 @@ export interface PieChartSlots extends ChartsAxisSlots, PiePlotSlots, ChartsLege
 }
 export interface PieChartSlotProps extends ChartsAxisSlotProps, PiePlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps, ChartsOverlaySlotProps {
 }
-export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'leftAxis' | 'bottomAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
+export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'leftAxis' | 'bottomAxis' | 'plugins'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
     /**
      * Indicate which axis to display the bottom of the charts.
      * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.

package/PieChart/PieChart.js

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

@@ -108,6 +108,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 +166,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 +219,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,

package/ScatterChart/ScatterChart.d.ts

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

@@ -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, ScaleName } from '../models/axis';
 import { MakeOptional } from '../models/helpers';
 import { LineSeriesType } from '../models/seriesType/line';
 import { CardinalDirections } from '../models/layout';
@@ -15,12 +15,12 @@ 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' | 'margin' | 'plugins'> {
     /**
      * The xAxis configuration.
      * Notice it is a single configuration object, not an array of configuration.
      */
-    xAxis?: MakeOptional<AxisConfig, 'id'>;
+    xAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsXAxisProps>, 'id'>;
     tooltip?: ChartsTooltipProps;
     axisHighlight?: ChartsAxisHighlightProps;
     /**

package/SparkLineChart/SparkLineChart.js

@@ -274,7 +274,7 @@ 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,

package/context/CartesianContextProvider.d.ts

@@ -1,42 +1,45 @@
 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;
     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.
      */