@mui/x-charts 8.6.0 → 8.8.0

package/esm/BarChart/useBarPlotData.js

@@ -0,0 +1,139 @@
+import getColor from "./seriesConfig/getColor.js";
+import { useChartId, useXAxes, useYAxes } from "../hooks/index.js";
+import { checkScaleErrors } from "./checkScaleErrors.js";
+import { useBarSeriesContext } from "../hooks/useBarSeries.js";
+export function useBarPlotData(drawingArea, xAxes, yAxes) {
+  const seriesData = useBarSeriesContext() ?? {
+    series: {},
+    stackingGroups: [],
+    seriesOrder: []
+  };
+  const defaultXAxisId = useXAxes().xAxisIds[0];
+  const defaultYAxisId = useYAxes().yAxisIds[0];
+  const chartId = useChartId();
+  const {
+    series,
+    stackingGroups
+  } = seriesData;
+  const masks = {};
+  const data = stackingGroups.flatMap(({
+    ids: seriesIds
+  }, groupIndex) => {
+    const xMin = drawingArea.left;
+    const xMax = drawingArea.left + drawingArea.width;
+    const yMin = drawingArea.top;
+    const yMax = drawingArea.top + drawingArea.height;
+    return seriesIds.map(seriesId => {
+      const xAxisId = series[seriesId].xAxisId ?? defaultXAxisId;
+      const yAxisId = series[seriesId].yAxisId ?? defaultYAxisId;
+      const xAxisConfig = xAxes[xAxisId];
+      const yAxisConfig = yAxes[yAxisId];
+      const verticalLayout = series[seriesId].layout === 'vertical';
+      checkScaleErrors(verticalLayout, seriesId, series[seriesId], xAxisId, xAxes, yAxisId, yAxes);
+      const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
+      const xScale = xAxisConfig.scale;
+      const yScale = yAxisConfig.scale;
+      const colorGetter = getColor(series[seriesId], xAxes[xAxisId], yAxes[yAxisId]);
+      const bandWidth = baseScaleConfig.scale.bandwidth();
+      const {
+        barWidth,
+        offset
+      } = getBandSize({
+        bandWidth,
+        numberOfGroups: stackingGroups.length,
+        gapRatio: baseScaleConfig.barGapRatio
+      });
+      const barOffset = groupIndex * (barWidth + offset);
+      const {
+        stackedData,
+        data: currentSeriesData,
+        layout
+      } = series[seriesId];
+      const seriesDataPoints = baseScaleConfig.data.map((baseValue, dataIndex) => {
+        if (currentSeriesData[dataIndex] == null) {
+          return null;
+        }
+        const values = stackedData[dataIndex];
+        const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
+        const minValueCoord = Math.round(Math.min(...valueCoordinates));
+        const maxValueCoord = Math.round(Math.max(...valueCoordinates));
+        const stackId = series[seriesId].stack;
+        const result = {
+          seriesId,
+          dataIndex,
+          layout,
+          x: verticalLayout ? xScale(baseValue) + barOffset : minValueCoord,
+          y: verticalLayout ? minValueCoord : yScale(baseValue) + barOffset,
+          xOrigin: xScale(0) ?? 0,
+          yOrigin: yScale(0) ?? 0,
+          height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,
+          width: verticalLayout ? barWidth : maxValueCoord - minValueCoord,
+          color: colorGetter(dataIndex),
+          value: currentSeriesData[dataIndex],
+          maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
+        };
+        if (result.x > xMax || result.x + result.width < xMin || result.y > yMax || result.y + result.height < yMin) {
+          return null;
+        }
+        if (!masks[result.maskId]) {
+          masks[result.maskId] = {
+            id: result.maskId,
+            width: 0,
+            height: 0,
+            hasNegative: false,
+            hasPositive: false,
+            layout: result.layout,
+            xOrigin: xScale(0),
+            yOrigin: yScale(0),
+            x: 0,
+            y: 0
+          };
+        }
+        const mask = masks[result.maskId];
+        mask.width = result.layout === 'vertical' ? result.width : mask.width + result.width;
+        mask.height = result.layout === 'vertical' ? mask.height + result.height : result.height;
+        mask.x = Math.min(mask.x === 0 ? Infinity : mask.x, result.x);
+        mask.y = Math.min(mask.y === 0 ? Infinity : mask.y, result.y);
+        mask.hasNegative = mask.hasNegative || (result.value ?? 0) < 0;
+        mask.hasPositive = mask.hasPositive || (result.value ?? 0) > 0;
+        return result;
+      }).filter(rectangle => rectangle !== null);
+      return {
+        seriesId,
+        data: seriesDataPoints
+      };
+    });
+  });
+  return {
+    completedData: data,
+    masksData: Object.values(masks)
+  };
+}
+
+/**
+ * Solution of the equations
+ * W = barWidth * N + offset * (N-1)
+ * offset / (offset + barWidth) = r
+ * @param bandWidth The width available to place bars.
+ * @param numberOfGroups The number of bars to place in that space.
+ * @param gapRatio The ratio of the gap between bars over the bar width.
+ * @returns The bar width and the offset between bars.
+ */
+function getBandSize({
+  bandWidth: W,
+  numberOfGroups: N,
+  gapRatio: r
+}) {
+  if (r === 0) {
+    return {
+      barWidth: W / N,
+      offset: 0
+    };
+  }
+  const barWidth = W / (N + (N - 1) * r);
+  const offset = r * barWidth;
+  return {
+    barWidth,
+    offset
+  };
+}

