@mui/x-charts 8.7.0 → 8.8.0

package/ScatterChart/seriesConfig/seriesProcessor.js

@@ -28,6 +28,9 @@ const seriesProcessor = ({
       labelMarkType: 'circle',
       markerSize: 4
     }, seriesData, {
+      preview: (0, _extends2.default)({
+        markerSize: 1
+      }, seriesData?.preview),
       data,
       valueFormatter: seriesData.valueFormatter ?? (v => v && `(${v.x}, ${v.y})`)
     })];

package/SparkLineChart/SparkLineChart.d.ts

@@ -13,7 +13,7 @@ import { BarPlotSlots, BarPlotSlotProps } from "../BarChart/BarPlot.js";
 import { ChartMargin } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.js";
 export interface SparkLineChartSlots extends AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, Omit<BarPlotSlots, 'barLabel'>, ChartsTooltipSlots {}
 export interface SparkLineChartSlotProps extends AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, BarPlotSlotProps, ChartsTooltipSlotProps {}
-export interface SparkLineChartProps extends Omit<ChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'radiusAxis' | 'rotationAxis' | 'margin' | 'plugins' | 'colors' | 'slots' | 'slotProps'> {
+export interface SparkLineChartProps extends Omit<ChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'radiusAxis' | 'rotationAxis' | 'margin' | 'plugins' | 'colors' | 'slots' | 'slotProps' | 'experimentalFeatures'> {
   /**
    * The xAxis configuration.
    * Notice it is a single [[AxisConfig]] object, not an array of configuration.

package/SparkLineChart/SparkLineChart.js

@@ -213,6 +213,14 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: _propTypes.default.number,
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    dataIndex: _propTypes.default.number.isRequired
+  })),
   /**
    * The highlighted item.
    * Used when the highlight is controlled.
@@ -256,6 +264,14 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: _propTypes.default.func,
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   * @param {AxisItemIdentifier[]} axisItems The array of axes item identifiers.
+   */
+  onHighlightedAxisChange: _propTypes.default.func,
   /**
    * Callback fired when clicking close to an item.
    * This is only available for scatter plot for now.

package/esm/BarChart/BarChart.d.ts

@@ -15,7 +15,7 @@ import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "
 import { BarChartPluginsSignatures } from "./BarChart.plugins.js";
 export interface BarChartSlots extends ChartsAxisSlots, BarPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface BarChartSlotProps extends ChartsAxisSlotProps, BarPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
-export interface BarChartProps extends Omit<ChartContainerProps<'bar', BarChartPluginsSignatures>, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<BarPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
+export interface BarChartProps extends Omit<ChartContainerProps<'bar', BarChartPluginsSignatures>, 'series' | 'plugins' | 'zAxis' | 'experimentalFeatures'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<BarPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The series to display in the bar chart.
    * An array of [[BarSeriesType]] objects.

package/esm/BarChart/BarChart.js

@@ -127,6 +127,14 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * If `true`, the legend is not rendered.
    */
   hideLegend: PropTypes.bool,
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    dataIndex: PropTypes.number.isRequired
+  })),
   /**
    * The highlighted item.
    * Used when the highlight is controlled.
@@ -179,6 +187,14 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: PropTypes.func,
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   * @param {AxisItemIdentifier[]} axisItems The array of axes item identifiers.
+   */
+  onHighlightedAxisChange: PropTypes.func,
   /**
    * Callback fired when a bar item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/esm/ChartContainer/ChartContainer.js

@@ -76,10 +76,24 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    * If true, the voronoi interaction are ignored.
    */
   disableVoronoi: PropTypes.bool,
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: PropTypes.shape({
+    preferStrictDomainInLineCharts: PropTypes.bool
+  }),
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: PropTypes.number,
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    dataIndex: PropTypes.number.isRequired
+  })),
   /**
    * The highlighted item.
    * Used when the highlight is controlled.
@@ -122,6 +136,14 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: PropTypes.func,
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   * @param {AxisItemIdentifier[]} axisItems The array of axes item identifiers.
+   */
+  onHighlightedAxisChange: PropTypes.func,
   /**
    * Callback fired when clicking close to an item.
    * This is only available for scatter plot for now.

package/esm/ChartContainer/useChartContainerProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "disableVoronoi", "voronoiMaxRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "plugins", "localeText", "slots", "slotProps"];
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "disableVoronoi", "voronoiMaxRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "plugins", "localeText", "slots", "slotProps", "experimentalFeatures"];
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 export const useChartContainerProps = (props, ref) => {
   const _ref = props,
@@ -16,6 +16,8 @@ export const useChartContainerProps = (props, ref) => {
       dataset,
       desc,
       onAxisClick,
+      highlightedAxis,
+      onHighlightedAxisChange,
       disableVoronoi,
       voronoiMaxRadius,
       onItemClick,
@@ -34,7 +36,8 @@ export const useChartContainerProps = (props, ref) => {
       plugins,
       localeText,
       slots,
-      slotProps
+      slotProps,
+      experimentalFeatures
     } = _ref,
     other = _objectWithoutPropertiesLoose(_ref, _excluded);
   const chartsSurfaceProps = _extends({
@@ -52,6 +55,8 @@ export const useChartContainerProps = (props, ref) => {
     highlightedItem,
     onHighlightChange,
     onAxisClick,
+    highlightedAxis,
+    onHighlightedAxisChange,
     disableVoronoi,
     voronoiMaxRadius,
     onItemClick,
@@ -65,6 +70,7 @@ export const useChartContainerProps = (props, ref) => {
     height,
     localeText,
     seriesConfig,
+    experimentalFeatures,
     plugins: plugins ?? DEFAULT_PLUGINS,
     slots,
     slotProps

package/esm/ChartDataProvider/ChartDataProvider.js

@@ -73,6 +73,12 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
    */
   dataset: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: PropTypes.shape({
+    preferStrictDomainInLineCharts: PropTypes.bool
+  }),
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/esm/ChartDataProvider/useChartDataProviderProps.d.ts

