@mui/x-charts 8.5.0 → 8.5.2

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.js

@@ -88,6 +88,7 @@ export const selectorChartYAxis = createSelector([selectorChartRawYAxis, selecto
   zoomOptions,
   getFilters
 }));
+export const selectorChartAxis = createSelector([selectorChartXAxis, selectorChartYAxis, (_, axisId) => axisId], (xAxes, yAxes, axisId) => xAxes?.axis[axisId] ?? yAxes?.axis[axisId]);
 export const selectorChartRawAxis = createSelector([selectorChartRawXAxis, selectorChartRawYAxis, (state, axisId) => axisId], (xAxes, yAxes, axisId) => {
   const axis = xAxes?.find(a => a.id === axisId) ?? yAxes?.find(a => a.id === axisId) ?? null;
   if (!axis) {

package/esm/internals/plugins/models/seriesConfig/colorProcessor.types.d.ts

@@ -10,5 +10,10 @@ export type ColorGetter<TSeriesType extends ChartSeriesType> = TSeriesType exten
 /**
  * Transforms charts config to a color getter.
  * If dataIndex is not defined, it falls back to the series color.
+ * @param {DefaultizedSeriesType<TSeriesType>} series - The series configuration.
+ * @param {ComputedXAxis | undefined} xAxis - The computed x-axis configuration.
+ * @param {ComputedYAxis | undefined} yAxis - The computed y-axis configuration.
+ * @param {ZAxisDefaultized | undefined} zAxis - The defaulted z-axis configuration.
+ * @returns {ColorGetter<TSeriesType>} A function that takes a data index and returns a color string.
  */
 export type ColorProcessor<TSeriesType extends ChartSeriesType> = (series: DefaultizedSeriesType<TSeriesType>, xAxis?: ComputedXAxis, yAxis?: ComputedYAxis, zAxis?: ZAxisDefaultized) => ColorGetter<TSeriesType>;

package/esm/internals/plugins/models/seriesConfig/tooltipGetter.types.d.ts

@@ -62,9 +62,10 @@ export type TooltipGetter<TSeriesType extends ChartSeriesType> = (params: {
   identifier: ChartItemIdentifier<TSeriesType> | null;
 }) => (TSeriesType extends 'radar' ? ItemTooltipWithMultipleValues<TSeriesType> : ItemTooltip<TSeriesType>) | null;
 /**
- * Return an array of the axes that should trigger the tooltip.
- *
  * If `axisId` is set to undefined, the default axis will be used.
+ *
+ * @param {Record<SeriesId, ChartSeriesDefaultized<TSeriesType>>} series A map of series ID to their series configuration.
+ * @returns {{ direction: Directions; axisId: AxisId | undefined }[]} an array of the axes that should trigger the tooltip.
  */
 export type AxisTooltipGetter<TSeriesType extends ChartSeriesType, Directions extends 'x' | 'y' | 'rotation' | 'radius' = 'x' | 'y'> = (series: Record<SeriesId, ChartSeriesDefaultized<TSeriesType>>) => {
   direction: Directions;

package/esm/internals/store/useSelector.js

@@ -1,4 +1,6 @@
-import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
+/* We need to import the shim because React 17 does not support the `useSyncExternalStore` API.
+ * More info: https://github.com/mui/mui-x/issues/18303#issuecomment-2958392341 */
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 const defaultCompare = Object.is;
 export const useSelector = (store, selector, args = undefined, equals = defaultCompare) => {
   const selectorWithArgs = state => selector(state, args);

package/esm/locales/index.d.ts

@@ -1,3 +1,5 @@
 export type { ChartsLocaleText } from "./utils/chartsLocaleTextApi.js";
 export * from "./enUS.js";
-export * from "./frFR.js";
+export * from "./frFR.js";
+export * from "./ptBR.js";
+export * from "./ptPT.js";

package/esm/locales/index.js

@@ -1,3 +1,5 @@
 export * from "./enUS.js";
 export * from "./frFR.js";
+export * from "./ptBR.js";
+export * from "./ptPT.js";
 export {};

package/esm/locales/ptBR.d.ts

@@ -0,0 +1,16 @@
+import { ChartsLocaleText } from "./utils/chartsLocaleTextApi.js";
+export declare const ptBRLocaleText: Partial<ChartsLocaleText>;
+export declare const ptBR: {
+  components: {
+    MuiChartsLocalizationProvider: {
+      defaultProps: {
+        localeText: {
+          loading?: string | undefined;
+          noData?: string | undefined;
+          zoomIn?: string | undefined;
+          zoomOut?: string | undefined;
+        };
+      };
+    };
+  };
+};

package/esm/locales/ptBR.js

@@ -0,0 +1,9 @@
+import { getChartsLocalization } from "./utils/getChartsLocalization.js";
+export const ptBRLocaleText = {
+  // Overlay
+  loading: 'Carregando dados…',
+  noData: 'Sem dados para exibir',
+  zoomIn: 'Aumentar zoom',
+  zoomOut: 'Diminuir zoom'
+};
+export const ptBR = getChartsLocalization(ptBRLocaleText);

package/esm/locales/ptPT.d.ts

@@ -0,0 +1,16 @@
+import { ChartsLocaleText } from "./utils/chartsLocaleTextApi.js";
+export declare const ptPTLocaleText: Partial<ChartsLocaleText>;
+export declare const ptPT: {
+  components: {
+    MuiChartsLocalizationProvider: {
+      defaultProps: {
+        localeText: {
+          loading?: string | undefined;
+          noData?: string | undefined;
+          zoomIn?: string | undefined;
+          zoomOut?: string | undefined;
+        };
+      };
+    };
+  };
+};

package/esm/locales/ptPT.js

@@ -0,0 +1,9 @@
+import { getChartsLocalization } from "./utils/getChartsLocalization.js";
+export const ptPTLocaleText = {
+  // Overlay
+  loading: 'Carregando dados…',
+  noData: 'Sem dados para mostrar',
+  zoomIn: 'Aumentar zoom',
+  zoomOut: 'Diminuir zoom'
+};
+export const ptPT = getChartsLocalization(ptPTLocaleText);

package/esm/models/axis.d.ts

@@ -270,6 +270,7 @@ export type AxisValueFormatterContext<S extends ScaleName = ScaleName> = {
    * - `'tick'` The value is displayed on the axis ticks.
    * - `'tooltip'` The value is displayed in the tooltip when hovering the chart.
    * - `'legend'` The value is displayed in the legend when using color legend.
+   * - `'zoom-slider-tooltip'` The value is displayed in the zoom slider tooltip.
    */
   location: 'legend';
 } | {
@@ -278,8 +279,9 @@ export type AxisValueFormatterContext<S extends ScaleName = ScaleName> = {
    * - `'tick'` The value is displayed on the axis ticks.
    * - `'tooltip'` The value is displayed in the tooltip when hovering the chart.
    * - `'legend'` The value is displayed in the legend when using color legend.
+   * - `'zoom-slider-tooltip'` The value is displayed in the zoom slider tooltip.
    */
-  location: 'tick' | 'tooltip';
+  location: 'tick' | 'tooltip' | 'zoom-slider-tooltip';
   /**
    * The d3-scale instance associated to the axis.
    */

package/esm/models/index.d.ts

@@ -1,7 +1,7 @@
 export * from "./seriesType/index.js";
 export * from "./stacking.js";
 export * from "./slots/index.js";
-export type { AxisConfig, ChartsYAxisProps, ChartsXAxisProps, ScaleName, ContinuousScaleName, ChartsAxisData, XAxis, YAxis, RadiusAxis, RotationAxis } from "./axis.js";
+export type { AxisConfig, ChartsYAxisProps, ChartsXAxisProps, ScaleName, ContinuousScaleName, ChartsAxisData, XAxis, YAxis, RadiusAxis, RotationAxis, AxisValueFormatterContext } from "./axis.js";
 export type { PropsFromSlot } from '@mui/x-internals/slots';
 export type { Position } from "./position.js";
 export type { CurveType } from "./curve.js";

package/esm/models/seriesType/bar.d.ts

@@ -1,6 +1,6 @@
 import { DefaultizedProps } from '@mui/x-internals/types';
 import type { StackOffsetType } from "../stacking.js";
-import { CartesianSeriesType, CommonSeriesType, CommonDefaultizedProps, StackableSeriesType } from "./common.js";
+import { CartesianSeriesType, CommonSeriesType, CommonDefaultizedProps, StackableSeriesType, SeriesId } from "./common.js";
 export interface BarSeriesType extends CommonSeriesType<number | null>, CartesianSeriesType, StackableSeriesType {
   type: 'bar';
   /**
@@ -32,7 +32,7 @@ export interface BarSeriesType extends CommonSeriesType<number | null>, Cartesia
  */
 export type BarItemIdentifier = {
   type: 'bar';
-  seriesId: DefaultizedBarSeriesType['id'];
+  seriesId: SeriesId;
   dataIndex: number;
 };
 export interface DefaultizedBarSeriesType extends DefaultizedProps<BarSeriesType, CommonDefaultizedProps | 'color' | 'layout'> {}

package/esm/models/slots/chartsBaseSlotProps.d.ts

@@ -8,7 +8,13 @@ export type ChartBaseCommonProps<T = HTMLElement> = React.DOMAttributes<T> & {
 export type ChartBaseIconProps = ChartBaseCommonProps<SVGSVGElement> & {
   titleAccess?: string;
 };
+export type ChartBaseButtonProps = ChartBaseCommonProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+  disabled?: boolean;
+  tabIndex?: number;
+};
 export type ChartBaseIconButtonProps = ChartBaseCommonProps & {
   ref?: React.Ref<HTMLButtonElement>;
   disabled?: boolean;
+  tabIndex?: number;
 };

package/esm/models/slots/chartsBaseSlots.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { ChartBaseIconButtonProps } from "./chartsBaseSlotProps.js";
+import { ChartBaseButtonProps, ChartBaseIconButtonProps } from "./chartsBaseSlotProps.js";
 export interface ChartsBaseSlots {
+  baseButton: React.ComponentType<ChartBaseButtonProps>;
   baseIconButton: React.ComponentType<ChartBaseIconButtonProps>;
 }

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.5.0
+ * @mui/x-charts v8.5.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/AxisSharedComponents.d.ts

@@ -1 +1 @@
-export declare const AxisRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").SVGProps<SVGGElement>, keyof import("react").SVGProps<SVGGElement>>, {}>;
+export declare const AxisRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGProps<SVGGElement>, keyof import("react").SVGProps<SVGGElement>>, {}>;

package/internals/components/ChartsWrapper/ChartsWrapper.d.ts

@@ -5,6 +5,11 @@ import { Position } from "../../../models/index.js";
 export interface ChartsWrapperProps {
   legendPosition?: Position;
   legendDirection?: Direction;
+  /**
+   * If `true`, the chart wrapper set `height: 100%`.
+   * @default `false` if the `height` prop is set. And `true` otherwise.
+   */
+  extendVertically?: boolean;
   children: React.ReactNode;
   sx?: SxProps<Theme>;
 }

package/internals/components/ChartsWrapper/ChartsWrapper.js

@@ -7,7 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChartsWrapper = ChartsWrapper;
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
+var _createStyled = require("@mui/system/createStyled");
 var _useChartRootRef = require("../../../hooks/useChartRootRef");
+var _useStore = require("../../store/useStore");
+var _useSelector = require("../../store/useSelector");
+var _useChartDimensions = require("../../plugins/corePlugins/useChartDimensions");
 var _jsxRuntime = require("react/jsx-runtime");
 const getDirection = (direction, position) => {
   if (direction === 'vertical') {
@@ -42,7 +46,8 @@ const getAlign = (direction, position) => {
 };
 const Root = (0, _styles.styled)('div', {
   name: 'MuiChartsWrapper',
-  slot: 'Root'
+  slot: 'Root',
+  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'extendVertically'
 })(({
   ownerState
 }) => ({
@@ -50,7 +55,15 @@ const Root = (0, _styles.styled)('div', {
   flexDirection: getDirection(ownerState.legendDirection, ownerState.legendPosition),
   flex: 1,
   justifyContent: 'center',
-  alignItems: getAlign(ownerState.legendDirection, ownerState.legendPosition)
+  alignItems: getAlign(ownerState.legendDirection, ownerState.legendPosition),
+  variants: [{
+    props: {
+      extendVertically: true
+    },
+    style: {
+      height: '100%'
+    }
+  }]
 }));
 
 /**
@@ -62,13 +75,19 @@ const Root = (0, _styles.styled)('div', {
 function ChartsWrapper(props) {
   const {
     children,
-    sx
+    sx,
+    extendVertically
   } = props;
   const chartRootRef = (0, _useChartRootRef.useChartRootRef)();
+  const store = (0, _useStore.useStore)();
+  const {
+    height: propsHeight
+  } = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartPropsSize);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
     ref: chartRootRef,
     ownerState: props,
     sx: sx,
+    extendVertically: extendVertically ?? propsHeight === undefined,
     children: children
   });
 }

package/internals/constants.d.ts

@@ -3,4 +3,11 @@ import type { ZoomSliderShowTooltip } from "./plugins/featurePlugins/useChartCar
 export declare const ZOOM_SLIDER_MARGIN = 4;
 /** Size reserved for the zoom slider. The actual size of the slider might be smaller. */
 export declare const DEFAULT_ZOOM_SLIDER_SIZE: number;
-export declare const DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP: ZoomSliderShowTooltip;
+export declare const DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP: ZoomSliderShowTooltip;
+/** Default margin for pie charts. */
+export declare const DEFAULT_PIE_CHART_MARGIN: {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+};

package/internals/constants.js

@@ -3,10 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ZOOM_SLIDER_MARGIN = exports.DEFAULT_ZOOM_SLIDER_SIZE = exports.DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP = void 0;
+exports.ZOOM_SLIDER_MARGIN = exports.DEFAULT_ZOOM_SLIDER_SIZE = exports.DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP = exports.DEFAULT_PIE_CHART_MARGIN = void 0;
 /** Margin in the opposite direction of the axis, i.e., horizontal if the axis is vertical and vice versa. */
 const ZOOM_SLIDER_MARGIN = exports.ZOOM_SLIDER_MARGIN = 4;
 
 /** Size reserved for the zoom slider. The actual size of the slider might be smaller. */
 const DEFAULT_ZOOM_SLIDER_SIZE = exports.DEFAULT_ZOOM_SLIDER_SIZE = 20 + 2 * ZOOM_SLIDER_MARGIN;
-const DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP = exports.DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP = 'hover';
+const DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP = exports.DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP = 'hover';
+
+/** Default margin for pie charts. */
+const DEFAULT_PIE_CHART_MARGIN = exports.DEFAULT_PIE_CHART_MARGIN = {
+  top: 5,
+  bottom: 5,
+  left: 5,
+  right: 5
+};

package/internals/defaultValueFormatters.d.ts

@@ -0,0 +1,6 @@
+import { AxisValueFormatterContext, ContinuousScaleName, D3ContinuousScale } from "../models/axis.js";
+/**
+ * Creates a default formatter function for continuous scales (e.g., linear, sqrt, log).
+ * @returns A formatter function for continuous values.
+ */
+export declare function createScalarFormatter(tickNumber: number, zoomScale: D3ContinuousScale): <S extends ContinuousScaleName = ContinuousScaleName>(value: any, context: AxisValueFormatterContext<S>) => string;

package/internals/defaultValueFormatters.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createScalarFormatter = createScalarFormatter;
+/**
+ * Creates a default formatter function for continuous scales (e.g., linear, sqrt, log).
+ * @returns A formatter function for continuous values.
+ */
+function createScalarFormatter(tickNumber, zoomScale) {
+  return function defaultScalarValueFormatter(value, context) {
+    if (context.location === 'tick') {
+      return context.scale.tickFormat(tickNumber)(value);
+    }
+    if (context.location === 'zoom-slider-tooltip') {
+      return zoomScale.tickFormat(2)(value);
+    }
+    return `${value}`;
+  };
+}

package/internals/index.d.ts

@@ -21,6 +21,8 @@ export * from "./plugins/featurePlugins/useChartInteraction/index.js";
 export * from "./plugins/featurePlugins/useChartHighlight/index.js";
 export * from "./plugins/featurePlugins/useChartVoronoi/index.js";
 export * from "./plugins/utils/selectors.js";
+export { getAxisTriggerTooltip as getCartesianAxisTriggerTooltip } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisTriggerTooltip.js";
+export { getAxisIndex as getCartesianAxisIndex } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js";
 export * from "./store/useCharts.js";
 export * from "./store/useStore.js";
 export * from "./store/useSelector.js";
@@ -28,6 +30,7 @@ export * from "../BarChart/BarChart.plugins.js";
 export * from "../LineChart/LineChart.plugins.js";
 export * from "../ScatterChart/ScatterChart.plugins.js";
 export * from "../RadarChart/RadarChart.plugins.js";
+export * from "../PieChart/PieChart.plugins.js";
 export * from "./defaultizeValueFormatter.js";
 export * from "./configInit.js";
 export * from "./getLabel.js";
@@ -39,7 +42,11 @@ export * from "./getCurve.js";
 export * from "./consumeSlots.js";
 export * from "./consumeThemeProps.js";
 export * from "./defaultizeMargin.js";
+export * from "./colorScale.js";
+export * from "./ticks.js";
 export * from "./dateHelpers.js";
+export * from "./invertScale.js";
+export * from "./isBandScale.js";
 export { getAxisExtremum } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.js";
 export * from "../context/ChartProvider/index.js";
 export * from "../context/ChartsSlotsContext.js";

package/internals/index.js

@@ -11,6 +11,8 @@ var _exportNames = {
   useLineChartProps: true,
   useBarChartProps: true,
   useRadarChartProps: true,
+  getCartesianAxisTriggerTooltip: true,
+  getCartesianAxisIndex: true,
   getAxisExtremum: true
 };
 Object.defineProperty(exports, "getAxisExtremum", {
@@ -19,6 +21,18 @@ Object.defineProperty(exports, "getAxisExtremum", {
     return _getAxisExtremum.getAxisExtremum;
   }
 });
+Object.defineProperty(exports, "getCartesianAxisIndex", {
+  enumerable: true,
+  get: function () {
+    return _getAxisValue.getAxisIndex;
+  }
+});
+Object.defineProperty(exports, "getCartesianAxisTriggerTooltip", {
+  enumerable: true,
+  get: function () {
+    return _getAxisTriggerTooltip.getAxisTriggerTooltip;
+  }
+});
 Object.defineProperty(exports, "useBarChartProps", {
   enumerable: true,
   get: function () {
@@ -260,6 +274,8 @@ Object.keys(_selectors).forEach(function (key) {
     }
   });
 });
+var _getAxisTriggerTooltip = require("./plugins/featurePlugins/useChartCartesianAxis/getAxisTriggerTooltip");
+var _getAxisValue = require("./plugins/featurePlugins/useChartCartesianAxis/getAxisValue");
 var _useCharts = require("./store/useCharts");
 Object.keys(_useCharts).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -344,6 +360,18 @@ Object.keys(_RadarChart).forEach(function (key) {
     }
   });
 });
+var _PieChart = require("../PieChart/PieChart.plugins");
+Object.keys(_PieChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _PieChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PieChart[key];
+    }
+  });
+});
 var _defaultizeValueFormatter = require("./defaultizeValueFormatter");
 Object.keys(_defaultizeValueFormatter).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -476,6 +504,30 @@ Object.keys(_defaultizeMargin).forEach(function (key) {
     }
   });
 });
+var _colorScale = require("./colorScale");
+Object.keys(_colorScale).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _colorScale[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _colorScale[key];
+    }
+  });
+});
+var _ticks = require("./ticks");
+Object.keys(_ticks).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ticks[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ticks[key];
+    }
+  });
+});
 var _dateHelpers = require("./dateHelpers");
 Object.keys(_dateHelpers).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -488,6 +540,30 @@ Object.keys(_dateHelpers).forEach(function (key) {
     }
   });
 });
