@mui/x-charts 8.11.2 → 8.12.0

package/esm/locales/utils/chartsLocaleTextApi.d.ts

@@ -32,5 +32,389 @@ export interface ChartsLocaleText {
    * @returns {string} The localized string for an export image button.
    */
   toolbarExportImage: (mimeType: ChartImageExportMimeType | (string & {})) => string;
+  /**
+   * Label for the bar chart type.
+   */
+  chartTypeBar: string;
+  /**
+   * Label for the column chart type.
+   */
+  chartTypeColumn: string;
+  /**
+   * Label for the line chart type.
+   */
+  chartTypeLine: string;
+  /**
+   * Label for the area chart type.
+   */
+  chartTypeArea: string;
+  /**
+   * Label for the pie chart type.
+   */
+  chartTypePie: string;
+  /**
+   * Label for the color palette control.
+   */
+  chartPaletteLabel: string;
+  /**
+   * Label for the rainbow surge palette.
+   */
+  chartPaletteNameRainbowSurge: string;
+  /**
+   * Label for the blueberry twilight palette.
+   */
+  chartPaletteNameBlueberryTwilight: string;
+  /**
+   * Label for the mango fusion palette.
+   */
+  chartPaletteNameMangoFusion: string;
+  /**
+   * Label for the cheerful fiesta palette.
+   */
+  chartPaletteNameCheerfulFiesta: string;
+  /**
+   * Label for the strawberry sky palette.
+   */
+  chartPaletteNameStrawberrySky: string;
+  /**
+   * Label for the blue palette.
+   */
+  chartPaletteNameBlue: string;
+  /**
+   * Label for the green palette.
+   */
+  chartPaletteNameGreen: string;
+  /**
+   * Label for the purple palette.
+   */
+  chartPaletteNamePurple: string;
+  /**
+   * Label for the red palette.
+   */
+  chartPaletteNameRed: string;
+  /**
+   * Label for the orange palette.
+   */
+  chartPaletteNameOrange: string;
+  /**
+   * Label for the yellow palette.
+   */
+  chartPaletteNameYellow: string;
+  /**
+   * Label for the cyan palette.
+   */
+  chartPaletteNameCyan: string;
+  /**
+   * Label for the pink palette.
+   */
+  chartPaletteNamePink: string;
+  /**
+   * Label for the chart configuration section.
+   */
+  chartConfigurationSectionChart: string;
+  /**
+   * Label for the axes configuration section.
+   */
+  chartConfigurationSectionAxes: string;
+  /**
+   * Label for the tooltip configuration section.
+   */
+  chartConfigurationSectionTooltip: string;
+  /**
+   * Label for the legend configuration section.
+   */
+  chartConfigurationSectionLegend: string;
+  /**
+   * Label for the columns configuration section.
+   */
+  chartConfigurationSectionColumns: string;
+  /**
+   * Label for the bars configuration section.
+   */
+  chartConfigurationSectionBars: string;
+  /**
+   * Label for the lines configuration section.
+   */
+  chartConfigurationSectionLines: string;
+  /**
+   * Label for the areas configuration section.
+   */
+  chartConfigurationSectionAreas: string;
+  /**
+   * Label for the arcs configuration section.
+   */
+  chartConfigurationSectionArcs: string;
+  /**
+   * Label for the grid configuration control.
+   */
+  chartConfigurationGrid: string;
+  /**
+   * Label for the border radius configuration control.
+   */
+  chartConfigurationBorderRadius: string;
+  /**
+   * Label for the category gap ratio configuration control.
+   */
+  chartConfigurationCategoryGapRatio: string;
+  /**
+   * Label for the bar gap ratio configuration control.
+   */
+  chartConfigurationBarGapRatio: string;
+  /**
+   * Label for the stacked configuration control.
+   */
+  chartConfigurationStacked: string;
+  /**
+   * Label for the skip animation configuration control.
+   */
+  chartConfigurationShowToolbar: string;
+  /**
+   * Label for the skip animation configuration control.
+   */
+  chartConfigurationSkipAnimation: string;
+  /**
+   * Label for the inner radius configuration control.
+   */
+  chartConfigurationInnerRadius: string;
+  /**
+   * Label for the outer radius configuration control.
+   */
+  chartConfigurationOuterRadius: string;
+  /**
+   * Label for the colors configuration control.
+   */
+  chartConfigurationColors: string;
+  /**
+   * Label for the hide legend configuration control.
+   */
+  chartConfigurationHideLegend: string;
+  /**
+   * Label for the show mark configuration control.
+   */
+  chartConfigurationShowMark: string;
+  /**
+   * Label for the height configuration control.
+   */
+  chartConfigurationHeight: string;
+  /**
+   * Label for the width configuration control.
+   */
+  chartConfigurationWidth: string;
+  /**
+   * Label for the series gap configuration control.
+   */
+  chartConfigurationSeriesGap: string;
+  /**
+   * Label for the tick placement configuration control.
+   */
+  chartConfigurationTickPlacement: string;
+  /**
+   * Label for the tick label placement configuration control.
+   */
+  chartConfigurationTickLabelPlacement: string;
+  /**
+   * Label for the categories axis label configuration control.
+   */
+  chartConfigurationCategoriesAxisLabel: string;
+  /**
+   * Label for the series axis label configuration control.
+   */
+  chartConfigurationSeriesAxisLabel: string;
+  /**
+   * Label for the X-axis position configuration control.
+   */
+  chartConfigurationXAxisPosition: string;
+  /**
+   * Label for the Y-axis position configuration control.
+   */
+  chartConfigurationYAxisPosition: string;
+  /**
+   * Label for the reverse series axis configuration control.
+   */
+  chartConfigurationSeriesAxisReverse: string;
+  /**
+   * Label for the tooltip placement configuration control.
+   */
+  chartConfigurationTooltipPlacement: string;
+  /**
+   * Label for the tooltip trigger configuration control.
+   */
+  chartConfigurationTooltipTrigger: string;
+  /**
+   * Label for the legend position configuration control.
+   */
+  chartConfigurationLegendPosition: string;
+  /**
+   * Label for the legend direction configuration control.
+   */
+  chartConfigurationLegendDirection: string;
+  /**
+   * Label for the bar labels configuration control.
+   */
+  chartConfigurationBarLabels: string;
+  /**
+   * Label for the column labels configuration control.
+   */
+  chartConfigurationColumnLabels: string;
+  /**
+   * Label for the interpolation configuration control.
+   */
+  chartConfigurationInterpolation: string;
+  /**
+   * Label for the padding angle configuration control.
+   */
+  chartConfigurationPaddingAngle: string;
+  /**
+   * Label for the corner radius configuration control.
+   */
+  chartConfigurationCornerRadius: string;
+  /**
+   * Label for the arc labels configuration control.
+   */
+  chartConfigurationArcLabels: string;
+  /**
+   * Label for the start angle configuration control.
+   */
+  chartConfigurationStartAngle: string;
+  /**
+   * Label for the end angle configuration control.
+   */
+  chartConfigurationEndAngle: string;
+  /**
+   * Label for the pie tooltip trigger configuration control.
+   */
+  chartConfigurationPieTooltipTrigger: string;
+  /**
+   * Label for the pie legend position configuration control.
+   */
+  chartConfigurationPieLegendPosition: string;
+  /**
+   * Label for the pie legend direction configuration control.
+   */
+  chartConfigurationPieLegendDirection: string;
+  /**
+   * Label for the "None" option.
+   */
+  chartConfigurationOptionNone: string;
+  /**
+   * Label for the "Value" option.
+   */
+  chartConfigurationOptionValue: string;
+  /**
+   * Label for the "Auto" option.
+   */
+  chartConfigurationOptionAuto: string;
+  /**
+   * Label for the "Top" option.
+   */
+  chartConfigurationOptionTop: string;
+  /**
+   * Label for the "Top Left" option.
+   */
+  chartConfigurationOptionTopLeft: string;
+  /**
+   * Label for the "Top Right" option.
+   */
+  chartConfigurationOptionTopRight: string;
+  /**
+   * Label for the "Bottom" option.
+   */
+  chartConfigurationOptionBottom: string;
+  /**
+   * Label for the "Bottom Left" option.
+   */
+  chartConfigurationOptionBottomLeft: string;
+  /**
+   * Label for the "Bottom Right" option.
+   */
+  chartConfigurationOptionBottomRight: string;
+  /**
+   * Label for the "Left" option.
+   */
+  chartConfigurationOptionLeft: string;
+  /**
+   * Label for the "Right" option.
+   */
+  chartConfigurationOptionRight: string;
+  /**
+   * Label for the "Axis" option.
+   */
+  chartConfigurationOptionAxis: string;
+  /**
+   * Label for the "Item" option.
+   */
+  chartConfigurationOptionItem: string;
+  /**
+   * Label for the "Horizontal" option.
+   */
+  chartConfigurationOptionHorizontal: string;
+  /**
+   * Label for the "Vertical" option.
+   */
+  chartConfigurationOptionVertical: string;
+  /**
+   * Label for the "Both" grid configuration option.
+   */
+  chartConfigurationOptionBoth: string;
+  /**
+   * Label for the "Start" option.
+   */
+  chartConfigurationOptionStart: string;
+  /**
+   * Label for the "Middle" option.
+   */
+  chartConfigurationOptionMiddle: string;
+  /**
+   * Label for the "End" option.
+   */
+  chartConfigurationOptionEnd: string;
+  /**
+   * Label for the "Extremities" option.
+   */
+  chartConfigurationOptionExtremities: string;
+  /**
+   * Label for the "Tick" option.
+   */
+  chartConfigurationOptionTick: string;
+  /**
+   * Label for the "Monotone X" interpolation option.
+   */
+  chartConfigurationOptionMonotoneX: string;
+  /**
+   * Label for the "Monotone Y" interpolation option.
+   */
+  chartConfigurationOptionMonotoneY: string;
+  /**
+   * Label for the "Catmull-Rom" interpolation option.
+   */
+  chartConfigurationOptionCatmullRom: string;
+  /**
+   * Label for the "Linear" interpolation option.
+   */
+  chartConfigurationOptionLinear: string;
+  /**
+   * Label for the "Natural" interpolation option.
+   */
+  chartConfigurationOptionNatural: string;
+  /**
+   * Label for the "Step" interpolation option.
+   */
+  chartConfigurationOptionStep: string;
+  /**
+   * Label for the "Step Before" interpolation option.
+   */
+  chartConfigurationOptionStepBefore: string;
+  /**
+   * Label for the "Step After" interpolation option.
+   */
+  chartConfigurationOptionStepAfter: string;
+  /**
+   * Label for the "Bump X" interpolation option.
+   */
+  chartConfigurationOptionBumpX: string;
+  /**
+   * Label for the "Bump Y" interpolation option.
+   */
+  chartConfigurationOptionBumpY: string;
 }
 export type ChartsTranslationKeys = keyof ChartsLocaleText;