@@ -4,7 +4,7 @@ import { ChartAnyPluginSignature } from "../internals/plugins/models/index.js";
 import { ChartSeriesType } from "../models/seriesType/config.js";
 import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 import { ChartsLocalizationProviderProps } from "../ChartsLocalizationProvider/index.js";
-export declare const useChartDataProviderProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartDataProviderProps<TSeries, TSignatures> & ChartsLocalizationProviderProps) => {
+export declare const useChartDataProviderProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(inProps: ChartDataProviderProps<TSeries, TSignatures> & ChartsLocalizationProviderProps) => {
   children: import("react").ReactNode;
   localeText: Partial<import("../locales/index.js").ChartsLocaleText> | undefined;
   chartProviderProps: ChartProviderProps<TSeries, TSignatures>;

package/esm/ChartDataProvider/useChartDataProviderProps.js

@@ -3,9 +3,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["children", "localeText", "plugins", "seriesConfig", "slots", "slotProps"];
-import { useTheme } from '@mui/material/styles';
+import { useTheme, useThemeProps } from '@mui/material/styles';
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
-export const useChartDataProviderProps = props => {
+export const useChartDataProviderProps = inProps => {
+  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiChartDataProvider'
+  });
   const {
       children,
       localeText,

package/esm/ChartsAxisHighlight/ChartsXAxisHighlight.d.ts

@@ -7,4 +7,4 @@ import { ChartsAxisHighlightClasses } from "./chartsAxisHighlightClasses.js";
 export default function ChartsXHighlight(props: {
   type: ChartsAxisHighlightType;
   classes: ChartsAxisHighlightClasses;
-}): React.JSX.Element;
+}): React.JSX.Element[] | null;

package/esm/ChartsAxisHighlight/ChartsXAxisHighlight.js

@@ -1,11 +1,11 @@
 'use client';
 
 import * as React from 'react';
-import { getValueToPositionMapper, useXScale } from "../hooks/useScale.js";
+import { getValueToPositionMapper } from "../hooks/useScale.js";
 import { isBandScale } from "../internals/isBandScale.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
-import { selectorChartsInteractionXAxisValue } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { selectorChartsHighlightXAxisValue, selectorChartXAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { useDrawingArea } from "../hooks/index.js";
 import { ChartsAxisHighlightPath } from "./ChartsAxisHighlightPath.js";
 
@@ -22,32 +22,42 @@ export default function ChartsXHighlight(props) {
     top,
     height
   } = useDrawingArea();
-  const xScale = useXScale();
   const store = useStore();
-  const axisXValue = useSelector(store, selectorChartsInteractionXAxisValue);
-  const getXPosition = getValueToPositionMapper(xScale);
-  const isBandScaleX = type === 'band' && axisXValue !== null && isBandScale(xScale);
-  if (process.env.NODE_ENV !== 'production') {
-    const isError = isBandScaleX && xScale(axisXValue) === undefined;
-    if (isError) {
-      console.error([`MUI X Charts: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
-    }
+  const axisXValues = useSelector(store, selectorChartsHighlightXAxisValue);
+  const xAxes = useSelector(store, selectorChartXAxis);
+  if (axisXValues.length === 0) {
+    return null;
   }
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [isBandScaleX && xScale(axisXValue) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath
-    // @ts-expect-error, xScale value is checked in the statement above
-    , {
-      d: `M ${xScale(axisXValue) - (xScale.step() - xScale.bandwidth()) / 2} ${top} l ${xScale.step()} 0 l 0 ${height} l ${-xScale.step()} 0 Z`,
-      className: classes.root,
-      ownerState: {
-        axisHighlight: 'band'
-      }
-    }), type === 'line' && axisXValue !== null && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
-      d: `M ${getXPosition(axisXValue)} ${top} L ${getXPosition(axisXValue)} ${top + height}`,
-      className: classes.root,
-      ownerState: {
-        axisHighlight: 'line'
+  return axisXValues.map(({
+    axisId,
+    value
+  }) => {
+    const xAxis = xAxes.axis[axisId];
+    const xScale = xAxis.scale;
+    const getXPosition = getValueToPositionMapper(xScale);
+    const isBandScaleX = type === 'band' && value !== null && isBandScale(xScale);
+    if (process.env.NODE_ENV !== 'production') {
+      const isError = isBandScaleX && xScale(value) === undefined;
+      if (isError) {
+        console.error([`MUI X Charts: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
       }
-    })]
+    }
+    return /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [isBandScaleX && xScale(value) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath
+      // @ts-expect-error, xScale value is checked in the statement above
+      , {
+        d: `M ${xScale(value) - (xScale.step() - xScale.bandwidth()) / 2} ${top} l ${xScale.step()} 0 l 0 ${height} l ${-xScale.step()} 0 Z`,
+        className: classes.root,
+        ownerState: {
+          axisHighlight: 'band'
+        }
+      }), type === 'line' && value !== null && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
+        d: `M ${getXPosition(value)} ${top} L ${getXPosition(value)} ${top + height}`,
+        className: classes.root,
+        ownerState: {
+          axisHighlight: 'line'
+        }
+      })]
+    }, `${axisId}-${value}`);
   });
 }