+var _invertScale = require("./invertScale");
+Object.keys(_invertScale).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _invertScale[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _invertScale[key];
+    }
+  });
+});
+var _isBandScale = require("./isBandScale");
+Object.keys(_isBandScale).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _isBandScale[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _isBandScale[key];
+    }
+  });
+});
 var _getAxisExtremum = require("./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum");
 var _ChartProvider = require("../context/ChartProvider");
 Object.keys(_ChartProvider).forEach(function (key) {

package/internals/invertScale.d.ts

@@ -0,0 +1,2 @@
+import { D3Scale } from "../models/axis.js";
+export declare function invertScale<T>(scale: D3Scale, data: readonly T[], value: number): number | Date | T;

package/internals/invertScale.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.invertScale = invertScale;
+var _isBandScale = require("./isBandScale");
+function invertScale(scale, data, value) {
+  if ((0, _isBandScale.isBandScale)(scale)) {
+    const dataIndex = scale.bandwidth() === 0 ? Math.floor((value - Math.min(...scale.range()) + scale.step() / 2) / scale.step()) : Math.floor((value - Math.min(...scale.range())) / scale.step());
+    return data[dataIndex];
+  }
+  return scale.invert(value);
+}

package/internals/material/index.js

@@ -7,7 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.defaultSlotsMaterial = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
 const baseSlots = {
+  baseButton: _Button.default,
   baseIconButton: _IconButton.default
 };
 const iconSlots = {};

package/internals/plugins/featurePlugins/useChartCartesianAxis/computeAxisValue.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.computeAxisValue = computeAxisValue;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _d3Scale = require("@mui/x-charts-vendor/d3-scale");
+var _defaultValueFormatters = require("../../../defaultValueFormatters");
 var _axis = require("../../../../models/axis");
 var _colorScale = require("../../../colorScale");
 var _ticks = require("../../../ticks");
@@ -130,7 +131,8 @@ function computeAxisValue({
       scaleType: scaleType,
       scale: finalScale.domain(domain),
       tickNumber,
-      colorScale: axis.colorMap && (0, _colorScale.getColorScale)(axis.colorMap)
+      colorScale: axis.colorMap && (0, _colorScale.getColorScale)(axis.colorMap),
+      valueFormatter: axis.valueFormatter ?? (0, _defaultValueFormatters.createScalarFormatter)(tickNumber, (0, _getScale.getScale)(scaleType, range.map(v => scale.invert(v)), range))
     });
   });
   return {