@mui/x-charts 9.8.0 → 9.10.0

package/ScatterChart/seriesConfig/index.js

@@ -11,7 +11,7 @@ var _getColor = _interopRequireDefault(require("./getColor"));
 var _legend = _interopRequireDefault(require("./legend"));
 var _tooltip = _interopRequireDefault(require("./tooltip"));
 var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWithDefaultValues"));
-var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
+var _tooltipPosition = require("./tooltipPosition");
 var _keyboardFocusHandler = _interopRequireDefault(require("./keyboardFocusHandler"));
 var _identifierSerializer = require("../../internals/identifierSerializer");
 var _identifierCleaner = require("../../internals/identifierCleaner");
@@ -22,7 +22,7 @@ const scatterSeriesConfig = exports.scatterSeriesConfig = {
   colorProcessor: _getColor.default,
   legendGetter: _legend.default,
   tooltipGetter: _tooltip.default,
-  tooltipItemPositionGetter: _tooltipPosition.default,
+  selectorTooltipItemPosition: _tooltipPosition.selectorTooltipItemPosition,
   xExtremumGetter: _extremums.getExtremumX,
   yExtremumGetter: _extremums.getExtremumY,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,

package/ScatterChart/seriesConfig/index.mjs

@@ -4,7 +4,7 @@ import getColor from "./getColor.mjs";
 import legendGetter from "./legend.mjs";
 import tooltipGetter from "./tooltip.mjs";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.mjs";
-import tooltipItemPositionGetter from "./tooltipPosition.mjs";
+import { selectorTooltipItemPosition } from "./tooltipPosition.mjs";
 import keyboardFocusHandler from "./keyboardFocusHandler.mjs";
 import { identifierSerializerSeriesIdDataIndex } from "../../internals/identifierSerializer.mjs";
 import { identifierCleanerSeriesIdDataIndex } from "../../internals/identifierCleaner.mjs";
@@ -15,7 +15,7 @@ export const scatterSeriesConfig = {
   colorProcessor: getColor,
   legendGetter,
   tooltipGetter,
-  tooltipItemPositionGetter,
+  selectorTooltipItemPosition,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY,
   getSeriesWithDefaultValues,

package/ScatterChart/seriesConfig/tooltipPosition.d.mts

@@ -1,3 +1,2 @@
-import type { TooltipItemPositionGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
-declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'scatter'>;
-export default tooltipItemPositionGetter;
+import type { TooltipItemPositionSelector } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
+export declare const selectorTooltipItemPosition: TooltipItemPositionSelector<'scatter'>;

package/ScatterChart/seriesConfig/tooltipPosition.d.ts

@@ -1,3 +1,2 @@
-import type { TooltipItemPositionGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
-declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'scatter'>;
-export default tooltipItemPositionGetter;
+import type { TooltipItemPositionSelector } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
+export declare const selectorTooltipItemPosition: TooltipItemPositionSelector<'scatter'>;

package/ScatterChart/seriesConfig/tooltipPosition.js

@@ -3,21 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-const tooltipItemPositionGetter = params => {
-  const {
-    series,
-    identifier,
-    axesConfig
-  } = params;
-  if (!identifier || identifier.dataIndex === undefined) {
+exports.selectorTooltipItemPosition = void 0;
+var _store = require("@mui/x-internals/store");
+var _useChartTooltip = require("../../internals/plugins/featurePlugins/useChartTooltip/useChartTooltip.selectors");
+var _useChartSeries = require("../../internals/plugins/corePlugins/useChartSeries");
+var _useChartCartesianAxisRendering = require("../../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors");
+const selectorTooltipItemPosition = exports.selectorTooltipItemPosition = (0, _store.createSelectorMemoized)(_useChartTooltip.selectorChartsTooltipItem, _useChartSeries.selectorChartSeriesProcessed, _useChartCartesianAxisRendering.selectorChartXAxis, _useChartCartesianAxisRendering.selectorChartYAxis, function selectorTooltipItemPosition(identifier, series, xAxes, yAxes) {
+  if (!identifier || identifier.type !== 'scatter' || identifier.dataIndex === undefined) {
     return null;
   }
   const itemSeries = series.scatter?.series[identifier.seriesId];
   if (itemSeries == null) {
     return null;
   }
-  if (axesConfig.x === undefined || axesConfig.y === undefined) {
+  const xAxis = xAxes.axis[itemSeries.xAxisId ?? xAxes.axisIds[0]];
+  const yAxis = yAxes.axis[itemSeries.yAxisId ?? yAxes.axisIds[0]];
+  if (xAxis === undefined || yAxis === undefined) {
     return null;
   }
   const xValue = itemSeries.data?.[identifier.dataIndex].x;
@@ -26,8 +27,7 @@ const tooltipItemPositionGetter = params => {
     return null;
   }
   return {
-    x: axesConfig.x.scale(xValue),
-    y: axesConfig.y.scale(yValue)
+    x: xAxis.scale(xValue),
+    y: yAxis.scale(yValue)
   };
-};
-var _default = exports.default = tooltipItemPositionGetter;
+});

package/ScatterChart/seriesConfig/tooltipPosition.mjs

@@ -1,17 +1,18 @@
-const tooltipItemPositionGetter = params => {
-  const {
-    series,
-    identifier,
-    axesConfig
-  } = params;
-  if (!identifier || identifier.dataIndex === undefined) {
+import { createSelectorMemoized } from '@mui/x-internals/store';
+import { selectorChartsTooltipItem } from "../../internals/plugins/featurePlugins/useChartTooltip/useChartTooltip.selectors.mjs";
+import { selectorChartSeriesProcessed } from "../../internals/plugins/corePlugins/useChartSeries/index.mjs";
+import { selectorChartXAxis, selectorChartYAxis } from "../../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.mjs";
+export const selectorTooltipItemPosition = createSelectorMemoized(selectorChartsTooltipItem, selectorChartSeriesProcessed, selectorChartXAxis, selectorChartYAxis, function selectorTooltipItemPosition(identifier, series, xAxes, yAxes) {
+  if (!identifier || identifier.type !== 'scatter' || identifier.dataIndex === undefined) {
     return null;
   }
   const itemSeries = series.scatter?.series[identifier.seriesId];
   if (itemSeries == null) {
     return null;
   }
-  if (axesConfig.x === undefined || axesConfig.y === undefined) {
+  const xAxis = xAxes.axis[itemSeries.xAxisId ?? xAxes.axisIds[0]];
+  const yAxis = yAxes.axis[itemSeries.yAxisId ?? yAxes.axisIds[0]];
+  if (xAxis === undefined || yAxis === undefined) {
     return null;
   }
   const xValue = itemSeries.data?.[identifier.dataIndex].x;
@@ -20,8 +21,7 @@ const tooltipItemPositionGetter = params => {
     return null;
   }
   return {
-    x: axesConfig.x.scale(xValue),
-    y: axesConfig.y.scale(yValue)
+    x: xAxis.scale(xValue),
+    y: yAxis.scale(yValue)
   };
-};
-export default tooltipItemPositionGetter;
+});

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/context/ChartsProvider/ChartsProvider.d.mts

@@ -3,5 +3,5 @@ import type { ChartsProviderProps } from "./ChartsProvider.types.mjs";
 import type { ChartAnyPluginSignature } from "../../internals/plugins/models/index.mjs";
 import type { ChartSeriesType } from "../../models/seriesType/config.mjs";
 import type { ChartCorePluginSignatures } from "../../internals/plugins/corePlugins/index.mjs";
-declare function ChartsProvider<SeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = ChartCorePluginSignatures<SeriesType>>(props: React.PropsWithChildren<ChartsProviderProps<SeriesType, TSignatures>>): import("react/jsx-runtime").JSX.Element;
+declare function ChartsProvider<SeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = ChartCorePluginSignatures<SeriesType>>(props: React.PropsWithChildren<ChartsProviderProps<SeriesType, TSignatures>>): React.JSX.Element;
 export { ChartsProvider };

package/context/ChartsProvider/ChartsProvider.d.ts

@@ -3,5 +3,5 @@ import type { ChartsProviderProps } from "./ChartsProvider.types.js";
 import type { ChartAnyPluginSignature } from "../../internals/plugins/models/index.js";
 import type { ChartSeriesType } from "../../models/seriesType/config.js";
 import type { ChartCorePluginSignatures } from "../../internals/plugins/corePlugins/index.js";
-declare function ChartsProvider<SeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = ChartCorePluginSignatures<SeriesType>>(props: React.PropsWithChildren<ChartsProviderProps<SeriesType, TSignatures>>): import("react/jsx-runtime").JSX.Element;
+declare function ChartsProvider<SeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = ChartCorePluginSignatures<SeriesType>>(props: React.PropsWithChildren<ChartsProviderProps<SeriesType, TSignatures>>): React.JSX.Element;
 export { ChartsProvider };

package/context/ChartsSlotsContext.d.mts

@@ -16,5 +16,5 @@ interface ChartsSlotsProviderProps {
   slotProps?: Partial<ChartsSlotProps>;
   defaultSlots: ChartsSlots;
 }
-export declare function ChartsSlotsProvider(props: React.PropsWithChildren<ChartsSlotsProviderProps>): import("react/jsx-runtime").JSX.Element;
+export declare function ChartsSlotsProvider(props: React.PropsWithChildren<ChartsSlotsProviderProps>): React.JSX.Element;
 export {};

package/context/ChartsSlotsContext.d.ts

@@ -16,5 +16,5 @@ interface ChartsSlotsProviderProps {
   slotProps?: Partial<ChartsSlotProps>;
   defaultSlots: ChartsSlots;
 }
-export declare function ChartsSlotsProvider(props: React.PropsWithChildren<ChartsSlotsProviderProps>): import("react/jsx-runtime").JSX.Element;
+export declare function ChartsSlotsProvider(props: React.PropsWithChildren<ChartsSlotsProviderProps>): React.JSX.Element;
 export {};

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.8.0
+ * @mui/x-charts v9.10.0
  *
  * @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.8.0
+ * @mui/x-charts v9.10.0
  *
  * @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/components/ChartsAccessibilityProxy/ChartsAccessibilityProxy.d.mts

@@ -1,5 +1,6 @@
+import * as React from 'react';
 /**
  * This component provides an accessibility proxy for charts.
  * It uses two divs to let screen readers announce the focused content when it changes.
  */
-export declare function ChartsAccessibilityProxy(): import("react/jsx-runtime").JSX.Element;
+export declare function ChartsAccessibilityProxy(): React.JSX.Element;

package/internals/components/ChartsAccessibilityProxy/ChartsAccessibilityProxy.d.ts

@@ -1,5 +1,6 @@
+import * as React from 'react';
 /**
  * This component provides an accessibility proxy for charts.
  * It uses two divs to let screen readers announce the focused content when it changes.
  */
-export declare function ChartsAccessibilityProxy(): import("react/jsx-runtime").JSX.Element;
+export declare function ChartsAccessibilityProxy(): React.JSX.Element;

package/internals/components/ChartsAxesGradients/ChartsAxesGradients.d.mts

@@ -1 +1,2 @@
-export declare function ChartsAxesGradients(): import("react/jsx-runtime").JSX.Element | null;
+import * as React from 'react';
+export declare function ChartsAxesGradients(): React.JSX.Element | null;

package/internals/components/ChartsAxesGradients/ChartsAxesGradients.d.ts

@@ -1 +1,2 @@
-export declare function ChartsAxesGradients(): import("react/jsx-runtime").JSX.Element | null;
+import * as React from 'react';
+export declare function ChartsAxesGradients(): React.JSX.Element | null;

package/internals/components/ChartsAxesGradients/ChartsContinuousGradient.d.mts

@@ -14,5 +14,5 @@ type ChartsContinuousGradientProps = {
    */
   gradientUnits?: 'objectBoundingBox' | 'userSpaceOnUse';
 };
-export default function ChartsContinuousGradient(props: ChartsContinuousGradientProps): import("react/jsx-runtime").JSX.Element | null;
+export default function ChartsContinuousGradient(props: ChartsContinuousGradientProps): import("react").JSX.Element | null;
 export {};

package/internals/components/ChartsAxesGradients/ChartsContinuousGradient.d.ts

@@ -14,5 +14,5 @@ type ChartsContinuousGradientProps = {
    */
   gradientUnits?: 'objectBoundingBox' | 'userSpaceOnUse';
 };
-export default function ChartsContinuousGradient(props: ChartsContinuousGradientProps): import("react/jsx-runtime").JSX.Element | null;
+export default function ChartsContinuousGradient(props: ChartsContinuousGradientProps): import("react").JSX.Element | null;
 export {};

package/internals/components/ChartsAxesGradients/ChartsContinuousGradientObjectBound.d.mts

@@ -8,5 +8,5 @@ type ChartsContinuousGradientObjectBoundProps = {
 /**
  * Generates gradients to be used in tooltips and legends.
  */
-export default function ChartsContinuousGradientObjectBound(props: ChartsContinuousGradientObjectBoundProps): import("react/jsx-runtime").JSX.Element;
+export default function ChartsContinuousGradientObjectBound(props: ChartsContinuousGradientObjectBoundProps): import("react").JSX.Element;
 export {};

package/internals/components/ChartsAxesGradients/ChartsContinuousGradientObjectBound.d.ts

@@ -8,5 +8,5 @@ type ChartsContinuousGradientObjectBoundProps = {
 /**
  * Generates gradients to be used in tooltips and legends.
  */
-export default function ChartsContinuousGradientObjectBound(props: ChartsContinuousGradientObjectBoundProps): import("react/jsx-runtime").JSX.Element;
+export default function ChartsContinuousGradientObjectBound(props: ChartsContinuousGradientObjectBoundProps): import("react").JSX.Element;
 export {};

package/internals/components/ChartsAxesGradients/ChartsPiecewiseGradient.d.mts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { PiecewiseColorConfig } from "../../../models/colorMapping.mjs";
 type ChartsPiecewiseGradientProps = {
   isReversed?: boolean;
@@ -7,5 +8,5 @@ type ChartsPiecewiseGradientProps = {
   scale: (value: any) => number | undefined;
   colorMap: PiecewiseColorConfig;
 };
-export default function ChartsPiecewiseGradient(props: ChartsPiecewiseGradientProps): import("react/jsx-runtime").JSX.Element | null;
+export default function ChartsPiecewiseGradient(props: ChartsPiecewiseGradientProps): React.JSX.Element | null;
 export {};

package/internals/components/ChartsAxesGradients/ChartsPiecewiseGradient.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { PiecewiseColorConfig } from "../../../models/colorMapping.js";
 type ChartsPiecewiseGradientProps = {
   isReversed?: boolean;
@@ -7,5 +8,5 @@ type ChartsPiecewiseGradientProps = {
   scale: (value: any) => number | undefined;
   colorMap: PiecewiseColorConfig;
 };
-export default function ChartsPiecewiseGradient(props: ChartsPiecewiseGradientProps): import("react/jsx-runtime").JSX.Element | null;
+export default function ChartsPiecewiseGradient(props: ChartsPiecewiseGradientProps): React.JSX.Element | null;
 export {};

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.d.mts

@@ -11,4 +11,17 @@ export declare function createGetBarDimensions(params: {
   y: number;
   height: number;
   width: number;
-} | null;
+} | null;
+/** Like {@link createGetBarDimensions}, but for a sampled bucket spanning several categories. */
+export declare function createGetBucketBarDimensions(params: {
+  verticalLayout: boolean;
+  xAxisConfig: ComputedAxis<ScaleName, any, ChartsXAxisProps>;
+  yAxisConfig: ComputedAxis<ScaleName, any, ChartsYAxisProps>;
+  series: ChartSeriesDefaultized<'bar'>;
+  numberOfGroups: number;
+}): (startIndex: number, endIndex: number, min: number, max: number, groupIndex: number) => {
+  x: number;
+  y: number;
+  height: number;
+  width: number;
+};

package/internals/createGetBarDimensions.d.ts

@@ -11,4 +11,17 @@ export declare function createGetBarDimensions(params: {
   y: number;
   height: number;
   width: number;
-} | null;
+} | null;
+/** Like {@link createGetBarDimensions}, but for a sampled bucket spanning several categories. */
+export declare function createGetBucketBarDimensions(params: {
+  verticalLayout: boolean;
+  xAxisConfig: ComputedAxis<ScaleName, any, ChartsXAxisProps>;
+  yAxisConfig: ComputedAxis<ScaleName, any, ChartsYAxisProps>;
+  series: ChartSeriesDefaultized<'bar'>;
+  numberOfGroups: number;
+}): (startIndex: number, endIndex: number, min: number, max: number, groupIndex: number) => {
+  x: number;
+  y: number;
+  height: number;
+  width: number;
+};

package/internals/createGetBarDimensions.js

@@ -4,8 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createGetBarDimensions = createGetBarDimensions;
+exports.createGetBucketBarDimensions = createGetBucketBarDimensions;
 var _findMinMax = require("./findMinMax");
 var _getBandSize = require("./getBandSize");
+/** 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) {
   const isVerticalAndPositive = verticalLayout && baseValue > 0;
   const isHorizontalAndNegative = !verticalLayout && baseValue < 0;
@@ -58,4 +61,46 @@ function createGetBarDimensions(params) {
       width: verticalLayout ? barWidth : barSize
     };
   };
+}
+
+/** Like {@link createGetBarDimensions}, but for a sampled bucket spanning several categories. */
+function createGetBucketBarDimensions(params) {
+  const {
+    verticalLayout,
+    xAxisConfig,
+    yAxisConfig,
+    series,
+    numberOfGroups
+  } = params;
+  const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
+  const baseScale = baseScaleConfig.scale;
+  const bandwidth = baseScale.bandwidth();
+  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]);
+    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.
+    const gap = Math.min(bucketStride / 2, Math.max(bucketCount * (step - bandwidth), MIN_SAMPLED_BAR_GAP_PX));
+    const {
+      barWidth,
+      offset
+    } = (0, _getBandSize.getBandSize)(bucketStride - gap, numberOfGroups, baseScaleConfig.barGapRatio);
+    const barOffset = 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;
+    if (!series.hidden && barSize > 0) {
+      barSize = Math.max(series.minBarSize, barSize);
+    }
+    return {
+      x: verticalLayout ? spanStart + barOffset : minValueCoord,
+      y: verticalLayout ? minValueCoord : spanStart + barOffset,
+      height: verticalLayout ? barSize : barWidth,
+      width: verticalLayout ? barWidth : barSize
+    };
+  };
 }

package/internals/createGetBarDimensions.mjs

@@ -1,5 +1,8 @@
 import { findMinMax } from "./findMinMax.mjs";
 import { getBandSize } from "./getBandSize.mjs";
+
+/** 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) {
   const isVerticalAndPositive = verticalLayout && baseValue > 0;
   const isHorizontalAndNegative = !verticalLayout && baseValue < 0;
@@ -52,4 +55,46 @@ export function createGetBarDimensions(params) {
       width: verticalLayout ? barWidth : barSize
     };
   };
+}
+
+/** Like {@link createGetBarDimensions}, but for a sampled bucket spanning several categories. */
+export function createGetBucketBarDimensions(params) {
+  const {
+    verticalLayout,
+    xAxisConfig,
+    yAxisConfig,
+    series,
+    numberOfGroups
+  } = params;
+  const baseScaleConfig = verticalLayout ? xAxisConfig : yAxisConfig;
+  const baseScale = baseScaleConfig.scale;
+  const bandwidth = baseScale.bandwidth();
+  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]);
+    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.
+    const gap = Math.min(bucketStride / 2, Math.max(bucketCount * (step - bandwidth), MIN_SAMPLED_BAR_GAP_PX));
+    const {
+      barWidth,
+      offset
+    } = getBandSize(bucketStride - gap, numberOfGroups, baseScaleConfig.barGapRatio);
+    const barOffset = groupIndex * (barWidth + offset);
+    const valueCoordinates = [valueScale(min), valueScale(max)];
+    const [minValueCoord, maxValueCoord] = findMinMax(valueCoordinates).map(v => Math.round(v));
+    let barSize = maxValueCoord - minValueCoord;
+    if (!series.hidden && barSize > 0) {
+      barSize = Math.max(series.minBarSize, barSize);
+    }
+    return {
+      x: verticalLayout ? spanStart + barOffset : minValueCoord,
+      y: verticalLayout ? minValueCoord : spanStart + barOffset,
+      height: verticalLayout ? barSize : barWidth,
+      width: verticalLayout ? barWidth : barSize
+    };
+  };
 }

package/internals/geometry.js

@@ -18,7 +18,7 @@ const ANGLE_APPROX = 5; // Angle (in deg) for which we approximate the rectangle
  */
 function getMinXTranslation(width, height, angle = 0) {
   if (process.env.NODE_ENV !== 'production') {
-    if (angle > 90 && angle < -90) {
+    if (angle > 90 || angle < -90) {
       (0, _warning.warnOnce)([`MUI X Charts: It seems you applied an angle larger than 90° or smaller than -90° to an axis text.`, `This could cause some text overlapping.`, `If you encounter a use case where it's needed, please open an issue.`]);
     }
   }

package/internals/geometry.mjs

@@ -12,7 +12,7 @@ const ANGLE_APPROX = 5; // Angle (in deg) for which we approximate the rectangle
  */
 export function getMinXTranslation(width, height, angle = 0) {
   if (process.env.NODE_ENV !== 'production') {
-    if (angle > 90 && angle < -90) {
+    if (angle > 90 || angle < -90) {
       warnOnce([`MUI X Charts: It seems you applied an angle larger than 90° or smaller than -90° to an axis text.`, `This could cause some text overlapping.`, `If you encounter a use case where it's needed, please open an issue.`]);
     }
   }