@mui/x-charts 8.7.0 → 8.9.0

package/esm/BarChart/seriesConfig/seriesProcessor.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { stack as d3Stack } from '@mui/x-charts-vendor/d3-shape';
 import { warnOnce } from '@mui/x-internals/warning';
 import { getStackingGroups } from "../../internals/stackSeries.js";
-import { defaultizeValueFormatter } from "../../internals/defaultizeValueFormatter.js";
+const barValueFormatter = v => v == null ? '' : v.toLocaleString();
 const seriesProcessor = (params, dataset) => {
   const {
     seriesOrder,
@@ -46,7 +46,9 @@ const seriesProcessor = (params, dataset) => {
       const dataKey = series[id].dataKey;
       completedSeries[id] = _extends({
         layout: 'vertical',
-        labelMarkType: 'square'
+        labelMarkType: 'square',
+        minBarSize: 0,
+        valueFormatter: series[id].valueFormatter ?? barValueFormatter
       }, series[id], {
         data: dataKey ? dataset.map(data => {
           const value = data[dataKey];
@@ -67,7 +69,7 @@ const seriesProcessor = (params, dataset) => {
   return {
     seriesOrder,
     stackingGroups,
-    series: defaultizeValueFormatter(completedSeries, v => v == null ? '' : v.toLocaleString())
+    series: completedSeries
   };
 };
 export default seriesProcessor;

package/esm/BarChart/useBarPlotData.js

@@ -47,7 +47,8 @@ export function useBarPlotData(drawingArea, xAxes, yAxes) {
       const {
         stackedData,
         data: currentSeriesData,
-        layout
+        layout,
+        minBarSize
       } = series[seriesId];
       const seriesDataPoints = baseScaleConfig.data.map((baseValue, dataIndex) => {
         if (currentSeriesData[dataIndex] == null) {
@@ -58,16 +59,20 @@ export function useBarPlotData(drawingArea, xAxes, yAxes) {
         const minValueCoord = Math.round(Math.min(...valueCoordinates));
         const maxValueCoord = Math.round(Math.max(...valueCoordinates));
         const stackId = series[seriesId].stack;
+        const {
+          barSize,
+          startCoordinate
+        } = getValueCoordinate(verticalLayout, minValueCoord, maxValueCoord, currentSeriesData[dataIndex], minBarSize);
         const result = {
           seriesId,
           dataIndex,
           layout,
-          x: verticalLayout ? xScale(baseValue) + barOffset : minValueCoord,
-          y: verticalLayout ? minValueCoord : yScale(baseValue) + barOffset,
+          x: verticalLayout ? xScale(baseValue) + barOffset : startCoordinate,
+          y: verticalLayout ? startCoordinate : yScale(baseValue) + barOffset,
           xOrigin: xScale(0) ?? 0,
           yOrigin: yScale(0) ?? 0,
-          height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,
-          width: verticalLayout ? barWidth : maxValueCoord - minValueCoord,
+          height: verticalLayout ? barSize : barWidth,
+          width: verticalLayout ? barWidth : barSize,
           color: colorGetter(dataIndex),
           value: currentSeriesData[dataIndex],
           maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
@@ -136,4 +141,26 @@ function getBandSize({
     barWidth,
     offset
   };
+}
+function getValueCoordinate(isVertical, minValueCoord, maxValueCoord, baseValue, minBarSize) {
+  if (baseValue === 0 || baseValue == null) {
+    return {
+      barSize: 0,
+      startCoordinate: minValueCoord
+    };
+  }
+  const isSizeLessThanMin = maxValueCoord - minValueCoord < minBarSize;
+  const barSize = isSizeLessThanMin ? minBarSize : maxValueCoord - minValueCoord;
+  const isVerticalAndPositive = isVertical && baseValue >= 0;
+  const isHorizontalAndNegative = !isVertical && baseValue < 0;
+  if (isSizeLessThanMin && (isVerticalAndPositive || isHorizontalAndNegative)) {
+    return {
+      barSize,
+      startCoordinate: maxValueCoord - barSize
+    };
+  }
+  return {
+    barSize,
+    startCoordinate: minValueCoord
+  };
 }

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/ChartsLabel/ChartsLabelMark.d.ts

@@ -6,12 +6,13 @@ export interface ChartsLabelCustomMarkProps {
   /** Color of the series this mark refers to. */
   color?: string;
 }
+export type ChartsLabelMarkType = 'square' | 'circle' | 'line' | React.ComponentType<ChartsLabelCustomMarkProps>;
 export interface ChartsLabelMarkProps {
   /**
    * The type of the mark.
    * @default 'square'
    */
-  type?: 'square' | 'circle' | 'line' | React.ComponentType<ChartsLabelCustomMarkProps>;
+  type?: ChartsLabelMarkType;
   /**
    * The color of the mark.
    */

package/esm/ChartsLabel/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./ChartsLabel.js";
 export type { ChartsLabelMarkProps, ChartsLabelCustomMarkProps } from "./ChartsLabelMark.js";
 export { ChartsLabelMark } from "./ChartsLabelMark.js";
 export { labelClasses } from "./labelClasses.js";

package/esm/ChartsLabel/index.js

@@ -1,3 +1,4 @@
+export * from "./ChartsLabel.js";
 export { ChartsLabelMark } from "./ChartsLabelMark.js";
 export { labelClasses } from "./labelClasses.js";
 export { labelMarkClasses } from "./labelMarkClasses.js";

package/esm/ChartsLegend/chartsLegendClasses.d.ts

@@ -16,5 +16,5 @@ export interface ChartsLegendClasses {
   /** Styles applied to the legend in row layout. */
   horizontal: string;
 }
-export declare const useUtilityClasses: (props: ChartsLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "item" | "series", string>;
+export declare const useUtilityClasses: (props: ChartsLegendProps & ChartsLegendSlotExtension) => Record<"item" | "series" | "root" | "label" | "mark", string>;
 export declare const legendClasses: ChartsLegendClasses;

package/esm/ChartsLegend/piecewiseColorLegendClasses.d.ts

@@ -24,5 +24,5 @@ export interface PiecewiseColorLegendClasses {
   /** Styles applied to the series label. */
   label: string;
 }
-export declare const useUtilityClasses: (props: PiecewiseColorLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "item" | "minLabel" | "maxLabel", string>;
+export declare const useUtilityClasses: (props: PiecewiseColorLegendProps & ChartsLegendSlotExtension) => Record<"item" | "root" | "label" | "mark" | "minLabel" | "maxLabel", string>;
 export declare const piecewiseColorLegendClasses: PiecewiseColorLegendClasses;

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.d.ts

@@ -18,12 +18,13 @@ import { LineChartPluginsSignatures } from "./LineChart.plugins.js";
 import { ChartsToolbarSlots, ChartsToolbarSlotProps } from "../Toolbar/index.js";
 export interface LineChartSlots extends ChartsAxisSlots, AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface LineChartSlotProps extends ChartsAxisSlotProps, AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
+export type LineSeries = MakeOptional<LineSeriesType, 'type'>;
 export interface LineChartProps extends Omit<ChartContainerProps<'line', LineChartPluginsSignatures>, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The series to display in the line chart.
-   * An array of [[LineSeriesType]] objects.
+   * An array of [[LineSeries]] objects.
    */
-  series: Readonly<MakeOptional<LineSeriesType, 'type'>[]>;
+  series: Readonly<LineSeries[]>;
   /**
    * Option to display a cartesian grid in the background.
    */

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.
    */
@@ -187,7 +209,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   onMarkClick: PropTypes.func,
   /**
    * The series to display in the line chart.
-   * An array of [[LineSeriesType]] objects.
+   * An array of [[LineSeries]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**

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;