@mui/x-charts 9.9.0 → 9.10.1

package/RadarChart/RadarSeriesPlot/useInteractionAllItemProps.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { SeriesItemIdentifierWithData } from "../../models/seriesType/index.js";
-export declare const useInteractionAllItemProps: (data: SeriesItemIdentifierWithData<"radar">[], skip?: boolean) => {
+export declare const useInteractionAllItemProps: (data: SeriesItemIdentifierWithData<'radar'>[], skip?: boolean) => {
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;
   onPointerDown?: (event: React.PointerEvent) => void;

package/RadarChart/RadarSeriesPlot/useRadarSeriesData.d.mts

@@ -5,6 +5,18 @@ import type { SeriesId } from "../../models/seriesType/common.mjs";
  * @returns
  */
 export declare function useRadarSeriesData(querySeriesId?: SeriesId): {
+  type: 'radar';
+  data: number[];
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  hideMark?: boolean;
+  fillArea?: boolean;
+  hidden: boolean;
+  color: string;
+  colorGetter?: ((data: import("../../internals/index.mjs").ColorCallbackValue<number>) => string) | undefined;
+  id: SeriesId;
+  valueFormatter: import("../../internals/index.mjs").SeriesValueFormatter<number>;
+  highlightScope?: import("../../internals/index.mjs").CommonHighlightScope | undefined;
+  labelMarkType?: import("../../internals/index.mjs").ChartsLabelMarkType;
   seriesId: string;
   isSeriesHighlighted: boolean;
   isSeriesFaded: boolean;
@@ -17,16 +29,4 @@ export declare function useRadarSeriesData(querySeriesId?: SeriesId): {
     value: number;
     color: string;
   }[];
-  hidden: boolean;
-  type: "radar";
-  highlightScope?: import("../../internals/index.mjs").CommonHighlightScope | undefined;
-  labelMarkType?: import("../../internals/index.mjs").ChartsLabelMarkType | undefined;
-  colorGetter?: ((data: import("../../internals/index.mjs").ColorCallbackValue<number>) => string) | undefined;
-  label?: string | ((location: "tooltip" | "legend") => string) | undefined;
-  hideMark?: boolean | undefined;
-  fillArea?: boolean | undefined;
-  id: SeriesId;
-  valueFormatter: import("../../internals/index.mjs").SeriesValueFormatter<number>;
-  color: string;
-  data: number[];
 }[];

package/RadarChart/RadarSeriesPlot/useRadarSeriesData.d.ts

@@ -5,6 +5,18 @@ import type { SeriesId } from "../../models/seriesType/common.js";
  * @returns
  */
 export declare function useRadarSeriesData(querySeriesId?: SeriesId): {
+  type: 'radar';
+  data: number[];
+  label?: string | ((location: 'tooltip' | 'legend') => string);
+  hideMark?: boolean;
+  fillArea?: boolean;
+  hidden: boolean;
+  color: string;
+  colorGetter?: ((data: import("../../internals/index.js").ColorCallbackValue<number>) => string) | undefined;
+  id: SeriesId;
+  valueFormatter: import("../../internals/index.js").SeriesValueFormatter<number>;
+  highlightScope?: import("../../internals/index.js").CommonHighlightScope | undefined;
+  labelMarkType?: import("../../internals/index.js").ChartsLabelMarkType;
   seriesId: string;
   isSeriesHighlighted: boolean;
   isSeriesFaded: boolean;
@@ -17,16 +29,4 @@ export declare function useRadarSeriesData(querySeriesId?: SeriesId): {
     value: number;
     color: string;
   }[];
-  hidden: boolean;
-  type: "radar";
-  highlightScope?: import("../../internals/index.js").CommonHighlightScope | undefined;
-  labelMarkType?: import("../../internals/index.js").ChartsLabelMarkType | undefined;
-  colorGetter?: ((data: import("../../internals/index.js").ColorCallbackValue<number>) => string) | undefined;
-  label?: string | ((location: "tooltip" | "legend") => string) | undefined;
-  hideMark?: boolean | undefined;
-  fillArea?: boolean | undefined;
-  id: SeriesId;
-  valueFormatter: import("../../internals/index.js").SeriesValueFormatter<number>;
-  color: string;
-  data: number[];
 }[];

package/RadarChart/radarClasses.d.mts

@@ -27,4 +27,4 @@ export interface RadarClasses {
 export type RadarClassKey = keyof RadarClasses;
 export declare function getRadarUtilityClass(slot: string): string;
 export declare const radarClasses: RadarClasses;
-export declare const useUtilityClasses: (classes?: Partial<RadarClasses>) => Record<"axisLine" | "axisLabel" | "axisRoot" | "gridRadial" | "gridDivider" | "gridStripe" | "seriesRoot" | "seriesArea" | "seriesMark" | "axisHighlightRoot" | "axisHighlightLine" | "axisHighlightDot", string>;
+export declare const useUtilityClasses: (classes?: Partial<RadarClasses>) => Record<"axisHighlightDot" | "axisHighlightLine" | "axisHighlightRoot" | "axisLabel" | "axisLine" | "axisRoot" | "gridDivider" | "gridRadial" | "gridStripe" | "seriesArea" | "seriesMark" | "seriesRoot", string>;

package/RadarChart/radarClasses.d.ts

@@ -27,4 +27,4 @@ export interface RadarClasses {
 export type RadarClassKey = keyof RadarClasses;
 export declare function getRadarUtilityClass(slot: string): string;
 export declare const radarClasses: RadarClasses;
-export declare const useUtilityClasses: (classes?: Partial<RadarClasses>) => Record<"axisLine" | "axisLabel" | "axisRoot" | "gridRadial" | "gridDivider" | "gridStripe" | "seriesRoot" | "seriesArea" | "seriesMark" | "axisHighlightRoot" | "axisHighlightLine" | "axisHighlightDot", string>;
+export declare const useUtilityClasses: (classes?: Partial<RadarClasses>) => Record<"axisHighlightDot" | "axisHighlightLine" | "axisHighlightRoot" | "axisLabel" | "axisLine" | "axisRoot" | "gridDivider" | "gridRadial" | "gridStripe" | "seriesArea" | "seriesMark" | "seriesRoot", string>;

package/RadarChart/seriesConfig/keyboardFocusHandler.js

@@ -6,5 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _createCommonKeyboardFocusHandler = require("../../internals/createCommonKeyboardFocusHandler");
 const outSeriesTypes = new Set(['radar']);
-const keyboardFocusHandler = (0, _createCommonKeyboardFocusHandler.createCommonKeyboardFocusHandler)(outSeriesTypes, true);
+const allowCycles = true;
+const useCurrentSeriesMaxLength = false;
+const keyboardFocusHandler = (0, _createCommonKeyboardFocusHandler.createCommonKeyboardFocusHandler)(outSeriesTypes, allowCycles, useCurrentSeriesMaxLength);
 var _default = exports.default = keyboardFocusHandler;

package/RadarChart/seriesConfig/keyboardFocusHandler.mjs

@@ -1,4 +1,6 @@
 import { createCommonKeyboardFocusHandler } from "../../internals/createCommonKeyboardFocusHandler.mjs";
 const outSeriesTypes = new Set(['radar']);
-const keyboardFocusHandler = createCommonKeyboardFocusHandler(outSeriesTypes, true);
+const allowCycles = true;
+const useCurrentSeriesMaxLength = false;
+const keyboardFocusHandler = createCommonKeyboardFocusHandler(outSeriesTypes, allowCycles, useCurrentSeriesMaxLength);
 export default keyboardFocusHandler;

package/RadarChart/useRadarChartProps.d.mts

@@ -15,7 +15,7 @@ import type { RadarSeriesAreaProps, RadarSeriesMarksProps } from "./RadarSeriesP
  * @returns An object with props for the children components of RadarChart
  */
 export declare const useRadarChartProps: (props: RadarChartProps) => {
-  highlight: "none" | "series" | "axis";
+  highlight: "axis" | "none" | "series";
   chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
   chartsSurfaceProps: ChartsSurfaceProps;
   radarDataProviderProps: RadarDataProviderProps<RadarChartPluginSignatures>;

package/RadarChart/useRadarChartProps.d.ts

@@ -15,7 +15,7 @@ import type { RadarSeriesAreaProps, RadarSeriesMarksProps } from "./RadarSeriesP
  * @returns An object with props for the children components of RadarChart
  */
 export declare const useRadarChartProps: (props: RadarChartProps) => {
-  highlight: "none" | "series" | "axis";
+  highlight: "axis" | "none" | "series";
   chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
   chartsSurfaceProps: ChartsSurfaceProps;
   radarDataProviderProps: RadarDataProviderProps<RadarChartPluginSignatures>;

package/ScatterChart/ScatterChart.d.mts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { MakeOptional } from '@mui/x-internals/types';
+import type { WithDataAttributes } from '@mui/utils/types';
 import type { ChartsToolbarSlotProps, ChartsToolbarSlots } from "../Toolbar/index.mjs";
 import type { ChartsSlots, ChartsSlotProps } from "../internals/material/index.mjs";
 import type { ScatterPlotProps, ScatterPlotSlotProps, ScatterPlotSlots } from "./ScatterPlot.mjs";
@@ -21,7 +22,7 @@ export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotS
    * Slot props for the tooltip component.
    * @default {}
    */
-  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>> & TooltipPropsOverrides;
+  tooltip?: WithDataAttributes<Partial<ChartsTooltipProps<'item' | 'none'>> & TooltipPropsOverrides>;
 }
 export type ScatterSeries = MakeOptional<ScatterSeriesType, 'type'>;
 export interface ScatterChartProps extends Omit<ChartsContainerProps<'scatter', ScatterChartPluginSignatures>, 'series' | 'plugins' | 'onItemClick' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<ScatterPlotProps, 'renderer'> {

package/ScatterChart/ScatterChart.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { MakeOptional } from '@mui/x-internals/types';
+import type { WithDataAttributes } from '@mui/utils/types';
 import type { ChartsToolbarSlotProps, ChartsToolbarSlots } from "../Toolbar/index.js";
 import type { ChartsSlots, ChartsSlotProps } from "../internals/material/index.js";
 import type { ScatterPlotProps, ScatterPlotSlotProps, ScatterPlotSlots } from "./ScatterPlot.js";
@@ -21,7 +22,7 @@ export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotS
    * Slot props for the tooltip component.
    * @default {}
    */
-  tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>> & TooltipPropsOverrides;
+  tooltip?: WithDataAttributes<Partial<ChartsTooltipProps<'item' | 'none'>> & TooltipPropsOverrides>;
 }
 export type ScatterSeries = MakeOptional<ScatterSeriesType, 'type'>;
 export interface ScatterChartProps extends Omit<ChartsContainerProps<'scatter', ScatterChartPluginSignatures>, 'series' | 'plugins' | 'onItemClick' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<ScatterPlotProps, 'renderer'> {

package/ScatterChart/ScatterMarker.types.d.mts

@@ -1,4 +1,5 @@
 import type * as React from 'react';
+import type { WithDataAttributes } from '@mui/utils/types';
 import type { ScatterMarkerProps } from "./ScatterMarker.mjs";
 import type { MarkerPropsOverrides } from "../models/chartsSlotsComponentsProps.mjs";
 export interface ScatterMarkerSlots {
@@ -9,7 +10,7 @@ export interface ScatterMarkerSlots {
   marker?: React.JSXElementConstructor<ScatterMarkerProps & MarkerPropsOverrides>;
 }
 export interface ScatterMarkerSlotProps {
-  marker?: Partial<ScatterMarkerProps> & MarkerPropsOverrides;
+  marker?: WithDataAttributes<Partial<ScatterMarkerProps> & MarkerPropsOverrides>;
 }
 export interface ScatterMarkerSlotExtension {
   /**

package/ScatterChart/ScatterMarker.types.d.ts

@@ -1,4 +1,5 @@
 import type * as React from 'react';
+import type { WithDataAttributes } from '@mui/utils/types';
 import type { ScatterMarkerProps } from "./ScatterMarker.js";
 import type { MarkerPropsOverrides } from "../models/chartsSlotsComponentsProps.js";
 export interface ScatterMarkerSlots {
@@ -9,7 +10,7 @@ export interface ScatterMarkerSlots {
   marker?: React.JSXElementConstructor<ScatterMarkerProps & MarkerPropsOverrides>;
 }
 export interface ScatterMarkerSlotProps {
-  marker?: Partial<ScatterMarkerProps> & MarkerPropsOverrides;
+  marker?: WithDataAttributes<Partial<ScatterMarkerProps> & MarkerPropsOverrides>;
 }
 export interface ScatterMarkerSlotExtension {
   /**

package/ScatterChart/scatterClasses.d.mts

@@ -19,4 +19,4 @@ export declare const scatterClasses: ScatterClasses;
 export interface UseUtilityClassesOptions {
   classes?: Partial<ScatterClasses>;
 }
-export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"root" | "marker" | "series" | "focusedMark" | "highlightedMark", string>;
+export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"focusedMark" | "highlightedMark" | "marker" | "root" | "series", string>;

package/ScatterChart/scatterClasses.d.ts

@@ -19,4 +19,4 @@ export declare const scatterClasses: ScatterClasses;
 export interface UseUtilityClassesOptions {
   classes?: Partial<ScatterClasses>;
 }
-export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"root" | "marker" | "series" | "focusedMark" | "highlightedMark", string>;
+export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"focusedMark" | "highlightedMark" | "marker" | "root" | "series", string>;

package/ScatterChart/useScatterPlotData.d.mts

@@ -4,5 +4,5 @@ import type { DefaultizedScatterSeriesType, ScatterValueType } from "../models/i
 export declare function useScatterPlotData(series: DefaultizedScatterSeriesType, xScale: D3Scale, yScale: D3Scale, isPointInside: (x: number, y: number) => boolean): (ScatterValueType & {
   dataIndex: number;
   seriesId: SeriesId;
-  type: "scatter";
+  type: 'scatter';
 })[];

package/ScatterChart/useScatterPlotData.d.ts

@@ -4,5 +4,5 @@ import type { DefaultizedScatterSeriesType, ScatterValueType } from "../models/i
 export declare function useScatterPlotData(series: DefaultizedScatterSeriesType, xScale: D3Scale, yScale: D3Scale, isPointInside: (x: number, y: number) => boolean): (ScatterValueType & {
   dataIndex: number;
   seriesId: SeriesId;
-  type: "scatter";
+  type: 'scatter';
 })[];

package/SparkLineChart/SparkLineChart.d.mts

@@ -125,5 +125,5 @@ export interface SparkLineChartProps<PlotType extends 'line' | 'bar' = 'line' |
  *
  * - [SparkLineChart API](https://mui.com/x/api/charts/spark-line-chart/)
  */
-declare const SparkLineChart: React.ForwardRefExoticComponent<SparkLineChartProps<"line" | "bar"> & React.RefAttributes<HTMLDivElement>>;
+declare const SparkLineChart: React.ForwardRefExoticComponent<SparkLineChartProps<"bar" | "line"> & React.RefAttributes<HTMLDivElement>>;
 export { SparkLineChart };

package/SparkLineChart/SparkLineChart.d.ts

@@ -125,5 +125,5 @@ export interface SparkLineChartProps<PlotType extends 'line' | 'bar' = 'line' |
  *
  * - [SparkLineChart API](https://mui.com/x/api/charts/spark-line-chart/)
  */
-declare const SparkLineChart: React.ForwardRefExoticComponent<SparkLineChartProps<"line" | "bar"> & React.RefAttributes<HTMLDivElement>>;
+declare const SparkLineChart: React.ForwardRefExoticComponent<SparkLineChartProps<"bar" | "line"> & React.RefAttributes<HTMLDivElement>>;
 export { SparkLineChart };

package/Toolbar/Toolbar.types.d.mts

@@ -1,4 +1,5 @@
 import type * as React from 'react';
+import type { WithDataAttributes } from '@mui/utils/types';
 import type { ToolbarPropsOverrides } from "../models/chartsSlotsComponentsProps.mjs";
 export interface ChartsToolbarProps {}
 export interface ChartsToolbarSlots {
@@ -12,5 +13,5 @@ export interface ChartsToolbarSlotProps {
   /**
    * Props for the toolbar component.
    */
-  toolbar?: Partial<ChartsToolbarProps> & ToolbarPropsOverrides;
+  toolbar?: WithDataAttributes<Partial<ChartsToolbarProps> & ToolbarPropsOverrides>;
 }

package/Toolbar/Toolbar.types.d.ts

@@ -1,4 +1,5 @@
 import type * as React from 'react';
+import type { WithDataAttributes } from '@mui/utils/types';
 import type { ToolbarPropsOverrides } from "../models/chartsSlotsComponentsProps.js";
 export interface ChartsToolbarProps {}
 export interface ChartsToolbarSlots {
@@ -12,5 +13,5 @@ export interface ChartsToolbarSlotProps {
   /**
    * Props for the toolbar component.
    */
-  toolbar?: Partial<ChartsToolbarProps> & ToolbarPropsOverrides;
+  toolbar?: WithDataAttributes<Partial<ChartsToolbarProps> & ToolbarPropsOverrides>;
 }

package/hooks/animation/useAnimatePieArc.js

@@ -7,6 +7,7 @@ exports.useAnimatePieArc = useAnimatePieArc;
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
 var _useAnimate = require("./useAnimate");
+var _snapEndAngleToFullCircle = require("../../internals/snapEndAngleToFullCircle");
 function pieArcPropsInterpolator(from, to) {
   const interpolateStartAngle = (0, _d3Interpolate.interpolateNumber)(from.startAngle, to.startAngle);
   const interpolateEndAngle = (0, _d3Interpolate.interpolateNumber)(from.endAngle, to.endAngle);
@@ -53,7 +54,7 @@ function useAnimatePieArc(props) {
         innerRadius: p.innerRadius,
         outerRadius: p.outerRadius,
         startAngle: p.startAngle,
-        endAngle: p.endAngle
+        endAngle: (0, _snapEndAngleToFullCircle.snapEndAngleToFullCircle)(p.startAngle, p.endAngle, p.outerRadius, p.paddingAngle)
       }),
       visibility: p.startAngle === p.endAngle ? 'hidden' : 'visible'
     }),

package/hooks/animation/useAnimatePieArc.mjs

@@ -1,6 +1,7 @@
 import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
 import { interpolateNumber } from '@mui/x-charts-vendor/d3-interpolate';
 import { useAnimate } from "./useAnimate.mjs";
+import { snapEndAngleToFullCircle } from "../../internals/snapEndAngleToFullCircle.mjs";
 function pieArcPropsInterpolator(from, to) {
   const interpolateStartAngle = interpolateNumber(from.startAngle, to.startAngle);
   const interpolateEndAngle = interpolateNumber(from.endAngle, to.endAngle);
@@ -47,7 +48,7 @@ export function useAnimatePieArc(props) {
         innerRadius: p.innerRadius,
         outerRadius: p.outerRadius,
         startAngle: p.startAngle,
-        endAngle: p.endAngle
+        endAngle: snapEndAngleToFullCircle(p.startAngle, p.endAngle, p.outerRadius, p.paddingAngle)
       }),
       visibility: p.startAngle === p.endAngle ? 'hidden' : 'visible'
     }),

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.9.0
+ * @mui/x-charts v9.10.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.9.0
+ * @mui/x-charts v9.10.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/colorScale.d.mts

@@ -2,4 +2,4 @@ import type { ScaleOrdinal } from '@mui/x-charts-vendor/d3-scale';
 import type { ContinuousColorConfig, PiecewiseColorConfig, OrdinalColorConfig } from "../models/colorMapping.mjs";
 export declare function getSequentialColorScale<Value extends number | Date>(config: ContinuousColorConfig<Value> | PiecewiseColorConfig<Value>): import("@mui/x-charts-vendor/d3-scale").ScaleSequential<string, string | null> | import("@mui/x-charts-vendor/d3-scale").ScaleThreshold<Value, string, string | null>;
 export declare function getOrdinalColorScale<Value extends number | Date | string>(config: OrdinalColorConfig<Value>): ScaleOrdinal<Value, string, null | string> | ScaleOrdinal<number, string, null | string>;
-export declare function getColorScale(config: ContinuousColorConfig | PiecewiseColorConfig | OrdinalColorConfig): ScaleOrdinal<string | number | Date, string, string | null> | ScaleOrdinal<number, string, string | null> | import("@mui/x-charts-vendor/d3-scale").ScaleThreshold<number | Date, string, string | null>;
+export declare function getColorScale(config: ContinuousColorConfig | PiecewiseColorConfig | OrdinalColorConfig): ScaleOrdinal<number, string, string | null> | ScaleOrdinal<string | number | Date, string, string | null> | import("@mui/x-charts-vendor/d3-scale").ScaleThreshold<number | Date, string, string | null>;

package/internals/colorScale.d.ts

@@ -2,4 +2,4 @@ import type { ScaleOrdinal } from '@mui/x-charts-vendor/d3-scale';
 import type { ContinuousColorConfig, PiecewiseColorConfig, OrdinalColorConfig } from "../models/colorMapping.js";
 export declare function getSequentialColorScale<Value extends number | Date>(config: ContinuousColorConfig<Value> | PiecewiseColorConfig<Value>): import("@mui/x-charts-vendor/d3-scale").ScaleSequential<string, string | null> | import("@mui/x-charts-vendor/d3-scale").ScaleThreshold<Value, string, string | null>;
 export declare function getOrdinalColorScale<Value extends number | Date | string>(config: OrdinalColorConfig<Value>): ScaleOrdinal<Value, string, null | string> | ScaleOrdinal<number, string, null | string>;
-export declare function getColorScale(config: ContinuousColorConfig | PiecewiseColorConfig | OrdinalColorConfig): ScaleOrdinal<string | number | Date, string, string | null> | ScaleOrdinal<number, string, string | null> | import("@mui/x-charts-vendor/d3-scale").ScaleThreshold<number | Date, string, string | null>;
+export declare function getColorScale(config: ContinuousColorConfig | PiecewiseColorConfig | OrdinalColorConfig): ScaleOrdinal<number, string, string | null> | ScaleOrdinal<string | number | Date, string, string | null> | import("@mui/x-charts-vendor/d3-scale").ScaleThreshold<number | Date, string, string | null>;

package/internals/commonNextFocusItem.d.mts

@@ -28,7 +28,7 @@ compatibleSeriesTypes: Set<OutSeriesType>,
  */
 allowCycles?: boolean,
 /**
- * If true, series max index is defined by the current series length and not all series.
+ * If true (default), series max index is defined by the current series length and not all series.
  */
 useCurrentSeriesMaxLength?: boolean): (currentItem: WorkingItem | null, state: StateParameters<InSeriesType>) => ReturnedItem<OutSeriesType>;
 export declare function createGetPreviousIndexFocusedItem<InSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, OutSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = InSeriesType>(
@@ -41,7 +41,7 @@ compatibleSeriesTypes: Set<OutSeriesType>,
  */
 allowCycles?: boolean,
 /**
- * If true, series max index is defined by the current series length and not all series.
+ * If true (default), series max index is defined by the current series length and not all series.
  */
 useCurrentSeriesMaxLength?: boolean): (currentItem: WorkingItem | null, state: StateParameters<InSeriesType>) => ReturnedItem<OutSeriesType>;
 export declare function createGetNextSeriesFocusedItem<InSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, OutSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = InSeriesType>(

package/internals/commonNextFocusItem.d.ts

@@ -28,7 +28,7 @@ compatibleSeriesTypes: Set<OutSeriesType>,
  */
 allowCycles?: boolean,
 /**
- * If true, series max index is defined by the current series length and not all series.
+ * If true (default), series max index is defined by the current series length and not all series.
  */
 useCurrentSeriesMaxLength?: boolean): (currentItem: WorkingItem | null, state: StateParameters<InSeriesType>) => ReturnedItem<OutSeriesType>;
 export declare function createGetPreviousIndexFocusedItem<InSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, OutSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = InSeriesType>(
@@ -41,7 +41,7 @@ compatibleSeriesTypes: Set<OutSeriesType>,
  */
 allowCycles?: boolean,
 /**
- * If true, series max index is defined by the current series length and not all series.
+ * If true (default), series max index is defined by the current series length and not all series.
  */
 useCurrentSeriesMaxLength?: boolean): (currentItem: WorkingItem | null, state: StateParameters<InSeriesType>) => ReturnedItem<OutSeriesType>;
 export declare function createGetNextSeriesFocusedItem<InSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, OutSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = InSeriesType>(

package/internals/commonNextFocusItem.js

@@ -33,9 +33,9 @@ compatibleSeriesTypes,
  */
 allowCycles = false,
 /**
- * If true, series max index is defined by the current series length and not all series.
+ * If true (default), series max index is defined by the current series length and not all series.
  */
-useCurrentSeriesMaxLength = false) {
+useCurrentSeriesMaxLength = true) {
   return function getNextIndexFocusedItem(currentItem, state) {
     const processedSeries = (0, _useChartSeries.selectorChartSeriesProcessed)(state);
     let seriesId = currentItem?.seriesId;
@@ -84,9 +84,9 @@ compatibleSeriesTypes,
  */
 allowCycles = false,
 /**
- * If true, series max index is defined by the current series length and not all series.
+ * If true (default), series max index is defined by the current series length and not all series.
  */
-useCurrentSeriesMaxLength = false) {
+useCurrentSeriesMaxLength = true) {
   return function getPreviousIndexFocusedItem(currentItem, state) {
     const processedSeries = (0, _useChartSeries.selectorChartSeriesProcessed)(state);
     let seriesId = currentItem?.seriesId;

package/internals/commonNextFocusItem.mjs

@@ -25,9 +25,9 @@ compatibleSeriesTypes,
  */
 allowCycles = false,
 /**
- * If true, series max index is defined by the current series length and not all series.
+ * If true (default), series max index is defined by the current series length and not all series.
  */
-useCurrentSeriesMaxLength = false) {
+useCurrentSeriesMaxLength = true) {
   return function getNextIndexFocusedItem(currentItem, state) {
     const processedSeries = selectorChartSeriesProcessed(state);
     let seriesId = currentItem?.seriesId;
@@ -76,9 +76,9 @@ compatibleSeriesTypes,
  */
 allowCycles = false,
 /**
- * If true, series max index is defined by the current series length and not all series.
+ * If true (default), series max index is defined by the current series length and not all series.
  */
-useCurrentSeriesMaxLength = false) {
+useCurrentSeriesMaxLength = true) {
   return function getPreviousIndexFocusedItem(currentItem, state) {
     const processedSeries = selectorChartSeriesProcessed(state);
     let seriesId = currentItem?.seriesId;

package/internals/components/ChartsAccessibilityProxy/ChartsAccessibilityProxy.js

@@ -60,6 +60,7 @@ function ChartsAccessibilityProxy() {
           div.setAttribute('tabindex', '0');
         }
         div.setAttribute('role', 'img');
+        div.setAttribute('aria-hidden', 'true');
         div.setAttribute('aria-labelledby', i === 0 ? `voiceover-${chartId}-1` : `voiceover-${chartId}-2`);
         div.style.width = '100%';
         div.style.height = '100%';

package/internals/components/ChartsAccessibilityProxy/ChartsAccessibilityProxy.mjs

@@ -56,6 +56,7 @@ export function ChartsAccessibilityProxy() {
           div.setAttribute('tabindex', '0');
         }
         div.setAttribute('role', 'img');
+        div.setAttribute('aria-hidden', 'true');
         div.setAttribute('aria-labelledby', i === 0 ? `voiceover-${chartId}-1` : `voiceover-${chartId}-2`);
         div.style.width = '100%';
         div.style.height = '100%';

package/internals/configInit.d.mts

@@ -3,7 +3,7 @@ declare class CartesianSeriesTypes {
   types: Set<CartesianChartSeriesType>;
   constructor();
   addType(value: CartesianChartSeriesType): void;
-  getTypes(): Set<"line" | "bar" | "scatter">;
+  getTypes(): Set<"bar" | "line" | "scatter">;
 }
 declare class PolarSeriesTypes {
   types: Set<PolarChartSeriesType>;

package/internals/configInit.d.ts

@@ -3,7 +3,7 @@ declare class CartesianSeriesTypes {
   types: Set<CartesianChartSeriesType>;
   constructor();
   addType(value: CartesianChartSeriesType): void;
-  getTypes(): Set<"line" | "bar" | "scatter">;
+  getTypes(): Set<"bar" | "line" | "scatter">;
 }
 declare class PolarSeriesTypes {
   types: Set<PolarChartSeriesType>;

package/internals/consumeSlots.d.mts

@@ -42,7 +42,7 @@ import * as React from 'react';
  */
 export declare const consumeSlots: <Props extends {}, Ref extends {}, RenderFunction = React.ForwardRefExoticComponent<Props & React.RefAttributes<Ref>>>(name: string, slotPropName: string, options: {
   propagateSlots?: boolean;
-  defaultProps?: Omit<Partial<Props>, "slots" | "slotProps"> | ((props: Props) => Omit<Partial<Props>, "slots" | "slotProps">);
+  defaultProps?: Omit<Partial<Props>, 'slots' | 'slotProps'> | ((props: Props) => Omit<Partial<Props>, 'slots' | 'slotProps'>);
   omitProps?: Array<keyof Props>;
   classesResolver?: (props: Props, theme: any) => Record<string, string>;
 }, InComponent: RenderFunction) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<Ref>>;

package/internals/consumeSlots.d.ts

@@ -42,7 +42,7 @@ import * as React from 'react';
  */
 export declare const consumeSlots: <Props extends {}, Ref extends {}, RenderFunction = React.ForwardRefExoticComponent<Props & React.RefAttributes<Ref>>>(name: string, slotPropName: string, options: {
   propagateSlots?: boolean;
-  defaultProps?: Omit<Partial<Props>, "slots" | "slotProps"> | ((props: Props) => Omit<Partial<Props>, "slots" | "slotProps">);
+  defaultProps?: Omit<Partial<Props>, 'slots' | 'slotProps'> | ((props: Props) => Omit<Partial<Props>, 'slots' | 'slotProps'>);
   omitProps?: Array<keyof Props>;
   classesResolver?: (props: Props, theme: any) => Record<string, string>;
 }, InComponent: RenderFunction) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<Ref>>;

package/internals/consumeThemeProps.d.mts

@@ -45,6 +45,6 @@ import * as React from 'react';
  * @param InComponent The component to render if the slot is not provided.
  */
 export declare const consumeThemeProps: <Props extends {}, Ref extends {}, RenderFunction = (props: Props, ref: React.Ref<Ref>) => React.ElementType>(name: string, options: {
-  defaultProps?: Omit<Partial<Props>, "slots" | "slotProps"> | (<T extends Props>(props: T) => Omit<Partial<T>, "slots" | "slotProps">);
+  defaultProps?: Omit<Partial<Props>, 'slots' | 'slotProps'> | (<T extends Props>(props: T) => Omit<Partial<T>, 'slots' | 'slotProps'>);
   classesResolver?: (props: Props, theme: any) => Record<string, string>;
 }, InComponent: RenderFunction) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<Ref>>;

package/internals/consumeThemeProps.d.ts

@@ -45,6 +45,6 @@ import * as React from 'react';
  * @param InComponent The component to render if the slot is not provided.
  */
 export declare const consumeThemeProps: <Props extends {}, Ref extends {}, RenderFunction = (props: Props, ref: React.Ref<Ref>) => React.ElementType>(name: string, options: {
-  defaultProps?: Omit<Partial<Props>, "slots" | "slotProps"> | (<T extends Props>(props: T) => Omit<Partial<T>, "slots" | "slotProps">);
+  defaultProps?: Omit<Partial<Props>, 'slots' | 'slotProps'> | (<T extends Props>(props: T) => Omit<Partial<T>, 'slots' | 'slotProps'>);
   classesResolver?: (props: Props, theme: any) => Record<string, string>;
 }, InComponent: RenderFunction) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<Ref>>;

package/internals/createCommonKeyboardFocusHandler.d.mts

@@ -3,7 +3,7 @@ import type { ChartSeriesType } from "../models/seriesType/config.mjs";
  * Create a keyboard focus handler for common use cases where focused item are defined by the series is and data index.
  */
 export declare function createCommonKeyboardFocusHandler<SeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, TInputSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = SeriesType>(outSeriesTypes: Set<SeriesType>, allowCycles?: boolean, useCurrentSeriesMaxLength?: boolean): (event: KeyboardEvent) => ((currentItem: {
-  type: Exclude<ChartSeriesType, "sankey" | "heatmap">;
+  type: Exclude<ChartSeriesType, 'sankey' | 'heatmap'>;
   seriesId: import("../index.mjs").SeriesId;
   dataIndex?: number;
 } | null, state: {

package/internals/createCommonKeyboardFocusHandler.d.ts

@@ -3,7 +3,7 @@ import type { ChartSeriesType } from "../models/seriesType/config.js";
  * Create a keyboard focus handler for common use cases where focused item are defined by the series is and data index.
  */
 export declare function createCommonKeyboardFocusHandler<SeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'>, TInputSeriesType extends Exclude<ChartSeriesType, 'sankey' | 'heatmap'> = SeriesType>(outSeriesTypes: Set<SeriesType>, allowCycles?: boolean, useCurrentSeriesMaxLength?: boolean): (event: KeyboardEvent) => ((currentItem: {
-  type: Exclude<ChartSeriesType, "sankey" | "heatmap">;
+  type: Exclude<ChartSeriesType, 'sankey' | 'heatmap'>;
   seriesId: import("../index.js").SeriesId;
   dataIndex?: number;
 } | null, state: {

package/internals/createGetBarDimensions.js

@@ -7,6 +7,7 @@ exports.createGetBarDimensions = createGetBarDimensions;
 exports.createGetBucketBarDimensions = createGetBucketBarDimensions;
 var _findMinMax = require("./findMinMax");
 var _getBandSize = require("./getBandSize");
+var _getSampledBucketRegion = require("./getSampledBucketRegion");
 /** Minimum on-screen gap (px) kept between merged (sampled) bars so they stay distinguishable. */
 const MIN_SAMPLED_BAR_GAP_PX = 2;
 function shouldInvertStartCoordinate(verticalLayout, baseValue, reverse) {
@@ -78,9 +79,12 @@ function createGetBucketBarDimensions(params) {
   const step = baseScale.step();
   const valueScale = verticalLayout ? yAxisConfig.scale : xAxisConfig.scale;
   return function getBucketBarDimensions(startIndex, endIndex, min, max, groupIndex) {
-    const spanStart = baseScale(baseScaleConfig.data[startIndex]);
+    // Region matches the axis highlight (see `getSampledBandHighlight`) so bar and highlight stay in sync.
+    const {
+      regionStart,
+      regionSize: bucketStride
+    } = (0, _getSampledBucketRegion.getSampledBucketRegion)(baseScale, baseScaleConfig.data, startIndex, endIndex);
     const bucketCount = endIndex - startIndex + 1;
-    const bucketStride = bucketCount * step;
 
     // Keep the gap between buckets proportional to the bucket (same ratio as an unsampled chart),
     // but never thinner than MIN_SAMPLED_BAR_GAP_PX so it stays visible at every level and zoom.
@@ -89,7 +93,8 @@ function createGetBucketBarDimensions(params) {
       barWidth,
       offset
     } = (0, _getBandSize.getBandSize)(bucketStride - gap, numberOfGroups, baseScaleConfig.barGapRatio);
-    const barOffset = groupIndex * (barWidth + offset);
+    // Center the bars in the region (split the gap to both sides) so they sit under the highlight.
+    const barOffset = gap / 2 + groupIndex * (barWidth + offset);
     const valueCoordinates = [valueScale(min), valueScale(max)];
     const [minValueCoord, maxValueCoord] = (0, _findMinMax.findMinMax)(valueCoordinates).map(v => Math.round(v));
     let barSize = maxValueCoord - minValueCoord;
@@ -97,8 +102,8 @@ function createGetBucketBarDimensions(params) {
       barSize = Math.max(series.minBarSize, barSize);
     }
     return {
-      x: verticalLayout ? spanStart + barOffset : minValueCoord,
-      y: verticalLayout ? minValueCoord : spanStart + barOffset,
+      x: verticalLayout ? regionStart + barOffset : minValueCoord,
+      y: verticalLayout ? minValueCoord : regionStart + barOffset,
       height: verticalLayout ? barSize : barWidth,
       width: verticalLayout ? barWidth : barSize
     };