@mui/x-charts 8.11.1 → 8.11.3

package/esm/LineChart/useAreaPlotData.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { area as d3Area } from '@mui/x-charts-vendor/d3-shape';
 import { useChartGradientIdBuilder } from "../hooks/useChartGradientId.js";
-import { isBandScale } from "../internals/isBandScale.js";
+import { isOrdinalScale } from "../internals/scaleGuards.js";
 import { getCurveFactory } from "../internals/getCurve.js";
 import { getValueToPositionMapper, useLineSeriesContext, useXAxes, useYAxes } from "../hooks/index.js";
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
@@ -52,7 +52,7 @@ export function useAreaPlotData(xAxes, yAxes) {
             throw new Error(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
           }
         }
-        const shouldExpand = curve?.includes('step') && !strictStepCurve && isBandScale(xScale);
+        const shouldExpand = curve?.includes('step') && !strictStepCurve && isOrdinalScale(xScale);
         const formattedData = xData?.flatMap((x, index) => {
           const nullData = data[index] == null;
           if (shouldExpand) {

package/esm/LineChart/useLineChartProps.js

@@ -119,7 +119,8 @@ export const useLineChartProps = props => {
   const chartsWrapperProps = {
     sx,
     legendPosition: props.slotProps?.legend?.position,
-    legendDirection: props.slotProps?.legend?.direction
+    legendDirection: props.slotProps?.legend?.direction,
+    hideLegend: props.hideLegend ?? false
   };
   return {
     chartsWrapperProps,

package/esm/LineChart/useLinePlotData.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { warnOnce } from '@mui/x-internals/warning';
 import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';
 import { useChartGradientIdBuilder } from "../hooks/useChartGradientId.js";
-import { isBandScale } from "../internals/isBandScale.js";
+import { isOrdinalScale } from "../internals/scaleGuards.js";
 import { getCurveFactory } from "../internals/getCurve.js";
 import { getValueToPositionMapper, useLineSeriesContext, useXAxes, useYAxes } from "../hooks/index.js";
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
@@ -50,7 +50,7 @@ export function useLinePlotData(xAxes, yAxes) {
             warnOnce(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`, 'error');
           }
         }
-        const shouldExpand = curve?.includes('step') && !strictStepCurve && isBandScale(xScale);
+        const shouldExpand = curve?.includes('step') && !strictStepCurve && isOrdinalScale(xScale);
         const formattedData = xData?.flatMap((x, index) => {
           const nullData = data[index] == null;
           if (shouldExpand) {

package/esm/PieChart/PieChart.js

@@ -78,6 +78,7 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
       legendPosition: props.slotProps?.legend?.position,
       legendDirection: props.slotProps?.legend?.direction ?? 'vertical',
       sx: sx,
+      hideLegend: hideLegend ?? false,
       children: [showToolbar && Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !hideLegend && /*#__PURE__*/_jsx(ChartsLegend, {
         direction: props.slotProps?.legend?.direction ?? 'vertical',
         slots: slots,

package/esm/RadarChart/RadarAxis/useRadarAxis.js

@@ -3,7 +3,7 @@ import { useRadiusAxes } from "../../hooks/useAxis.js";
 import { useRotationScale } from "../../hooks/useScale.js";
 import { useChartContext } from "../../context/ChartProvider/useChartContext.js";
 import { selectorChartPolarCenter } from "../../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
-import { isBandScale } from "../../internals/isBandScale.js";
+import { isOrdinalScale } from "../../internals/scaleGuards.js";
 import { degToRad } from "../../internals/degToRad.js";
 import { clampAngle } from "../../internals/clampAngle.js";
 import { useSelector } from "../../internals/store/useSelector.js";
@@ -42,7 +42,7 @@ export function useRadarAxis(params) {
   }, (_, index) => (index + 1) / divisions);
   const radiusScale = radiusAxis[metric].scale;
   const R = radiusScale.range()[1];
-  if (isBandScale(radiusScale)) {
+  if (isOrdinalScale(radiusScale)) {
     if (process.env.NODE_ENV !== 'production') {
       console.error('MUI X Charts: Radar chart does not support ordinal axes');
     }

package/esm/RadarChart/useRadarChartProps.js

@@ -59,7 +59,8 @@ export const useRadarChartProps = props => {
     slotProps
   };
   const chartsWrapperProps = {
-    sx
+    sx,
+    hideLegend: props.hideLegend ?? false
   };
   const radarGrid = {
     divisions,

package/esm/ScatterChart/useScatterChartProps.js

@@ -88,7 +88,8 @@ export const useScatterChartProps = props => {
   const chartsWrapperProps = {
     sx,
     legendPosition: props.slotProps?.legend?.position,
-    legendDirection: props.slotProps?.legend?.direction
+    legendDirection: props.slotProps?.legend?.direction,
+    hideLegend: props.hideLegend ?? false
   };
   return {
     chartsWrapperProps,

package/esm/Toolbar/Toolbar.js

@@ -25,7 +25,8 @@ const ToolbarRoot = styled('div', {
   minHeight: 44,
   boxSizing: 'border-box',
   border: `1px solid ${(theme.vars || theme).palette.divider}`,
-  borderRadius: 4
+  borderRadius: 4,
+  gridArea: 'toolbar'
 }));
 export const Toolbar = /*#__PURE__*/React.forwardRef(function Toolbar(_ref, ref) {
   let {

package/esm/hooks/useInteractionItemProps.js

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
 import { useChartContext } from "../context/ChartProvider/index.js";
 function onPointerDown(event) {
   if ('hasPointerCapture' in event.currentTarget && event.currentTarget.hasPointerCapture(event.pointerId)) {
@@ -12,16 +13,16 @@ export const useInteractionItemProps = (data, skip) => {
     instance
   } = useChartContext();
   const interactionActive = React.useRef(false);
-  const onPointerEnter = React.useCallback(() => {
+  const onPointerEnter = useEventCallback(() => {
     interactionActive.current = true;
     instance.setItemInteraction(data);
     instance.setHighlight(data);
-  }, [instance, data]);
-  const onPointerLeave = React.useCallback(() => {
+  });
+  const onPointerLeave = useEventCallback(() => {
     interactionActive.current = false;
     instance.removeItemInteraction(data);
     instance.clearHighlight();
-  }, [instance, data]);
+  });
   React.useEffect(() => {
     return () => {
       /* Clean up state if this item is unmounted while active. */

package/esm/hooks/useScale.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { isBandScale } from "../internals/isBandScale.js";
+import { isOrdinalScale } from "../internals/scaleGuards.js";
 import { useRadiusAxis, useRotationAxis, useXAxis, useYAxis } from "./useAxis.js";
 
 /**
@@ -10,7 +10,7 @@ import { useRadiusAxis, useRotationAxis, useXAxis, useYAxis } from "./useAxis.js
  * @returns {(value: any) => number} A function that map value to their position
  */
 export function getValueToPositionMapper(scale) {
-  if (isBandScale(scale)) {
+  if (isOrdinalScale(scale)) {
     return value => (scale(value) ?? 0) + scale.bandwidth() / 2;
   }
   return value => scale(value);

package/esm/hooks/useTicks.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { useChartContext } from "../context/ChartProvider/index.js";
-import { isBandScale } from "../internals/isBandScale.js";
+import { isOrdinalScale } from "../internals/scaleGuards.js";
 import { isInfinity } from "../internals/isInfinity.js";
 const offsetRatio = {
   start: 0,
@@ -22,7 +22,7 @@ export function getTicks(options) {
   } = options;
 
   // band scale
-  if (isBandScale(scale)) {
+  if (isOrdinalScale(scale)) {
     const domain = scale.domain();
     const tickLabelPlacement = tickLabelPlacementProp ?? 'middle';
     if (scale.bandwidth() > 0) {
@@ -72,7 +72,7 @@ export function getTicks(options) {
     return [];
   }
   const tickLabelPlacement = tickLabelPlacementProp;
-  const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);
+  const ticks = typeof tickInterval === 'object' ? tickInterval : getDefaultTicks(scale, tickNumber);
 
   // Ticks inside the drawing area
   const visibleTicks = [];
@@ -102,6 +102,13 @@ export function getTicks(options) {
   }
   return visibleTicks;
 }
+function getDefaultTicks(scale, tickNumber) {
+  const domain = scale.domain();
+  if (domain[0] === domain[1]) {
+    return [domain[0]];
+  }
+  return scale.ticks(tickNumber);
+}
 export function useTicks(options) {
   const {
     scale,

package/esm/hooks/useTicksGrouped.js

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

package/esm/index.js

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

package/esm/internals/dateHelpers.d.ts

@@ -1,3 +1,4 @@
+import { NumberValue } from '@mui/x-charts-vendor/d3-scale';
 import { AxisConfig } from "../models/index.js";
 import { ChartsAxisProps } from "../models/axis.js";
 /**
@@ -8,8 +9,9 @@ import { ChartsAxisProps } from "../models/axis.js";
 export declare const isDateData: (data?: readonly any[]) => data is Date[];
 /**
  * Creates a formatter function for date values.
- * @param axis The axis configuration.
+ * @param data The data array containing Date or NumberValue objects.
  * @param range The range for the time scale.
+ * @param tickNumber (Optional) The number of ticks for formatting.
  * @returns A formatter function for date values.
  */
-export declare function createDateFormatter(axis: AxisConfig<'band' | 'point', any, ChartsAxisProps>, range: number[]): AxisConfig<'band' | 'point', any, ChartsAxisProps>['valueFormatter'];
+export declare function createDateFormatter(data: Iterable<Date | NumberValue>, range: number[], tickNumber?: number): AxisConfig<'band' | 'point', any, ChartsAxisProps>['valueFormatter'];

package/esm/internals/dateHelpers.js

@@ -8,13 +8,14 @@ export const isDateData = data => data?.[0] instanceof Date;
 
 /**
  * Creates a formatter function for date values.
- * @param axis The axis configuration.
+ * @param data The data array containing Date or NumberValue objects.
  * @param range The range for the time scale.
+ * @param tickNumber (Optional) The number of ticks for formatting.
  * @returns A formatter function for date values.
  */
-export function createDateFormatter(axis, range) {
-  const timeScale = scaleTime(axis.data, range);
+export function createDateFormatter(data, range, tickNumber) {
+  const timeScale = scaleTime(data, range);
   return (v, {
     location
-  }) => location === 'tick' ? timeScale.tickFormat(axis.tickNumber)(v) : `${v.toLocaleString()}`;
+  }) => location === 'tick' ? timeScale.tickFormat(tickNumber)(v) : `${v.toLocaleString()}`;
 }

package/esm/internals/defaultValueFormatters.js

@@ -5,6 +5,11 @@
 export function createScalarFormatter(tickNumber, zoomScale) {
   return function defaultScalarValueFormatter(value, context) {
     if (context.location === 'tick') {
+      const domain = context.scale.domain();
+      const zeroSizeDomain = domain[0] === domain[1];
+      if (zeroSizeDomain) {
+        return context.scale.tickFormat(1)(value);
+      }
       return context.scale.tickFormat(tickNumber)(value);
     }
     if (context.location === 'zoom-slider-tooltip') {

package/esm/internals/index.d.ts

@@ -52,7 +52,7 @@ export * from "./colorScale.js";
 export * from "./ticks.js";
 export * from "./dateHelpers.js";
 export * from "./invertScale.js";
-export * from "./isBandScale.js";
+export * from "./scaleGuards.js";
 export * from "./findMinMax.js";
 export { getAxisExtremum } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.js";
 export * from "../context/ChartProvider/index.js";

package/esm/internals/index.js

@@ -62,7 +62,7 @@ export * from "./colorScale.js";
 export * from "./ticks.js";
 export * from "./dateHelpers.js";
 export * from "./invertScale.js";
-export * from "./isBandScale.js";
+export * from "./scaleGuards.js";
 export * from "./findMinMax.js";
 
 // contexts

package/esm/internals/invertScale.js

@@ -1,6 +1,6 @@
-import { isBandScale } from "./isBandScale.js";
+import { isOrdinalScale } from "./scaleGuards.js";
 export function invertScale(scale, data, value) {
-  if (isBandScale(scale)) {
+  if (isOrdinalScale(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];
   }

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

@@ -12,9 +12,9 @@ import { getAxisTriggerTooltip } from "./getAxisTriggerTooltip.js";
 import { getAxisDomainLimit } from "./getAxisDomainLimit.js";
 function getRange(drawingArea, axisDirection,
 // | 'rotation' | 'radius',
-axis) {
+reverse) {
   const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
-  return axis.reverse ? [range[1], range[0]] : range;
+  return reverse ? [range[1], range[0]] : range;
 }
 const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
 const DEFAULT_BAR_GAP_RATIO = 0.1;
@@ -42,7 +42,7 @@ export function computeAxisValue({
     const zoomOption = zoomOptions?.[axis.id];
     const zoom = zoomMap?.get(axis.id);
     const zoomRange = zoom ? [zoom.start, zoom.end] : [0, 100];
-    const range = getRange(drawingArea, axisDirection, axis);
+    const range = getRange(drawingArea, axisDirection, axis.reverse ?? false);
     const [minData, maxData] = getAxisExtremum(axis, axisDirection, seriesConfig, axisIndex, formattedSeries, zoom === undefined && !zoomOption ? getFilters : undefined // Do not apply filtering if zoom is already defined.
     );
     const triggerTooltip = !axis.ignoreTooltip && axisIdsTriggeringTooltip.has(axis.id);
@@ -68,7 +68,7 @@ export function computeAxisValue({
         }, axis.colorMap)) : getColorScale(axis.colorMap))
       });
       if (isDateData(axis.data)) {
-        const dateFormatter = createDateFormatter(axis, scaleRange);
+        const dateFormatter = createDateFormatter(axis.data, scaleRange, axis.tickNumber);
         completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
       }
     }
@@ -88,7 +88,7 @@ export function computeAxisValue({
         }, axis.colorMap)) : getColorScale(axis.colorMap))
       });
       if (isDateData(axis.data)) {
-        const dateFormatter = createDateFormatter(axis, scaleRange);
+        const dateFormatter = createDateFormatter(axis.data, scaleRange, axis.tickNumber);
         completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
       }
     }

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js

@@ -1,4 +1,4 @@
-import { isBandScale } from "../../../isBandScale.js";
+import { isOrdinalScale } from "../../../scaleGuards.js";
 function getAsANumber(value) {
   return value instanceof Date ? value.getTime() : value;
 }
@@ -13,7 +13,7 @@ export function getAxisIndex(axisConfig, pointerValue) {
     data: axisData,
     reverse
   } = axisConfig;
-  if (!isBandScale(scale)) {
+  if (!isOrdinalScale(scale)) {
     const value = scale.invert(pointerValue);
     if (axisData === undefined) {
       return -1;
@@ -51,7 +51,7 @@ export function getAxisValue(axisConfig, pointerValue, dataIndex) {
     scale,
     data: axisData
   } = axisConfig;
-  if (!isBandScale(scale)) {
+  if (!isOrdinalScale(scale)) {
     if (dataIndex === null) {
       return scale.invert(pointerValue);
     }

package/esm/internals/plugins/featurePlugins/useChartPolarAxis/computeAxisValue.js

@@ -63,7 +63,7 @@ export function computeAxisValue({
         }, axis.colorMap)) : getColorScale(axis.colorMap))
       });
       if (isDateData(axis.data)) {
-        const dateFormatter = createDateFormatter(axis, range);
+        const dateFormatter = createDateFormatter(axis.data, range, axis.tickNumber);
         completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
       }
     }
@@ -80,7 +80,7 @@ export function computeAxisValue({
         }, axis.colorMap)) : getColorScale(axis.colorMap))
       });
       if (isDateData(axis.data)) {
-        const dateFormatter = createDateFormatter(axis, range);
+        const dateFormatter = createDateFormatter(axis.data, range, axis.tickNumber);
         completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
       }
     }

package/esm/internals/plugins/featurePlugins/useChartPolarAxis/getAxisIndex.js

@@ -1,4 +1,4 @@
-import { isBandScale } from "../../../isBandScale.js";
+import { isOrdinalScale } from "../../../scaleGuards.js";
 import { clampAngleRad } from "../../../clampAngle.js";
 
 /**
@@ -11,7 +11,7 @@ export function getAxisIndex(axisConfig, pointerValue) {
     data: axisData,
     reverse
   } = axisConfig;
-  if (!isBandScale(scale)) {
+  if (!isOrdinalScale(scale)) {
     throw new Error('MUI X Charts: getAxisValue is not implemented for polare continuous axes.');
   }
   if (!axisData) {

package/esm/internals/scaleGuards.d.ts

@@ -0,0 +1,4 @@
+import { D3OrdinalScale, D3Scale } from "../models/axis.js";
+export declare function isOrdinalScale<T extends {
+  toString(): string;
+}>(scale: D3Scale<T>): scale is D3OrdinalScale<T>;

package/esm/internals/scaleGuards.js

@@ -0,0 +1,3 @@
+export function isOrdinalScale(scale) {
+  return scale.bandwidth !== undefined;
+}

package/esm/locales/index.d.ts

@@ -3,4 +3,5 @@ export * from "./elGR.js";
 export * from "./enUS.js";
 export * from "./frFR.js";
 export * from "./ptBR.js";
-export * from "./ptPT.js";
+export * from "./ptPT.js";
+export * from "./svSE.js";

package/esm/locales/index.js

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

package/esm/locales/svSE.d.ts

@@ -0,0 +1,19 @@
+import { ChartsLocaleText } from "./utils/chartsLocaleTextApi.js";
+export declare const svSELocaleText: ChartsLocaleText;
+export declare const svSE: {
+  components: {
+    MuiChartsLocalizationProvider: {
+      defaultProps: {
+        localeText: {
+          loading?: string | undefined;
+          noData?: string | undefined;
+          zoomIn?: string | undefined;
+          zoomOut?: string | undefined;
+          toolbarExport?: string | undefined;
+          toolbarExportPrint?: string | undefined;
+          toolbarExportImage?: ((mimeType: import("./utils/imageMimeTypes.js").ChartImageExportMimeType | (string & {})) => string) | undefined;
+        };
+      };
+    };
+  };
+};

package/esm/locales/svSE.js

@@ -0,0 +1,15 @@
+import { imageMimeTypes } from "./utils/imageMimeTypes.js";
+import { getChartsLocalization } from "./utils/getChartsLocalization.js";
+export const svSELocaleText = {
+  // Overlay
+  loading: 'Laddar data…',
+  noData: 'Inga data att visa',
+  // Toolbar
+  zoomIn: 'Zooma in',
+  zoomOut: 'Zooma ut',
+  toolbarExport: 'Exportera',
+  // Toolbar Export Menu
+  toolbarExportPrint: 'Skriv ut',
+  toolbarExportImage: mimeType => `Exportera som ${imageMimeTypes[mimeType] ?? mimeType}`
+};
+export const svSE = getChartsLocalization(svSELocaleText);

package/esm/models/axis.d.ts

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

package/hooks/useInteractionItemProps.js

@@ -1,6 +1,7 @@
 "use strict";
 'use client';
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -8,6 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getInteractionItemProps = getInteractionItemProps;
 exports.useInteractionItemProps = exports.useInteractionAllItemProps = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _ChartProvider = require("../context/ChartProvider");
 function onPointerDown(event) {
   if ('hasPointerCapture' in event.currentTarget && event.currentTarget.hasPointerCapture(event.pointerId)) {
@@ -19,16 +21,16 @@ const useInteractionItemProps = (data, skip) => {
     instance
   } = (0, _ChartProvider.useChartContext)();
   const interactionActive = React.useRef(false);
-  const onPointerEnter = React.useCallback(() => {
+  const onPointerEnter = (0, _useEventCallback.default)(() => {
     interactionActive.current = true;
     instance.setItemInteraction(data);
     instance.setHighlight(data);
-  }, [instance, data]);
-  const onPointerLeave = React.useCallback(() => {
+  });
+  const onPointerLeave = (0, _useEventCallback.default)(() => {
     interactionActive.current = false;
     instance.removeItemInteraction(data);
     instance.clearHighlight();
-  }, [instance, data]);
+  });
   React.useEffect(() => {
     return () => {
       /* Clean up state if this item is unmounted while active. */

package/hooks/useScale.js

@@ -9,7 +9,7 @@ exports.useRadiusScale = useRadiusScale;
 exports.useRotationScale = useRotationScale;
 exports.useXScale = useXScale;
 exports.useYScale = useYScale;
-var _isBandScale = require("../internals/isBandScale");
+var _scaleGuards = require("../internals/scaleGuards");
 var _useAxis = require("./useAxis");
 /**
  * For a given scale return a function that map value to their position.
@@ -18,7 +18,7 @@ var _useAxis = require("./useAxis");
  * @returns {(value: any) => number} A function that map value to their position
  */
 function getValueToPositionMapper(scale) {
-  if ((0, _isBandScale.isBandScale)(scale)) {
+  if ((0, _scaleGuards.isOrdinalScale)(scale)) {
     return value => (scale(value) ?? 0) + scale.bandwidth() / 2;
   }
   return value => scale(value);

package/hooks/useTicks.js

@@ -9,7 +9,7 @@ exports.getTicks = getTicks;
 exports.useTicks = useTicks;
 var React = _interopRequireWildcard(require("react"));
 var _ChartProvider = require("../context/ChartProvider");
-var _isBandScale = require("../internals/isBandScale");
+var _scaleGuards = require("../internals/scaleGuards");
 var _isInfinity = require("../internals/isInfinity");
 const offsetRatio = {
   start: 0,
@@ -29,7 +29,7 @@ function getTicks(options) {
   } = options;
 
   // band scale
-  if ((0, _isBandScale.isBandScale)(scale)) {
+  if ((0, _scaleGuards.isOrdinalScale)(scale)) {
     const domain = scale.domain();
     const tickLabelPlacement = tickLabelPlacementProp ?? 'middle';
     if (scale.bandwidth() > 0) {
@@ -79,7 +79,7 @@ function getTicks(options) {
     return [];
   }
   const tickLabelPlacement = tickLabelPlacementProp;
-  const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);
+  const ticks = typeof tickInterval === 'object' ? tickInterval : getDefaultTicks(scale, tickNumber);
 
   // Ticks inside the drawing area
   const visibleTicks = [];
@@ -109,6 +109,13 @@ function getTicks(options) {
   }
   return visibleTicks;
 }
+function getDefaultTicks(scale, tickNumber) {
+  const domain = scale.domain();
+  if (domain[0] === domain[1]) {
+    return [domain[0]];
+  }
+  return scale.ticks(tickNumber);
+}
 function useTicks(options) {
   const {
     scale,

package/hooks/useTicksGrouped.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTicksGrouped = useTicksGrouped;
 var React = _interopRequireWildcard(require("react"));
-var _isBandScale = require("../internals/isBandScale");
+var _scaleGuards = require("../internals/scaleGuards");
 const offsetRatio = {
   start: 0,
   extremities: 0,
@@ -68,7 +68,7 @@ function mapToGrouping(tickValues, groups, tickPlacement, tickLabelPlacement, sc
       if (isNew) {
         currentValueCount = 1;
         // Calculate tick offset
-        const tickOffset = (0, _isBandScale.isBandScale)(scale) ? scale(tickValue) - (scale.step() - scale.bandwidth()) / 2 + offsetRatio[tickPlacement] * scale.step() : scale(tickValue);
+        const tickOffset = (0, _scaleGuards.isOrdinalScale)(scale) ? scale(tickValue) - (scale.step() - scale.bandwidth()) / 2 + offsetRatio[tickPlacement] * scale.step() : scale(tickValue);
 
         // Calculate the label offset
         const labelOffset = scale.step() * currentValueCount * (offsetRatio[tickLabelPlacement] - offsetRatio[tickPlacement]);

package/index.js

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

package/internals/dateHelpers.d.ts

@@ -1,3 +1,4 @@
+import { NumberValue } from '@mui/x-charts-vendor/d3-scale';
 import { AxisConfig } from "../models/index.js";
 import { ChartsAxisProps } from "../models/axis.js";
 /**
@@ -8,8 +9,9 @@ import { ChartsAxisProps } from "../models/axis.js";
 export declare const isDateData: (data?: readonly any[]) => data is Date[];
 /**
  * Creates a formatter function for date values.
- * @param axis The axis configuration.
+ * @param data The data array containing Date or NumberValue objects.
  * @param range The range for the time scale.
+ * @param tickNumber (Optional) The number of ticks for formatting.
  * @returns A formatter function for date values.
  */
-export declare function createDateFormatter(axis: AxisConfig<'band' | 'point', any, ChartsAxisProps>, range: number[]): AxisConfig<'band' | 'point', any, ChartsAxisProps>['valueFormatter'];
+export declare function createDateFormatter(data: Iterable<Date | NumberValue>, range: number[], tickNumber?: number): AxisConfig<'band' | 'point', any, ChartsAxisProps>['valueFormatter'];