package/esm/locales/utils/getChartsLocalization.d.ts

@@ -16,6 +16,102 @@ export declare const getChartsLocalization: (chartsTranslations: Partial<ChartsL
           toolbarExport?: string | undefined;
           toolbarExportPrint?: string | undefined;
           toolbarExportImage?: ((mimeType: import("./imageMimeTypes.js").ChartImageExportMimeType | (string & {})) => string) | undefined;
+          chartTypeBar?: string | undefined;
+          chartTypeColumn?: string | undefined;
+          chartTypeLine?: string | undefined;
+          chartTypeArea?: string | undefined;
+          chartTypePie?: string | undefined;
+          chartPaletteLabel?: string | undefined;
+          chartPaletteNameRainbowSurge?: string | undefined;
+          chartPaletteNameBlueberryTwilight?: string | undefined;
+          chartPaletteNameMangoFusion?: string | undefined;
+          chartPaletteNameCheerfulFiesta?: string | undefined;
+          chartPaletteNameStrawberrySky?: string | undefined;
+          chartPaletteNameBlue?: string | undefined;
+          chartPaletteNameGreen?: string | undefined;
+          chartPaletteNamePurple?: string | undefined;
+          chartPaletteNameRed?: string | undefined;
+          chartPaletteNameOrange?: string | undefined;
+          chartPaletteNameYellow?: string | undefined;
+          chartPaletteNameCyan?: string | undefined;
+          chartPaletteNamePink?: string | undefined;
+          chartConfigurationSectionChart?: string | undefined;
+          chartConfigurationSectionAxes?: string | undefined;
+          chartConfigurationSectionTooltip?: string | undefined;
+          chartConfigurationSectionLegend?: string | undefined;
+          chartConfigurationSectionColumns?: string | undefined;
+          chartConfigurationSectionBars?: string | undefined;
+          chartConfigurationSectionLines?: string | undefined;
+          chartConfigurationSectionAreas?: string | undefined;
+          chartConfigurationSectionArcs?: string | undefined;
+          chartConfigurationGrid?: string | undefined;
+          chartConfigurationBorderRadius?: string | undefined;
+          chartConfigurationCategoryGapRatio?: string | undefined;
+          chartConfigurationBarGapRatio?: string | undefined;
+          chartConfigurationStacked?: string | undefined;
+          chartConfigurationShowToolbar?: string | undefined;
+          chartConfigurationSkipAnimation?: string | undefined;
+          chartConfigurationInnerRadius?: string | undefined;
+          chartConfigurationOuterRadius?: string | undefined;
+          chartConfigurationColors?: string | undefined;
+          chartConfigurationHideLegend?: string | undefined;
+          chartConfigurationShowMark?: string | undefined;
+          chartConfigurationHeight?: string | undefined;
+          chartConfigurationWidth?: string | undefined;
+          chartConfigurationSeriesGap?: string | undefined;
+          chartConfigurationTickPlacement?: string | undefined;
+          chartConfigurationTickLabelPlacement?: string | undefined;
+          chartConfigurationCategoriesAxisLabel?: string | undefined;
+          chartConfigurationSeriesAxisLabel?: string | undefined;
+          chartConfigurationXAxisPosition?: string | undefined;
+          chartConfigurationYAxisPosition?: string | undefined;
+          chartConfigurationSeriesAxisReverse?: string | undefined;
+          chartConfigurationTooltipPlacement?: string | undefined;
+          chartConfigurationTooltipTrigger?: string | undefined;
+          chartConfigurationLegendPosition?: string | undefined;
+          chartConfigurationLegendDirection?: string | undefined;
+          chartConfigurationBarLabels?: string | undefined;
+          chartConfigurationColumnLabels?: string | undefined;
+          chartConfigurationInterpolation?: string | undefined;
+          chartConfigurationPaddingAngle?: string | undefined;
+          chartConfigurationCornerRadius?: string | undefined;
+          chartConfigurationArcLabels?: string | undefined;
+          chartConfigurationStartAngle?: string | undefined;
+          chartConfigurationEndAngle?: string | undefined;
+          chartConfigurationPieTooltipTrigger?: string | undefined;
+          chartConfigurationPieLegendPosition?: string | undefined;
+          chartConfigurationPieLegendDirection?: string | undefined;
+          chartConfigurationOptionNone?: string | undefined;
+          chartConfigurationOptionValue?: string | undefined;
+          chartConfigurationOptionAuto?: string | undefined;
+          chartConfigurationOptionTop?: string | undefined;
+          chartConfigurationOptionTopLeft?: string | undefined;
+          chartConfigurationOptionTopRight?: string | undefined;
+          chartConfigurationOptionBottom?: string | undefined;
+          chartConfigurationOptionBottomLeft?: string | undefined;
+          chartConfigurationOptionBottomRight?: string | undefined;
+          chartConfigurationOptionLeft?: string | undefined;
+          chartConfigurationOptionRight?: string | undefined;
+          chartConfigurationOptionAxis?: string | undefined;
+          chartConfigurationOptionItem?: string | undefined;
+          chartConfigurationOptionHorizontal?: string | undefined;
+          chartConfigurationOptionVertical?: string | undefined;
+          chartConfigurationOptionBoth?: string | undefined;
+          chartConfigurationOptionStart?: string | undefined;
+          chartConfigurationOptionMiddle?: string | undefined;
+          chartConfigurationOptionEnd?: string | undefined;
+          chartConfigurationOptionExtremities?: string | undefined;
+          chartConfigurationOptionTick?: string | undefined;
+          chartConfigurationOptionMonotoneX?: string | undefined;
+          chartConfigurationOptionMonotoneY?: string | undefined;
+          chartConfigurationOptionCatmullRom?: string | undefined;
+          chartConfigurationOptionLinear?: string | undefined;
+          chartConfigurationOptionNatural?: string | undefined;
+          chartConfigurationOptionStep?: string | undefined;
+          chartConfigurationOptionStepBefore?: string | undefined;
+          chartConfigurationOptionStepAfter?: string | undefined;
+          chartConfigurationOptionBumpX?: string | undefined;
+          chartConfigurationOptionBumpY?: string | undefined;
         };
       };
     };