package/esm/ChartsAxisHighlight/ChartsYAxisHighlight.d.ts

@@ -7,4 +7,4 @@ import { ChartsAxisHighlightClasses } from "./chartsAxisHighlightClasses.js";
 export default function ChartsYHighlight(props: {
   type: ChartsAxisHighlightType;
   classes: ChartsAxisHighlightClasses;
-}): React.JSX.Element;
+}): React.JSX.Element[] | null;

package/esm/ChartsAxisHighlight/ChartsYAxisHighlight.js

@@ -1,11 +1,11 @@
 'use client';
 
 import * as React from 'react';
-import { getValueToPositionMapper, useYScale } from "../hooks/useScale.js";
+import { getValueToPositionMapper } from "../hooks/useScale.js";
 import { isBandScale } from "../internals/isBandScale.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
-import { selectorChartsInteractionYAxisValue } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { selectorChartsHighlightYAxisValue, selectorChartYAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { useDrawingArea } from "../hooks/index.js";
 import { ChartsAxisHighlightPath } from "./ChartsAxisHighlightPath.js";
 
@@ -22,32 +22,42 @@ export default function ChartsYHighlight(props) {
     left,
     width
   } = useDrawingArea();
-  const yScale = useYScale();
   const store = useStore();
-  const axisYValue = useSelector(store, selectorChartsInteractionYAxisValue);
-  const getYPosition = getValueToPositionMapper(yScale);
-  const isBandScaleY = type === 'band' && axisYValue !== null && isBandScale(yScale);
-  if (process.env.NODE_ENV !== 'production') {
-    const isError = isBandScaleY && yScale(axisYValue) === undefined;
-    if (isError) {
-      console.error([`MUI X Charts: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
-    }
+  const axisYValues = useSelector(store, selectorChartsHighlightYAxisValue);
+  const yAxes = useSelector(store, selectorChartYAxis);
+  if (axisYValues.length === 0) {
+    return null;
   }
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [isBandScaleY && yScale(axisYValue) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
-      d: `M ${left} ${
-      // @ts-expect-error, yScale value is checked in the statement above
-      yScale(axisYValue) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${width} 0 l 0 ${-yScale.step()} Z`,
-      className: classes.root,
-      ownerState: {
-        axisHighlight: 'band'
-      }
-    }), type === 'line' && axisYValue !== null && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
-      d: `M ${left} ${getYPosition(axisYValue)} L ${left + width} ${getYPosition(axisYValue)}`,
-      className: classes.root,
-      ownerState: {
-        axisHighlight: 'line'
+  return axisYValues.map(({
+    axisId,
+    value
+  }) => {
+    const yAxis = yAxes.axis[axisId];
+    const yScale = yAxis.scale;
+    const getYPosition = getValueToPositionMapper(yScale);
+    const isBandScaleY = type === 'band' && value !== null && isBandScale(yScale);
+    if (process.env.NODE_ENV !== 'production') {
+      const isError = isBandScaleY && yScale(value) === undefined;
+      if (isError) {
+        console.error([`MUI X Charts: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
       }
-    })]
+    }
+    return /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [isBandScaleY && yScale(value) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
+        d: `M ${left} ${
+        // @ts-expect-error, yScale value is checked in the statement above
+        yScale(value) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${width} 0 l 0 ${-yScale.step()} Z`,
+        className: classes.root,
+        ownerState: {
+          axisHighlight: 'band'
+        }
+      }), type === 'line' && value !== null && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
+        d: `M ${left} ${getYPosition(value)} L ${left + width} ${getYPosition(value)}`,
+        className: classes.root,
+        ownerState: {
+          axisHighlight: 'line'
+        }
+      })]
+    }, `${axisId}-${value}`);
   });
 }

