@mui/x-charts 8.6.0 → 8.8.0

package/esm/LineChart/useAreaPlotData.js

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { area as d3Area } from '@mui/x-charts-vendor/d3-shape';
+import { useChartGradientIdBuilder } from "../hooks/useChartGradientId.js";
+import { isBandScale } from "../internals/isBandScale.js";
+import { getCurveFactory } from "../internals/getCurve.js";
+import { getValueToPositionMapper, useLineSeriesContext, useXAxes, useYAxes } from "../hooks/index.js";
+import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
+export function useAreaPlotData(xAxes, yAxes) {
+  const seriesData = useLineSeriesContext();
+  const defaultXAxisId = useXAxes().xAxisIds[0];
+  const defaultYAxisId = useYAxes().yAxisIds[0];
+  const getGradientId = useChartGradientIdBuilder();
+
+  // This memo prevents odd line chart behavior when hydrating.
+  const allData = React.useMemo(() => {
+    if (seriesData === undefined) {
+      return [];
+    }
+    const {
+      series,
+      stackingGroups
+    } = seriesData;
+    const areaPlotData = [];
+    for (const stackingGroup of stackingGroups) {
+      const groupIds = stackingGroup.ids;
+      for (let i = groupIds.length - 1; i >= 0; i -= 1) {
+        const seriesId = groupIds[i];
+        const {
+          xAxisId = defaultXAxisId,
+          yAxisId = defaultYAxisId,
+          stackedData,
+          data,
+          connectNulls,
+          baseline,
+          curve,
+          strictStepCurve,
+          area
+        } = series[seriesId];
+        if (!area || !(xAxisId in xAxes) || !(yAxisId in yAxes)) {
+          continue;
+        }
+        const xScale = xAxes[xAxisId].scale;
+        const xPosition = getValueToPositionMapper(xScale);
+        const yScale = yAxes[yAxisId].scale;
+        const xData = xAxes[xAxisId].data;
+        const gradientId = yAxes[yAxisId].colorScale && getGradientId(yAxisId) || xAxes[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
+        if (process.env.NODE_ENV !== 'production') {
+          if (xData === undefined) {
+            throw new Error(`MUI X Charts: ${xAxisId === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
+          }
+          if (xData.length < stackedData.length) {
+            throw new Error(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
+          }
+        }
+        const shouldExpand = curve?.includes('step') && !strictStepCurve && isBandScale(xScale);
+        const formattedData = xData?.flatMap((x, index) => {
+          const nullData = data[index] == null;
+          if (shouldExpand) {
+            const rep = [{
+              x,
+              y: stackedData[index],
+              nullData,
+              isExtension: false
+            }];
+            if (!nullData && (index === 0 || data[index - 1] == null)) {
+              rep.unshift({
+                x: (xScale(x) ?? 0) - (xScale.step() - xScale.bandwidth()) / 2,
+                y: stackedData[index],
+                nullData,
+                isExtension: true
+              });
+            }
+            if (!nullData && (index === data.length - 1 || data[index + 1] == null)) {
+              rep.push({
+                x: (xScale(x) ?? 0) + (xScale.step() + xScale.bandwidth()) / 2,
+                y: stackedData[index],
+                nullData,
+                isExtension: true
+              });
+            }
+            return rep;
+          }
+          return {
+            x,
+            y: stackedData[index],
+            nullData
+          };
+        }) ?? [];
+        const d3Data = connectNulls ? formattedData.filter(d => !d.nullData) : formattedData;
+        const areaPath = d3Area().x(d => d.isExtension ? d.x : xPosition(d.x)).defined(d => connectNulls || !d.nullData || !!d.isExtension).y0(d => {
+          if (typeof baseline === 'number') {
+            return yScale(baseline);
+          }
+          if (baseline === 'max') {
+            return yScale.range()[1];
+          }
+          if (baseline === 'min') {
+            return yScale.range()[0];
+          }
+          const value = d.y && yScale(d.y[0]);
+          if (Number.isNaN(value)) {
+            return yScale.range()[0];
+          }
+          return value;
+        }).y1(d => d.y && yScale(d.y[1]));
+        const d = areaPath.curve(getCurveFactory(curve))(d3Data) || '';
+        areaPlotData.push({
+          area: series[seriesId].area,
+          color: series[seriesId].color,
+          gradientId,
+          d,
+          seriesId
+        });
+      }
+    }
+    return areaPlotData;
+  }, [seriesData, defaultXAxisId, defaultYAxisId, xAxes, yAxes, getGradientId]);
+  return allData;
+}

package/esm/LineChart/useLinePlotData.d.ts

@@ -0,0 +1,11 @@
+import { ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { ChartsXAxisProps, ChartsYAxisProps } from "../models/index.js";
+import { SeriesId } from "../models/seriesType/common.js";
+interface LinePlotDataPoint {
+  d: string;
+  seriesId: SeriesId;
+  color: string;
+  gradientId?: string;
+}
+export declare function useLinePlotData(xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>): LinePlotDataPoint[];
+export {};

package/esm/LineChart/useLinePlotData.js

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { warnOnce } from '@mui/x-internals/warning';
+import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';
+import { useChartGradientIdBuilder } from "../hooks/useChartGradientId.js";
+import { isBandScale } from "../internals/isBandScale.js";
+import { getCurveFactory } from "../internals/getCurve.js";
+import { getValueToPositionMapper, useLineSeriesContext, useXAxes, useYAxes } from "../hooks/index.js";
+import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
+export function useLinePlotData(xAxes, yAxes) {
+  const seriesData = useLineSeriesContext();
+  const defaultXAxisId = useXAxes().xAxisIds[0];
+  const defaultYAxisId = useYAxes().yAxisIds[0];
+  const getGradientId = useChartGradientIdBuilder();
+
+  // This memo prevents odd line chart behavior when hydrating.
+  const allData = React.useMemo(() => {
+    if (seriesData === undefined) {
+      return [];
+    }
+    const {
+      series,
+      stackingGroups
+    } = seriesData;
+    const linePlotData = [];
+    for (const stackingGroup of stackingGroups) {
+      const groupIds = stackingGroup.ids;
+      for (const seriesId of groupIds) {
+        const {
+          xAxisId = defaultXAxisId,
+          yAxisId = defaultYAxisId,
+          stackedData,
+          data,
+          connectNulls,
+          curve,
+          strictStepCurve
+        } = series[seriesId];
+        if (!(xAxisId in xAxes) || !(yAxisId in yAxes)) {
+          continue;
+        }
+        const xScale = xAxes[xAxisId].scale;
+        const xPosition = getValueToPositionMapper(xScale);
+        const yScale = yAxes[yAxisId].scale;
+        const xData = xAxes[xAxisId].data;
+        const gradientId = yAxes[yAxisId].colorScale && getGradientId(yAxisId) || xAxes[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
+        if (process.env.NODE_ENV !== 'production') {
+          if (xData === undefined) {
+            throw new Error(`MUI X Charts: ${xAxisId === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
+          }
+          if (xData.length < stackedData.length) {
+            warnOnce(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`, 'error');
+          }
+        }
+        const shouldExpand = curve?.includes('step') && !strictStepCurve && isBandScale(xScale);
+        const formattedData = xData?.flatMap((x, index) => {
+          const nullData = data[index] == null;
+          if (shouldExpand) {
+            const rep = [{
+              x,
+              y: stackedData[index],
+              nullData,
+              isExtension: false
+            }];
+            if (!nullData && (index === 0 || data[index - 1] == null)) {
+              rep.unshift({
+                x: (xScale(x) ?? 0) - (xScale.step() - xScale.bandwidth()) / 2,
+                y: stackedData[index],
+                nullData,
+                isExtension: true
+              });
+            }
+            if (!nullData && (index === data.length - 1 || data[index + 1] == null)) {
+              rep.push({
+                x: (xScale(x) ?? 0) + (xScale.step() + xScale.bandwidth()) / 2,
+                y: stackedData[index],
+                nullData,
+                isExtension: true
+              });
+            }
+            return rep;
+          }
+          return {
+            x,
+            y: stackedData[index],
+            nullData
+          };
+        }) ?? [];
+        const d3Data = connectNulls ? formattedData.filter(d => !d.nullData) : formattedData;
+        const linePath = d3Line().x(d => d.isExtension ? d.x : xPosition(d.x)).defined(d => connectNulls || !d.nullData || !!d.isExtension).y(d => yScale(d.y[1]));
+        const d = linePath.curve(getCurveFactory(curve))(d3Data) || '';
+        linePlotData.push({
+          color: series[seriesId].color,
+          gradientId,
+          d,
+          seriesId
+        });
+      }
+    }
+    return linePlotData;
+  }, [seriesData, defaultXAxisId, defaultYAxisId, xAxes, yAxes, getGradientId]);
+  return allData;
+}

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/Scatter.js

@@ -6,15 +6,15 @@ const _excluded = ["ownerState"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
-import { getValueToPositionMapper } from "../hooks/useScale.js";
-import { useInteractionAllItemProps } from "../hooks/useInteractionItemProps.js";
+import { getInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 import { useStore } from "../internals/store/useStore.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { useItemHighlightedGetter } from "../hooks/useItemHighlightedGetter.js";
 import { selectorChartsVoronoiIsVoronoiEnabled } from "../internals/plugins/featurePlugins/useChartVoronoi/index.js";
-import { useChartContext } from "../context/ChartProvider/index.js";
 import { ScatterMarker } from "./ScatterMarker.js";
 import { useUtilityClasses } from "./scatterClasses.js";
+import { useScatterPlotData } from "./useScatterPlotData.js";
+import { useChartContext } from "../context/ChartProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -48,37 +48,7 @@ function Scatter(props) {
     isFaded,
     isHighlighted
   } = useItemHighlightedGetter();
-  const cleanData = React.useMemo(() => {
-    const getXPosition = getValueToPositionMapper(xScale);
-    const getYPosition = getValueToPositionMapper(yScale);
-    const temp = [];
-    for (let i = 0; i < series.data.length; i += 1) {
-      const scatterPoint = series.data[i];
-      const x = getXPosition(scatterPoint.x);
-      const y = getYPosition(scatterPoint.y);
-      const isInRange = instance.isPointInside(x, y);
-      if (isInRange) {
-        const currentItem = {
-          seriesId: series.id,
-          dataIndex: i
-        };
-        const isItemHighlighted = isHighlighted(currentItem);
-        temp.push({
-          x,
-          y,
-          isHighlighted: isItemHighlighted,
-          isFaded: !isItemHighlighted && isFaded(currentItem),
-          id: scatterPoint.id,
-          seriesId: series.id,
-          type: 'scatter',
-          dataIndex: i,
-          color: colorGetter ? colorGetter(i) : color
-        });
-      }
-    }
-    return temp;
-  }, [xScale, yScale, series.data, series.id, isHighlighted, isFaded, colorGetter, color, instance]);
-  const interactionItemProps = useInteractionAllItemProps(cleanData, skipInteractionHandlers);
+  const scatterPlotData = useScatterPlotData(series, xScale, yScale, instance.isPointInside);
   const Marker = slots?.marker ?? ScatterMarker;
   const _useSlotProps = useSlotProps({
       elementType: Marker,
@@ -94,21 +64,25 @@ function Scatter(props) {
   return /*#__PURE__*/_jsx("g", {
     "data-series": series.id,
     className: classes.root,
-    children: cleanData.map((dataPoint, i) => /*#__PURE__*/_jsx(Marker, _extends({
-      dataIndex: dataPoint.dataIndex,
-      color: dataPoint.color,
-      isHighlighted: dataPoint.isHighlighted,
-      isFaded: dataPoint.isFaded,
-      x: dataPoint.x,
-      y: dataPoint.y,
-      onClick: onItemClick && (event => onItemClick(event, {
-        type: 'scatter',
-        seriesId: series.id,
-        dataIndex: dataPoint.dataIndex
-      })),
-      "data-highlighted": dataPoint.isHighlighted || undefined,
-      "data-faded": dataPoint.isFaded || undefined
-    }, interactionItemProps[i], markerProps), dataPoint.id ?? dataPoint.dataIndex))
+    children: scatterPlotData.map((dataPoint, i) => {
+      const isItemHighlighted = isHighlighted(dataPoint);
+      const isItemFaded = !isItemHighlighted && isFaded(dataPoint);
+      return /*#__PURE__*/_jsx(Marker, _extends({
+        dataIndex: dataPoint.dataIndex,
+        color: colorGetter ? colorGetter(i) : color,
+        isHighlighted: isItemHighlighted,
+        isFaded: isItemFaded,
+        x: dataPoint.x,
+        y: dataPoint.y,
+        onClick: onItemClick && (event => onItemClick(event, {
+          type: 'scatter',
+          seriesId: series.id,
+          dataIndex: dataPoint.dataIndex
+        })),
+        "data-highlighted": isItemHighlighted || undefined,
+        "data-faded": isItemFaded || undefined
+      }, skipInteractionHandlers ? undefined : getInteractionItemProps(instance, dataPoint), markerProps), dataPoint.id ?? dataPoint.dataIndex);
+    })
   });
 }
 process.env.NODE_ENV !== "production" ? Scatter.propTypes = {

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})`)
     })];

package/esm/ScatterChart/useScatterPlotData.d.ts

@@ -0,0 +1,8 @@
+import { SeriesId } from "../models/seriesType/common.js";
+import { D3Scale } from "../models/axis.js";
+import { DefaultizedScatterSeriesType, ScatterValueType } from "../models/index.js";
+export declare function useScatterPlotData(series: DefaultizedScatterSeriesType, xScale: D3Scale, yScale: D3Scale, isPointInside: (x: number, y: number) => boolean): (ScatterValueType & {
+  dataIndex: number;
+  seriesId: SeriesId;
+  type: "scatter";
+})[];

package/esm/ScatterChart/useScatterPlotData.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { getValueToPositionMapper } from "../hooks/index.js";
+export function useScatterPlotData(series, xScale, yScale, isPointInside) {
+  return React.useMemo(() => {
+    const getXPosition = getValueToPositionMapper(xScale);
+    const getYPosition = getValueToPositionMapper(yScale);
+    const temp = [];
+    for (let i = 0; i < series.data.length; i += 1) {
+      const scatterPoint = series.data[i];
+      const x = getXPosition(scatterPoint.x);
+      const y = getYPosition(scatterPoint.y);
+      const isInRange = isPointInside(x, y);
+      if (isInRange) {
+        temp.push({
+          x,
+          y,
+          id: scatterPoint.id,
+          seriesId: series.id,
+          type: 'scatter',
+          dataIndex: i
+        });
+      }
+    }
+    return temp;
+  }, [xScale, yScale, series.data, series.id, isPointInside]);
+}

package/esm/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/esm/SparkLineChart/SparkLineChart.js

@@ -206,6 +206,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.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.
@@ -249,6 +257,14 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.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/context/ChartApi.d.ts

@@ -0,0 +1,22 @@
+import type { PieChartPluginSignatures } from "../PieChart/PieChart.plugins.js";
+import type { BarChartPluginsSignatures } from "../BarChart/BarChart.plugins.js";
+import type { ScatterChartPluginsSignatures } from "../ScatterChart/ScatterChart.plugins.js";
+import type { LineChartPluginsSignatures } from "../LineChart/LineChart.plugins.js";
+import type { AllPluginSignatures, DefaultPluginSignatures } from "../internals/plugins/allPlugins.js";
+import type { ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
+import type { ChartPublicAPI } from "../internals/plugins/models/index.js";
+export 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>;

package/esm/context/ChartApi.js

@@ -0,0 +1 @@
+export {};

package/esm/context/ChartProvider/ChartContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 /**
  * @ignore - internal component.

package/esm/context/index.d.ts

@@ -1,2 +1,3 @@
 export type { HighlightScope, FadeOptions, HighlightItemData, HighlightOptions } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
-export * from "./useChartApiContext.js";
+export * from "./useChartApiContext.js";
+export type { ChartApi } from "./ChartApi.js";

package/esm/context/useChartApiContext.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ChartApi } from "../ChartContainer/index.js";
+import { ChartApi } from "./ChartApi.js";
 /**
  * The `useChartApiContext` hook provides access to the chart API.
  * This is only available when the chart is rendered within a chart or a `ChartDataProvider` component.

package/esm/hooks/useAxis.d.ts

@@ -11,7 +11,7 @@ import { AxisId, ChartsRadiusAxisProps, ChartsRotationAxisProps, PolarAxisDefaul
  */
 export declare function useXAxes(): {
   xAxis: import("../internals/index.js").ComputedAxisConfig<import("../index.js").ChartsXAxisProps>;
-  xAxisIds: string[];
+  xAxisIds: AxisId[];
 };
 /**
  * Get all the y-axes.
@@ -25,7 +25,7 @@ export declare function useXAxes(): {
  */
 export declare function useYAxes(): {
   yAxis: import("../internals/index.js").ComputedAxisConfig<import("../index.js").ChartsYAxisProps>;
-  yAxisIds: string[];
+  yAxisIds: AxisId[];
 };
 /**
  * Get the X axis.

package/esm/hooks/useInteractionItemProps.d.ts

@@ -1,16 +1,21 @@
 import * as React from 'react';
 import { SeriesItemIdentifier } from "../models/index.js";
+import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+import { UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { ChartItemIdentifier, ChartSeriesType } from "../models/seriesType/config.js";
+import { ChartInstance } from "../internals/plugins/models/index.js";
 export declare const useInteractionItemProps: (data: SeriesItemIdentifier, skip?: boolean) => {
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;
   onPointerDown?: (event: React.PointerEvent) => void;
 };
-export declare const useInteractionAllItemProps: (data: SeriesItemIdentifier[], skip?: boolean) => ({
-  onPointerEnter?: undefined;
-  onPointerLeave?: undefined;
-  onPointerDown?: undefined;
-} | {
-  onPointerEnter: () => void;
-  onPointerLeave: () => void;
-  onPointerDown: (event: React.PointerEvent) => void;
-})[];
+export declare const useInteractionAllItemProps: (data: SeriesItemIdentifier[], skip?: boolean) => {
+  onPointerEnter?: () => void;
+  onPointerLeave?: () => void;
+  onPointerDown?: (event: React.PointerEvent) => void;
+}[];
+export declare function getInteractionItemProps(instance: ChartInstance<[UseChartInteractionSignature, UseChartHighlightSignature]>, item: ChartItemIdentifier<ChartSeriesType>): {
+  onPointerEnter?: () => void;
+  onPointerLeave?: () => void;
+  onPointerDown?: (event: React.PointerEvent) => void;
+};

package/esm/hooks/useInteractionItemProps.js

@@ -2,11 +2,11 @@
 
 import * as React from 'react';
 import { useChartContext } from "../context/ChartProvider/index.js";
-const onPointerDown = event => {
+function onPointerDown(event) {
   if ('hasPointerCapture' in event.currentTarget && event.currentTarget.hasPointerCapture(event.pointerId)) {
     event.currentTarget.releasePointerCapture(event.pointerId);
   }
-};
+}
 export const useInteractionItemProps = (data, skip) => {
   const {
     instance
@@ -56,32 +56,32 @@ export const useInteractionAllItemProps = (data, skip) => {
   } = useChartContext();
   const results = React.useMemo(() => {
     return data.map(item => {
-      if (skip) {
-        return {};
-      }
-      const onPointerEnter = () => {
-        if (!item) {
-          return;
-        }
-        instance.setItemInteraction(item);
-        instance.setHighlight({
-          seriesId: item.seriesId,
-          dataIndex: item.dataIndex
-        });
-      };
-      const onPointerLeave = () => {
-        if (!item) {
-          return;
-        }
-        instance.removeItemInteraction(item);
-        instance.clearHighlight();
-      };
-      return {
-        onPointerEnter,
-        onPointerLeave,
-        onPointerDown
-      };
+      return skip ? {} : getInteractionItemProps(instance, item);
     });
   }, [data, instance, skip]);
   return results;
-};
+};
+export function getInteractionItemProps(instance, item) {
+  function onPointerEnter() {
+    if (!item) {
+      return;
+    }
+    instance.setItemInteraction(item);
+    instance.setHighlight({
+      seriesId: item.seriesId,
+      dataIndex: item.dataIndex
+    });
+  }
+  function onPointerLeave() {
+    if (!item) {
+      return;
+    }
+    instance.removeItemInteraction(item);
+    instance.clearHighlight();
+  }
+  return {
+    onPointerEnter,
+    onPointerLeave,
+    onPointerDown
+  };
+}

package/esm/index.d.ts

@@ -23,6 +23,7 @@ export * from "./SparkLineChart/index.js";
 export * from "./Gauge/index.js";
 export * from "./RadarChart/index.js";
 export * from "./ChartsSurface/index.js";
-export * from "./ChartContainer/index.js";
+export { ChartContainer } from "./ChartContainer/index.js";
+export type { ChartContainerProps } from "./ChartContainer/index.js";
 export * from "./ChartDataProvider/index.js";
 export * from "./Toolbar/index.js";