package/esm/models/axis.d.ts

@@ -11,6 +11,9 @@ export type D3Scale<Domain extends {
   toString(): string;
 } = number | Date | string, Range = number, Output = number> = ScaleBand<Domain> | ScaleSymLog<Range, Output> | ScaleLogarithmic<Range, Output> | ScalePoint<Domain> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;
 export type D3ContinuousScale<Range = number, Output = number> = ScaleSymLog<Range, Output> | ScaleLogarithmic<Range, Output> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;
+export type D3OrdinalScale<Domain extends {
+  toString(): string;
+} = number | Date | string> = ScaleBand<Domain> | ScalePoint<Domain>;
 export interface ChartsAxisSlots {
   /**
    * Custom component for the axis main line.

package/esm/plugins/index.d.ts

@@ -0,0 +1,6 @@
+export { useChartCartesianAxis, type UseChartCartesianAxisSignature } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+export { useChartHighlight, type UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+export { useChartInteraction, type UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+export { useChartPolarAxis, type UseChartPolarAxisSignature } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
+export { useChartClosestPoint, type UseChartClosestPointSignature } from "../internals/plugins/featurePlugins/useChartClosestPoint/index.js";
+export { useChartZAxis, type UseChartZAxisSignature } from "../internals/plugins/featurePlugins/useChartZAxis/index.js";

package/esm/plugins/index.js

@@ -0,0 +1,12 @@
+// Core plugins
+
+// We don't export the core plugins since they are run in the useCharts() in any case.
+// Plus there is a naming conflict with `useChartId()`: The plugin managing chart id, or the hook used to retrieve this same id.
+
+// Feature plugins
+export { useChartCartesianAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+export { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+export { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+export { useChartPolarAxis } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
+export { useChartClosestPoint } from "../internals/plugins/featurePlugins/useChartClosestPoint/index.js";
+export { useChartZAxis } from "../internals/plugins/featurePlugins/useChartZAxis/index.js";

package/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/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/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/hooks/useFocusedItem.js

@@ -0,0 +1,26 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFocusedItem = useFocusedItem;
+var React = _interopRequireWildcard(require("react"));
+var _useStore = require("../internals/store/useStore");
+var _useSelector = require("../internals/store/useSelector");
+var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
+/**
+ * Get the focused item from keyboard navigation.
+ */
+function useFocusedItem() {
+  const store = (0, _useStore.useStore)();
+  const focusedSeriesType = (0, _useSelector.useSelector)(store, _useChartKeyboardNavigation.selectorChartsFocusedSeriesType);
+  const focusedSeriesId = (0, _useSelector.useSelector)(store, _useChartKeyboardNavigation.selectorChartsFocusedSeriesId);
+  const focusedDataIndex = (0, _useSelector.useSelector)(store, _useChartKeyboardNavigation.selectorChartsFocusedDataIndex);
+  return React.useMemo(() => focusedSeriesType === undefined || focusedSeriesId === undefined || focusedDataIndex === undefined ? null : {
+    seriesType: focusedSeriesType,
+    seriesId: focusedSeriesId,
+    dataIndex: focusedDataIndex
+  }, [focusedSeriesType, focusedSeriesId, focusedDataIndex]);
+}

package/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/hooks/useIsItemFocused.js

@@ -0,0 +1,20 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsItemFocused = useIsItemFocused;
+var _useFocusedItem = require("./useFocusedItem");
+/**
+ * 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
+ */
+function useIsItemFocused(item) {
+  const focusedItem = (0, _useFocusedItem.useFocusedItem)();
+  return focusedItem !== null && focusedItem.seriesType === item.seriesType && focusedItem.seriesId === item.seriesId && focusedItem.dataIndex === item.dataIndex;
+}

package/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;