package/esm/Gauge/GaugeContainer.d.ts

@@ -3,7 +3,7 @@ import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
 import { GaugeProviderProps } from "./GaugeProvider.js";
 import { MergeSignaturesProperty } from "../internals/plugins/models/index.js";
 import { ChartCorePluginSignatures } from "../internals/plugins/corePlugins/index.js";
-export interface GaugeContainerProps extends Omit<ChartsSurfaceProps, 'children'>, Omit<MergeSignaturesProperty<ChartCorePluginSignatures, 'params'>, 'series' | 'dataset' | 'colors' | 'theme'>, Omit<GaugeProviderProps, 'children'>, Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {
+export interface GaugeContainerProps extends Omit<ChartsSurfaceProps, 'children'>, Omit<MergeSignaturesProperty<ChartCorePluginSignatures, 'params'>, 'series' | 'dataset' | 'colors' | 'theme' | 'experimentalFeatures'>, Omit<GaugeProviderProps, 'children'>, Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {
   children?: React.ReactNode;
 }
 declare const GaugeContainer: React.ForwardRefExoticComponent<Omit<GaugeContainerProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/esm/LineChart/LineChart.js

@@ -111,6 +111,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: PropTypes.bool,
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: PropTypes.shape({
+    preferStrictDomainInLineCharts: PropTypes.bool
+  }),
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -126,6 +132,14 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If `true`, the legend is not rendered.
    */
   hideLegend: PropTypes.bool,
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis: PropTypes.arrayOf(PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    dataIndex: PropTypes.number.isRequired
+  })),
   /**
    * The highlighted item.
    * Used when the highlight is controlled.
@@ -177,6 +191,14 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: PropTypes.func,
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   * @param {AxisItemIdentifier[]} axisItems The array of axes item identifiers.
+   */
+  onHighlightedAxisChange: PropTypes.func,
   /**
    * Callback fired when a line element is clicked.
    */

package/esm/LineChart/LineHighlightPlot.js