package/esm/ChartContainer/ChartContainer.d.ts

@@ -1,30 +1,10 @@
 import * as React from 'react';
-import { PieChartPluginSignatures } from "../PieChart/PieChart.plugins.js";
-import { BarChartPluginsSignatures } from "../BarChart/BarChart.plugins.js";
-import { ScatterChartPluginsSignatures } from "../ScatterChart/ScatterChart.plugins.js";
-import { LineChartPluginsSignatures } from "../LineChart/LineChart.plugins.js";
 import { ChartSeriesType } from "../models/seriesType/config.js";
 import { ChartDataProviderProps } from "../ChartDataProvider/index.js";
 import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
-import { AllPluginSignatures, DefaultPluginSignatures } from "../internals/plugins/allPlugins.js";
+import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 import { ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
-import { ChartPublicAPI } from "../internals/plugins/models/index.js";
 export type ChartContainerProps<SeriesType extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<SeriesType>> = Omit<ChartDataProviderProps<SeriesType, TSignatures>, 'children'> & ChartsSurfaceProps;
-type PluginsPerSeriesType = {
-  line: LineChartPluginsSignatures;
-  scatter: ScatterChartPluginsSignatures;
-  bar: BarChartPluginsSignatures;
-  pie: PieChartPluginSignatures;
-  composition: DefaultPluginSignatures;
-};
-/**
- * The API of the chart `apiRef` object.
- * The chart type can be passed as the first generic parameter to narrow down the API to the specific chart type.
- * @example ChartApi<'bar'>
- * If the chart is being created using composition, the `composition` value can be used.
- * @example ChartApi<'composition'>
- */
-export type ChartApi<TSeries extends keyof PluginsPerSeriesType | undefined = undefined, TSignatures extends readonly ChartAnyPluginSignature[] = (TSeries extends keyof PluginsPerSeriesType ? PluginsPerSeriesType[TSeries] : AllPluginSignatures)> = ChartPublicAPI<TSignatures>;
 /**
  * It sets up the data providers as well as the `<svg>` for the chart.
  *

package/esm/ChartContainer/ChartContainer.js

@@ -6,14 +6,6 @@ import PropTypes from 'prop-types';
 import { ChartDataProvider } from "../ChartDataProvider/index.js";
 import { useChartContainerProps } from "./useChartContainerProps.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
-
-/**
- * The API of the chart `apiRef` object.
- * The chart type can be passed as the first generic parameter to narrow down the API to the specific chart type.
- * @example ChartApi<'bar'>
- * If the chart is being created using composition, the `composition` value can be used.
- * @example ChartApi<'composition'>
- */
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * It sets up the data providers as well as the `<svg>` for the chart.
@@ -84,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.
@@ -130,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/index.d.ts

@@ -1 +1,8 @@
-export * from "./ChartContainer.js";
+import type { ChartApi as ChartApiOriginal, PluginsPerSeriesType } from "../context/ChartApi.js";
+import type { ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
+import type { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
+export * from "./ChartContainer.js";
+/**
+ * @deprecated Use `ChartApi` from `@mui/x-charts/context` instead.
+ */
+export type ChartApi<TSeries extends keyof PluginsPerSeriesType | undefined = undefined, TSignatures extends readonly ChartAnyPluginSignature[] = (TSeries extends keyof PluginsPerSeriesType ? PluginsPerSeriesType[TSeries] : AllPluginSignatures)> = ChartApiOriginal<TSeries, TSignatures>;

package/esm/ChartContainer/index.js

@@ -1 +1,6 @@
-export * from "./ChartContainer.js";
+export * from "./ChartContainer.js";
+
+/**
+ * @deprecated Use `ChartApi` from `@mui/x-charts/context` instead.
+ */
+export {};

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

@@ -7,4 +7,4 @@ declare function ChartsReferenceLine(props: ChartsReferenceLineProps): React.JSX
 declare namespace ChartsReferenceLine {
   var propTypes: any;
 }
-export { ChartsReferenceLine };
+export { ChartsReferenceLine, type ChartsReferenceLineProps };

package/esm/ChartsReferenceLine/ChartsXReferenceLine.d.ts

@@ -10,4 +10,7 @@ export type ChartsXReferenceLineProps<TValue extends string | number | Date = st
 };
 export declare function getXReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"root" | "line" | "label", string>;
 declare function ChartsXReferenceLine(props: ChartsXReferenceLineProps): React.JSX.Element | null;
+declare namespace ChartsXReferenceLine {
+  var propTypes: any;
+}
 export { ChartsXReferenceLine };

package/esm/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -2,6 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import { warnOnce } from '@mui/x-internals/warning';
 import { useDrawingArea, useXScale } from "../hooks/index.js";
@@ -99,4 +100,50 @@ function ChartsXReferenceLine(props) {
     }))]
   });
 }
