@mui/x-charts 8.11.2 → 8.12.0

package/esm/ScatterChart/Scatter.js

@@ -10,11 +10,12 @@ 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 { selectorChartsIsVoronoiEnabled } from "../internals/plugins/featurePlugins/useChartClosestPoint/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 { useIsItemFocusedGetter } from "../hooks/useIsItemFocusedGetter.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -42,12 +43,13 @@ function Scatter(props) {
     instance
   } = useChartContext();
   const store = useStore();
-  const isVoronoiEnabled = useSelector(store, selectorChartsVoronoiIsVoronoiEnabled);
+  const isVoronoiEnabled = useSelector(store, selectorChartsIsVoronoiEnabled);
   const skipInteractionHandlers = isVoronoiEnabled || series.disableHover;
   const {
     isFaded,
     isHighlighted
   } = useItemHighlightedGetter();
+  const isFocused = useIsItemFocusedGetter();
   const scatterPlotData = useScatterPlotData(series, xScale, yScale, instance.isPointInside);
   const Marker = slots?.marker ?? ScatterMarker;
   const _useSlotProps = useSlotProps({
@@ -64,12 +66,17 @@ function Scatter(props) {
   return /*#__PURE__*/_jsx("g", {
     "data-series": series.id,
     className: classes.root,
-    children: scatterPlotData.map((dataPoint, i) => {
+    children: scatterPlotData.map(dataPoint => {
       const isItemHighlighted = isHighlighted(dataPoint);
       const isItemFaded = !isItemHighlighted && isFaded(dataPoint);
+      const isItemFocused = isFocused({
+        seriesType: 'scatter',
+        seriesId: series.id,
+        dataIndex: dataPoint.dataIndex
+      });
       return /*#__PURE__*/_jsx(Marker, _extends({
         dataIndex: dataPoint.dataIndex,
-        color: colorGetter ? colorGetter(i) : color,
+        color: colorGetter ? colorGetter(dataPoint.dataIndex) : color,
         isHighlighted: isItemHighlighted,
         isFaded: isItemFaded,
         x: dataPoint.x,
@@ -80,7 +87,8 @@ function Scatter(props) {
           dataIndex: dataPoint.dataIndex
         })),
         "data-highlighted": isItemHighlighted || undefined,
-        "data-faded": isItemFaded || undefined
+        "data-faded": isItemFaded || undefined,
+        "data-focused": isItemFocused || undefined
       }, skipInteractionHandlers ? undefined : getInteractionItemProps(instance, dataPoint), markerProps), dataPoint.id ?? dataPoint.dataIndex);
     })
   });

package/esm/ScatterChart/ScatterChart.d.ts

@@ -13,8 +13,8 @@ import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "
 import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
 import { ChartsAxisSlots, ChartsAxisSlotProps } from "../models/axis.js";
 import { ChartsGridProps } from "../ChartsGrid/index.js";
-import { UseChartVoronoiSignature } from "../internals/plugins/featurePlugins/useChartVoronoi/index.js";
-import { ScatterChartPluginsSignatures } from "./ScatterChart.plugins.js";
+import { UseChartClosestPointSignature } from "../internals/plugins/featurePlugins/useChartClosestPoint/index.js";
+import { ScatterChartPluginSignatures } from "./ScatterChart.plugins.js";
 export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, Omit<ChartsTooltipSlotProps, 'tooltip'>, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {
   /**
@@ -24,7 +24,7 @@ export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotS
   tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
 }
 export type ScatterSeries = MakeOptional<ScatterSeriesType, 'type'>;
-export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', ScatterChartPluginsSignatures>, 'series' | 'plugins' | 'onItemClick' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
+export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', ScatterChartPluginSignatures>, 'series' | 'plugins' | 'onItemClick' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<ScatterPlotProps, 'renderer'> {
   /**
    * The series to display in the scatter chart.
    * An array of [[ScatterSeries]] objects.
@@ -69,7 +69,7 @@ export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', S
    * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element if using Voronoi cells. Or the Mouse event from the scatter element, when `disableVoronoi=true`.
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
-  onItemClick?: ScatterPlotProps['onItemClick'] | UseChartVoronoiSignature['params']['onItemClick'];
+  onItemClick?: ScatterPlotProps['onItemClick'] | UseChartClosestPointSignature['params']['onItemClick'];
 }
 /**
  * Demos:

package/esm/ScatterChart/ScatterChart.js

@@ -103,6 +103,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @default false
    */
   disableVoronoi: PropTypes.bool,
+  enableKeyboardNavigation: PropTypes.bool,
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -171,6 +172,15 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick: PropTypes.func,
+  /**
+   * The type of renderer to use for the scatter plot.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/scatter/#performance
+   *
+   * @default 'svg-single'
+   */
+  renderer: PropTypes.oneOf(['svg-batch', 'svg-single']),
   /**
    * The series to display in the scatter chart.
    * An array of [[ScatterSeries]] objects.
@@ -200,10 +210,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,
   /**
-   * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
+   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
+   * If set to `'item'`, the radius is the `markerSize`.
    * If `undefined`, the radius is assumed to be infinite.
    */
-  voronoiMaxRadius: PropTypes.number,
+  voronoiMaxRadius: PropTypes.oneOfType([PropTypes.oneOf(['item']), PropTypes.number]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */

package/esm/ScatterChart/ScatterChart.plugins.d.ts

@@ -3,6 +3,7 @@ import { UseChartCartesianAxisSignature } from "../internals/plugins/featurePlug
 import { UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 import { ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
-import { UseChartVoronoiSignature } from "../internals/plugins/featurePlugins/useChartVoronoi/index.js";
-export type ScatterChartPluginsSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVoronoiSignature];
-export declare const SCATTER_CHART_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartPluginsSignatures>;
+import { UseChartClosestPointSignature } from "../internals/plugins/featurePlugins/useChartClosestPoint/index.js";
+import { UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+export type ScatterChartPluginSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
+export declare const SCATTER_CHART_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartPluginSignatures>;

package/esm/ScatterChart/ScatterChart.plugins.js

@@ -2,5 +2,6 @@ import { useChartZAxis } from "../internals/plugins/featurePlugins/useChartZAxis
 import { useChartCartesianAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
-import { useChartVoronoi } from "../internals/plugins/featurePlugins/useChartVoronoi/index.js";
-export const SCATTER_CHART_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartVoronoi];
+import { useChartClosestPoint } from "../internals/plugins/featurePlugins/useChartClosestPoint/index.js";
+import { useChartKeyboardNavigation } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+export const SCATTER_CHART_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation];

package/esm/ScatterChart/ScatterPlot.d.ts

@@ -6,6 +6,7 @@ export interface ScatterPlotSlots extends ScatterSlots {
 export interface ScatterPlotSlotProps extends ScatterSlotProps {
   scatter?: Partial<ScatterProps>;
 }
+export type RendererType = 'svg-single' | 'svg-batch';
 export interface ScatterPlotProps extends Pick<ScatterProps, 'onItemClick'> {
   /**
    * Overridable component slots.
@@ -17,6 +18,15 @@ export interface ScatterPlotProps extends Pick<ScatterProps, 'onItemClick'> {
    * @default {}
    */
   slotProps?: ScatterPlotSlotProps;
+  /**
+   * The type of renderer to use for the scatter plot.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/scatter/#performance
+   *
+   * @default 'svg-single'
+   */
+  renderer?: RendererType;
 }
 /**
  * Demos:

package/esm/ScatterChart/ScatterPlot.js

@@ -8,6 +8,7 @@ import { useScatterSeriesContext } from "../hooks/useScatterSeries.js";
 import { useXAxes, useYAxes } from "../hooks/index.js";
 import { useZAxes } from "../hooks/useZAxis.js";
 import { seriesConfig as scatterSeriesConfig } from "./seriesConfig/index.js";
+import { BatchScatter } from "./BatchScatter.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -23,7 +24,8 @@ function ScatterPlot(props) {
   const {
     slots,
     slotProps,
-    onItemClick
+    onItemClick,
+    renderer
   } = props;
   const seriesData = useScatterSeriesContext();
   const {
@@ -48,7 +50,8 @@ function ScatterPlot(props) {
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   const defaultZAxisId = zAxisIds[0];
-  const ScatterItems = slots?.scatter ?? Scatter;
+  const DefaultScatterItems = renderer === 'svg-batch' ? BatchScatter : Scatter;
+  const ScatterItems = slots?.scatter ?? DefaultScatterItems;
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: seriesOrder.map(seriesId => {
       const {
@@ -85,6 +88,15 @@ process.env.NODE_ENV !== "production" ? ScatterPlot.propTypes = {
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick: PropTypes.func,
+  /**
+   * The type of renderer to use for the scatter plot.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/scatter/#performance
+   *
+   * @default 'svg-single'
+   */
+  renderer: PropTypes.oneOf(['svg-batch', 'svg-single']),
   /**
    * The props used for each component slot.
    * @default {}

package/esm/ScatterChart/index.d.ts

@@ -3,5 +3,6 @@ export * from "./ScatterPlot.js";
 export * from "./Scatter.js";
 export * from "./ScatterMarker.types.js";
 export * from "./ScatterMarker.js";
+export * from "./ScatterChart.plugins.js";
 export type { ScatterClasses } from "./scatterClasses.js";
 export { scatterClasses } from "./scatterClasses.js";

package/esm/ScatterChart/index.js

@@ -3,4 +3,5 @@ export * from "./ScatterPlot.js";
 export * from "./Scatter.js";
 export * from "./ScatterMarker.types.js";
 export * from "./ScatterMarker.js";
+export * from "./ScatterChart.plugins.js";
 export { scatterClasses } from "./scatterClasses.js";

package/esm/ScatterChart/useScatterChartProps.d.ts

@@ -8,7 +8,7 @@ import { ChartContainerProps } from "../ChartContainer/index.js";
 import type { ScatterChartProps } from "./ScatterChart.js";
 import type { ScatterPlotProps } from "./ScatterPlot.js";
 import type { ChartsWrapperProps } from "../ChartsWrapper/index.js";
-import { ScatterChartPluginsSignatures } from "./ScatterChart.plugins.js";
+import { ScatterChartPluginSignatures } from "./ScatterChart.plugins.js";
 /**
  * A helper function that extracts ScatterChartProps from the input props
  * and returns an object with props for the children components of ScatterChart.
@@ -18,7 +18,7 @@ import { ScatterChartPluginsSignatures } from "./ScatterChart.plugins.js";
  */
 export declare const useScatterChartProps: (props: ScatterChartProps) => {
   chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
-  chartContainerProps: ChartContainerProps<"scatter", ScatterChartPluginsSignatures>;
+  chartContainerProps: ChartContainerProps<"scatter", ScatterChartPluginSignatures>;
   chartsAxisProps: ChartsAxisProps;
   gridProps: ChartsGridProps;
   scatterPlotProps: ScatterPlotProps;

package/esm/ScatterChart/useScatterChartProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar"];
+const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar", "renderer"];
 import * as React from 'react';
 import { SCATTER_CHART_PLUGINS } from "./ScatterChart.plugins.js";
 /**
@@ -34,12 +34,14 @@ export const useScatterChartProps = props => {
       loading,
       highlightedItem,
       onHighlightChange,
-      className
+      className,
+      renderer
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const seriesWithDefault = React.useMemo(() => series.map(s => _extends({
     type: 'scatter'
   }, s)), [series]);
+  const useVoronoiOnItemClick = disableVoronoi !== true || renderer === 'svg-batch';
   const chartContainerProps = _extends({}, other, {
     series: seriesWithDefault,
     width,
@@ -53,7 +55,7 @@ export const useScatterChartProps = props => {
     onHighlightChange,
     disableVoronoi,
     voronoiMaxRadius,
-    onItemClick: disableVoronoi ? undefined : onItemClick,
+    onItemClick: useVoronoiOnItemClick ? onItemClick : undefined,
     className,
     plugins: SCATTER_CHART_PLUGINS,
     slots,
@@ -68,9 +70,10 @@ export const useScatterChartProps = props => {
     horizontal: grid?.horizontal
   };
   const scatterPlotProps = {
-    onItemClick: disableVoronoi ? onItemClick : undefined,
+    onItemClick: useVoronoiOnItemClick ? undefined : onItemClick,
     slots,
-    slotProps
+    slotProps,
+    renderer
   };
   const overlayProps = {
     loading,
@@ -88,7 +91,8 @@ export const useScatterChartProps = props => {
   const chartsWrapperProps = {
     sx,
     legendPosition: props.slotProps?.legend?.position,
-    legendDirection: props.slotProps?.legend?.direction
+    legendDirection: props.slotProps?.legend?.direction,
+    hideLegend: props.hideLegend ?? false
   };
   return {
     chartsWrapperProps,

package/esm/SparkLineChart/SparkLineChart.js

@@ -14,6 +14,7 @@ import { ChartsSurface } from "../ChartsSurface/index.js";
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
 import { ChartsTooltip } from "../ChartsTooltip/index.js";
 import { ChartsAxisHighlight } from "../ChartsAxisHighlight/index.js";
+import { FocusedMark } from "../LineChart/FocusedMark.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SPARK_LINE_DEFAULT_MARGIN = 5;
 
@@ -137,9 +138,11 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
             slotProps: slotProps
           })]
         })]
-      }), plotType === 'line' && /*#__PURE__*/_jsx(LineHighlightPlot, {
-        slots: slots,
-        slotProps: slotProps
+      }), plotType === 'line' && /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(LineHighlightPlot, {
+          slots: slots,
+          slotProps: slotProps
+        }), /*#__PURE__*/_jsx(FocusedMark, {})]
       }), disableClipping ? null : /*#__PURE__*/_jsx(ChartsClipPath, {
         id: clipPathId,
         offset: clipPathOffset
@@ -225,6 +228,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * If true, the voronoi interaction are ignored.
    */
   disableVoronoi: PropTypes.bool,
+  enableKeyboardNavigation: PropTypes.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -338,10 +342,11 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    */
   valueFormatter: PropTypes.func,
   /**
-   * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
+   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
+   * If set to `'item'`, the radius is the `markerSize`.
    * If `undefined`, the radius is assumed to be infinite.
    */
-  voronoiMaxRadius: PropTypes.number,
+  voronoiMaxRadius: PropTypes.oneOfType([PropTypes.oneOf(['item']), PropTypes.number]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */

package/esm/colorPalettes/types.d.ts

@@ -1,4 +1,4 @@
 export type ChartsColorPaletteCallback = (mode: 'light' | 'dark') => string[];
-export type ChartsColorPalette = string[] | ChartsColorPaletteCallback;
+export type ChartsColorPalette = readonly string[] | ChartsColorPaletteCallback;
 export type ChartsColorCallback = (mode: 'light' | 'dark') => string;
 export type ChartsColor = string | ChartsColorCallback;

package/esm/context/ChartApi.d.ts

@@ -1,14 +1,14 @@
 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 { BarChartPluginSignatures } from "../BarChart/BarChart.plugins.js";
+import type { ScatterChartPluginSignatures } from "../ScatterChart/ScatterChart.plugins.js";
+import type { LineChartPluginSignatures } 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;
+  line: LineChartPluginSignatures;
+  scatter: ScatterChartPluginSignatures;
+  bar: BarChartPluginSignatures;
   pie: PieChartPluginSignatures;
   composition: DefaultPluginSignatures;
 };

package/esm/hooks/useAxis.d.ts

@@ -1,4 +1,4 @@
-import { AxisId, ChartsRadiusAxisProps, ChartsRotationAxisProps, PolarAxisDefaultized, ScaleName } from "../models/axis.js";
+import { AxisId, ChartsRadiusAxisProps, ChartsRotationAxisProps, PolarAxisDefaultized, ScaleName, type AxisScaleConfig, type ChartsXAxisProps, type ChartsYAxisProps, type ComputedAxis } from "../models/axis.js";
 /**
  * Get all the x-axes.
  *
@@ -10,7 +10,7 @@ import { AxisId, ChartsRadiusAxisProps, ChartsRotationAxisProps, PolarAxisDefaul
  * @returns `{ xAxis, xAxisIds }` - The x-axes and their IDs.
  */
 export declare function useXAxes(): {
-  xAxis: import("../internals/index.js").ComputedAxisConfig<import("../index.js").ChartsXAxisProps>;
+  xAxis: import("../internals/index.js").ComputedAxisConfig<ChartsXAxisProps>;
   xAxisIds: AxisId[];
 };
 /**
@@ -24,7 +24,7 @@ export declare function useXAxes(): {
  * @returns `{ yAxis, yAxisIds }` - The y-axes and their IDs.
  */
 export declare function useYAxes(): {
-  yAxis: import("../internals/index.js").ComputedAxisConfig<import("../index.js").ChartsYAxisProps>;
+  yAxis: import("../internals/index.js").ComputedAxisConfig<ChartsYAxisProps>;
   yAxisIds: AxisId[];
 };
 /**
@@ -32,13 +32,13 @@ export declare function useYAxes(): {
  * @param {AxisId | undefined} axisId - If provided returns the x axis with axisId, else returns the values for the default x axis.
  * @returns The X axis.
  */
-export declare function useXAxis(axisId?: AxisId): import("../internals/index.js").ComputedAxis<keyof import("../internals/index.js").AxisScaleConfig, any, import("../index.js").ChartsXAxisProps>;
+export declare function useXAxis<T extends keyof AxisScaleConfig>(axisId?: AxisId): ComputedAxis<T, any, ChartsXAxisProps>;
 /**
  * Get the Y axis.
  * @param {AxisId | undefined} axisId - If provided returns the y axis with axisId, else returns the values for the default y axis.
  * @returns The Y axis.
  */
-export declare function useYAxis(axisId?: AxisId): import("../internals/index.js").ComputedAxis<keyof import("../internals/index.js").AxisScaleConfig, any, import("../index.js").ChartsYAxisProps>;
+export declare function useYAxis<T extends keyof AxisScaleConfig>(axisId?: AxisId): ComputedAxis<T, any, ChartsYAxisProps>;
 export declare function useRotationAxes(): {
   rotationAxis: import("../internals/plugins/featurePlugins/useChartPolarAxis/computeAxisValue.js").DefaultizedAxisConfig<ChartsRotationAxisProps>;
   rotationAxisIds: string[];

package/esm/hooks/useDrawingArea.d.ts

@@ -1,9 +1,27 @@
 export type ChartDrawingArea = {
-  top: number;
+  /**
+   * The gap between the left border of the SVG and the drawing area.
+   */
   left: number;
-  right: number;
+  /**
+   * The gap between the top border of the SVG and the drawing area.
+   */
+  top: number;
+  /**
+   * The gap between the bottom border of the SVG and the drawing area.
+   */
   bottom: number;
+  /**
+   * The gap between the right border of the SVG and the drawing area.
+   */
+  right: number;
+  /**
+   * The width of the drawing area.
+   */
   width: number;
+  /**
+   * The height of the drawing area.
+   */
   height: number;
 };
 /**

package/esm/hooks/useFocusedItem.d.ts

@@ -0,0 +1,15 @@
+import { ChartSeriesType } from "../models/seriesType/config.js";
+import { SeriesId } from "../models/seriesType/common.js";
+export type FocusedItemData = {
+  seriesType: ChartSeriesType;
+  seriesId: SeriesId;
+  dataIndex: number;
+};
+/**
+ * Get the focused item from keyboard navigation.
+ */
+export declare function useFocusedItem(): {
+  seriesType: keyof import("../internals/index.js").ChartsSeriesConfig;
+  seriesId: SeriesId;
+  dataIndex: number;
+} | null;

package/esm/hooks/useFocusedItem.js

@@ -0,0 +1,20 @@
+'use client';
+
+import * as React from 'react';
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { selectorChartsFocusedSeriesType, selectorChartsFocusedSeriesId, selectorChartsFocusedDataIndex } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+/**
+ * Get the focused item from keyboard navigation.
+ */
+export function useFocusedItem() {
+  const store = useStore();
+  const focusedSeriesType = useSelector(store, selectorChartsFocusedSeriesType);
+  const focusedSeriesId = useSelector(store, selectorChartsFocusedSeriesId);
+  const focusedDataIndex = useSelector(store, selectorChartsFocusedDataIndex);
+  return React.useMemo(() => focusedSeriesType === undefined || focusedSeriesId === undefined || focusedDataIndex === undefined ? null : {
+    seriesType: focusedSeriesType,
+    seriesId: focusedSeriesId,
+    dataIndex: focusedDataIndex
+  }, [focusedSeriesType, focusedSeriesId, focusedDataIndex]);
+}

package/esm/hooks/useIsItemFocused.d.ts

@@ -0,0 +1,12 @@
+import { FocusedItemData } from "./useFocusedItem.js";
+type UseItemFocusedParams = FocusedItemData;
+/**
+ * A hook to check if an item has the focus.
+ *
+ * If you need to process multiple points, use the `useIsItemFocusedGetter` hook instead.
+ *
+ * @param {FocusedItemData} item is the item to check
+ * @returns {boolean} the focus state
+ */
+export declare function useIsItemFocused(item: UseItemFocusedParams): boolean;
+export {};

package/esm/hooks/useIsItemFocused.js

@@ -0,0 +1,15 @@
+'use client';
+
+import { useFocusedItem } from "./useFocusedItem.js";
+/**
+ * A hook to check if an item has the focus.
+ *
+ * If you need to process multiple points, use the `useIsItemFocusedGetter` hook instead.
+ *
+ * @param {FocusedItemData} item is the item to check
+ * @returns {boolean} the focus state
+ */
+export function useIsItemFocused(item) {
+  const focusedItem = useFocusedItem();
+  return focusedItem !== null && focusedItem.seriesType === item.seriesType && focusedItem.seriesId === item.seriesId && focusedItem.dataIndex === item.dataIndex;
+}

package/esm/hooks/useIsItemFocusedGetter.d.ts

@@ -0,0 +1,8 @@
+import { FocusedItemData } from "./useFocusedItem.js";
+/**
+ * A hook to check focus state of multiple items.
+ * If you're interested by a single one, consider using `useIsItemFocused`.
+ *
+ * @returns {(item: FocusedItemData) => boolean} callback to get the state of the item.
+ */
+export declare function useIsItemFocusedGetter(): (item: FocusedItemData) => boolean;

package/esm/hooks/useIsItemFocusedGetter.js

@@ -0,0 +1,14 @@
+'use client';
+
+import { useFocusedItem } from "./useFocusedItem.js";
+
+/**
+ * A hook to check focus state of multiple items.
+ * If you're interested by a single one, consider using `useIsItemFocused`.
+ *
+ * @returns {(item: FocusedItemData) => boolean} callback to get the state of the item.
+ */
+export function useIsItemFocusedGetter() {
+  const focusedItem = useFocusedItem();
+  return item => focusedItem !== null && focusedItem.seriesType === item.seriesType && focusedItem.seriesId === item.seriesId && focusedItem.dataIndex === item.dataIndex;
+}

package/esm/hooks/useScale.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { isBandScale } from "../internals/isBandScale.js";
+import { isOrdinalScale } from "../internals/scaleGuards.js";
 import { useRadiusAxis, useRotationAxis, useXAxis, useYAxis } from "./useAxis.js";
 
 /**
@@ -10,9 +10,15 @@ import { useRadiusAxis, useRotationAxis, useXAxis, useYAxis } from "./useAxis.js
  * @returns {(value: any) => number} A function that map value to their position
  */
 export function getValueToPositionMapper(scale) {
-  if (isBandScale(scale)) {
+  if (isOrdinalScale(scale)) {
     return value => (scale(value) ?? 0) + scale.bandwidth() / 2;
   }
+  const domain = scale.domain();
+
+  // Fixes https://github.com/mui/mui-x/issues/18999#issuecomment-3173787401
+  if (domain[0] === domain[1]) {
+    return value => value === domain[0] ? scale(value) : NaN;
+  }
   return value => scale(value);
 }
 

package/esm/hooks/useTicks.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { useChartContext } from "../context/ChartProvider/index.js";
-import { isBandScale } from "../internals/isBandScale.js";
+import { isOrdinalScale } from "../internals/scaleGuards.js";
 import { isInfinity } from "../internals/isInfinity.js";
 const offsetRatio = {
   start: 0,
@@ -22,7 +22,7 @@ export function getTicks(options) {
   } = options;
 
   // band scale
-  if (isBandScale(scale)) {
+  if (isOrdinalScale(scale)) {
     const domain = scale.domain();
     const tickLabelPlacement = tickLabelPlacementProp ?? 'middle';
     if (scale.bandwidth() > 0) {

package/esm/hooks/useTicksGrouped.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { isBandScale } from "../internals/isBandScale.js";
+import { isOrdinalScale } from "../internals/scaleGuards.js";
 const offsetRatio = {
   start: 0,
   extremities: 0,
@@ -62,7 +62,7 @@ function mapToGrouping(tickValues, groups, tickPlacement, tickLabelPlacement, sc
       if (isNew) {
         currentValueCount = 1;
         // Calculate tick offset
-        const tickOffset = isBandScale(scale) ? scale(tickValue) - (scale.step() - scale.bandwidth()) / 2 + offsetRatio[tickPlacement] * scale.step() : scale(tickValue);
+        const tickOffset = isOrdinalScale(scale) ? scale(tickValue) - (scale.step() - scale.bandwidth()) / 2 + offsetRatio[tickPlacement] * scale.step() : scale(tickValue);
 
         // Calculate the label offset
         const labelOffset = scale.step() * currentValueCount * (offsetRatio[tickLabelPlacement] - offsetRatio[tickPlacement]);

package/esm/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./constants/index.js";
 export * from "./context/index.js";
 export * from "./hooks/index.js";
+export * from "./plugins/index.js";
 export * from "./colorPalettes/index.js";
 export * from "./models/index.js";
 export * from "./ChartsClipPath/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.11.2
+ * @mui/x-charts v8.12.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -8,6 +8,7 @@
 export * from "./constants/index.js";
 export * from "./context/index.js";
 export * from "./hooks/index.js";
+export * from "./plugins/index.js";
 export * from "./colorPalettes/index.js";
 export * from "./models/index.js";
 export * from "./ChartsClipPath/index.js";