@@ -13,7 +13,7 @@ import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 import { useLineSeriesContext } from "../hooks/useLineSeries.js";
 import getColor from "./seriesConfig/getColor.js";
 import { useChartContext } from "../context/ChartProvider/index.js";
-import { selectorChartsInteractionXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { selectorChartsHighlightXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { useXAxes, useYAxes } from "../hooks/useAxis.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -45,8 +45,8 @@ function LineHighlightPlot(props) {
     instance
   } = useChartContext();
   const store = useStore();
-  const highlightedIndex = useSelector(store, selectorChartsInteractionXAxisIndex);
-  if (highlightedIndex === null) {
+  const highlightedIndexes = useSelector(store, selectorChartsHighlightXAxisIndex);
+  if (highlightedIndexes.length === 0) {
     return null;
   }
   if (seriesData === undefined) {
@@ -60,7 +60,10 @@ function LineHighlightPlot(props) {
   const defaultYAxisId = yAxisIds[0];
   const Element = slots?.lineHighlight ?? LineHighlightElement;
   return /*#__PURE__*/_jsx("g", _extends({}, other, {
-    children: stackingGroups.flatMap(({
+    children: highlightedIndexes.flatMap(({
+      dataIndex: highlightedIndex,
+      axisId: highlightedAxisId
+    }) => stackingGroups.flatMap(({
       ids: groupIds
     }) => {
       return groupIds.flatMap(seriesId => {
@@ -75,6 +78,9 @@ function LineHighlightPlot(props) {
         if (disableHighlight || data[highlightedIndex] == null) {
           return null;
         }
+        if (highlightedAxisId !== xAxisId) {
+          return null;
+        }
         const xScale = getValueToPositionMapper(xAxis[xAxisId].scale);
         const yScale = yAxis[yAxisId].scale;
         const xData = xAxis[xAxisId].data;
@@ -96,7 +102,7 @@ function LineHighlightPlot(props) {
           shape: shape
         }, slotProps?.lineHighlight), `${seriesId}`);
       });
-    })
+    }))
   }));
 }
 process.env.NODE_ENV !== "production" ? LineHighlightPlot.propTypes = {

package/esm/LineChart/MarkPlot.js

@@ -5,7 +5,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import { selectorChartsInteractionXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors.js";
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
 import { useChartId } from "../hooks/useChartId.js";
@@ -18,6 +17,7 @@ import { MarkElement } from "./MarkElement.js";
 import { useChartContext } from "../context/ChartProvider/index.js";
 import { useItemHighlightedGetter, useXAxes, useYAxes } from "../hooks/index.js";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.js";
+import { selectorChartsHighlightXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -58,7 +58,21 @@ function MarkPlot(props) {
     isFaded,
     isHighlighted
   } = useItemHighlightedGetter();
-  const xAxisInteractionIndex = useSelector(store, selectorChartsInteractionXAxisIndex);
+  const xAxisHighlightIndexes = useSelector(store, selectorChartsHighlightXAxisIndex);
+  const highlightedItems = React.useMemo(() => {
+    const rep = {};
+    for (const {
+      dataIndex,
+      axisId
+    } of xAxisHighlightIndexes) {
+      if (rep[axisId] === undefined) {
+        rep[axisId] = new Set([dataIndex]);
+      } else {
+        rep[axisId].add(dataIndex);
+      }
+    }
+    return rep;
+  }, [xAxisHighlightIndexes]);
   if (seriesData === undefined) {
     return null;
   }
@@ -156,7 +170,7 @@ function MarkPlot(props) {
                 seriesId,
                 dataIndex: index
               })),
-              isHighlighted: xAxisInteractionIndex === index || isSeriesHighlighted,
+              isHighlighted: highlightedItems[xAxisId]?.has(index) || isSeriesHighlighted,
               isFaded: isSeriesFaded
             }, slotProps?.mark), `${seriesId}-${index}`);
           })

package/esm/LineChart/useAreaPlotData.js

@@ -33,9 +33,10 @@ export function useAreaPlotData(xAxes, yAxes) {
           connectNulls,
           baseline,
           curve,
-          strictStepCurve
+          strictStepCurve,
+          area
         } = series[seriesId];