+process.env.NODE_ENV !== "production" ? ChartsXReferenceLine.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The id of the axis used for the reference value.
+   * @default The `id` of the first defined axis.
+   */
+  axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * The label to display along the reference line.
+   */
+  label: PropTypes.string,
+  /**
+   * The alignment if the label is in the chart drawing area.
+   * @default 'middle'
+   */
+  labelAlign: PropTypes.oneOf(['end', 'middle', 'start']),
+  /**
+   * The style applied to the label.
+   */
+  labelStyle: PropTypes.object,
+  /**
+   * The style applied to the line.
+   */
+  lineStyle: PropTypes.object,
+  /**
+   * Additional space around the label in px.
+   * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes.
+   * @default 5
+   */
+  spacing: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    x: PropTypes.number,
+    y: PropTypes.number
+  })]),
+  /**
+   * The x value associated with the reference line.
+   * If defined the reference line will be vertical.
+   */
+  x: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired
+} : void 0;
 export { ChartsXReferenceLine };

package/esm/ChartsReferenceLine/ChartsYReferenceLine.d.ts

@@ -10,4 +10,7 @@ export type ChartsYReferenceLineProps<TValue extends string | number | Date = st
 };
 export declare function getYReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"root" | "line" | "label", string>;
 declare function ChartsYReferenceLine(props: ChartsYReferenceLineProps): React.JSX.Element | null;
+declare namespace ChartsYReferenceLine {
+  var propTypes: any;
+}
 export { ChartsYReferenceLine };

package/esm/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -2,6 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import { warnOnce } from '@mui/x-internals/warning';
 import { useDrawingArea, useYScale } from "../hooks/index.js";
@@ -99,4 +100,50 @@ function ChartsYReferenceLine(props) {
     }))]
   });
 }
+process.env.NODE_ENV !== "production" ? ChartsYReferenceLine.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The id of the axis used for the reference value.
+   * @default The `id` of the first defined axis.
+   */
+  axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * The label to display along the reference line.
+   */
+  label: PropTypes.string,
+  /**
+   * The alignment if the label is in the chart drawing area.
+   * @default 'middle'
+   */
+  labelAlign: PropTypes.oneOf(['end', 'middle', 'start']),
+  /**
+   * The style applied to the label.
+   */
+  labelStyle: PropTypes.object,
+  /**
+   * The style applied to the line.
+   */
+  lineStyle: PropTypes.object,
+  /**
+   * Additional space around the label in px.
+   * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes.
+   * @default 5
+   */
+  spacing: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    x: PropTypes.number,
+    y: PropTypes.number
+  })]),
+  /**
+   * The y value associated with the reference line.
+   * If defined the reference line will be horizontal.
+   */
+  y: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired
+} : void 0;
 export { ChartsYReferenceLine };