-        if (!(xAxisId in xAxes) || !(yAxisId in yAxes)) {
+        if (!area || !(xAxisId in xAxes) || !(yAxisId in yAxes)) {
           continue;
         }
         const xScale = xAxes[xAxisId].scale;

package/esm/PieChart/PieChart.d.ts

@@ -12,7 +12,7 @@ import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "
 import { PieChartPluginSignatures } from "./PieChart.plugins.js";
 export interface PieChartSlots extends PiePlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface PieChartSlotProps extends PiePlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
-export interface PieChartProps extends Omit<ChartContainerProps<'pie', PieChartPluginSignatures>, 'series' | 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
+export interface PieChartProps extends Omit<ChartContainerProps<'pie', PieChartPluginSignatures>, 'series' | 'slots' | 'slotProps' | 'experimentalFeatures'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
   /**
    * The series to display in the pie chart.
    * An array of [[PieSeriesType]] objects.

package/esm/RadarChart/RadarDataProvider/RadarDataProvider.d.ts

@@ -5,7 +5,7 @@ import { RadarSeriesType } from "../../models/seriesType/radar.js";
 import { ChartDataProviderProps } from "../../ChartDataProvider/index.js";
 import { RadarConfig } from "./radar.types.js";
 import { ChartAnyPluginSignature } from "../../internals/plugins/models/plugin.js";
-export type RadarDataProviderProps<TSignatures extends readonly ChartAnyPluginSignature[] = RadarChartPluginsSignatures> = Omit<ChartDataProviderProps<'radar', TSignatures>, 'series' | 'rotationAxis' | 'radiusAxis' | 'dataset'> & {
+export type RadarDataProviderProps<TSignatures extends readonly ChartAnyPluginSignature[] = RadarChartPluginsSignatures> = Omit<ChartDataProviderProps<'radar', TSignatures>, 'series' | 'rotationAxis' | 'radiusAxis' | 'dataset' | 'experimentalFeatures'> & {
   /**
    * The series to display in the bar chart.
    * An array of [[RadarSeriesType]] objects.

package/esm/ScatterChart/ScatterChart.d.ts

@@ -16,7 +16,7 @@ import { UseChartVoronoiSignature } from "../internals/plugins/featurePlugins/us
 import { ScatterChartPluginsSignatures } from "./ScatterChart.plugins.js";
 export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
-export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', ScatterChartPluginsSignatures>, 'series' | 'plugins' | 'onItemClick'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
+export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', ScatterChartPluginsSignatures>, 'series' | 'plugins' | 'onItemClick' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The series to display in the scatter chart.
    * An array of [[ScatterSeriesType]] objects.

package/esm/ScatterChart/ScatterPlot.js

@@ -5,9 +5,9 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Scatter } from "./Scatter.js";
 import { useScatterSeriesContext } from "../hooks/useScatterSeries.js";
-import getColor from "./seriesConfig/getColor.js";
 import { useXAxes, useYAxes } from "../hooks/index.js";
 import { useZAxes } from "../hooks/useZAxis.js";
+import { seriesConfig as scatterSeriesConfig } from "./seriesConfig/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -58,7 +58,7 @@ function ScatterPlot(props) {
         zAxisId,
         color
       } = series[seriesId];
-      const colorGetter = getColor(series[seriesId], xAxis[xAxisId ?? defaultXAxisId], yAxis[yAxisId ?? defaultYAxisId], zAxis[zAxisId ?? defaultZAxisId]);
+      const colorGetter = scatterSeriesConfig.colorProcessor(series[seriesId], xAxis[xAxisId ?? defaultXAxisId], yAxis[yAxisId ?? defaultYAxisId], zAxis[zAxisId ?? defaultZAxisId]);
       const xScale = xAxis[xAxisId ?? defaultXAxisId].scale;
       const yScale = yAxis[yAxisId ?? defaultYAxisId].scale;
       return /*#__PURE__*/_jsx(ScatterItems, _extends({

package/esm/ScatterChart/seriesConfig/seriesProcessor.js

@@ -21,6 +21,9 @@ const seriesProcessor = ({
       labelMarkType: 'circle',
       markerSize: 4
     }, seriesData, {
+      preview: _extends({
+        markerSize: 1
+      }, seriesData?.preview),
       data,
       valueFormatter: seriesData.valueFormatter ?? (v => v && `(${v.x}, ${v.y})`)
     })];