@mui/x-charts 7.7.1 → 7.8.0

package/hooks/useAxisEvents.js

@@ -8,7 +8,7 @@ var React = _interopRequireWildcard(require("react"));
 var _InteractionProvider = require("../context/InteractionProvider");
 var _CartesianProvider = require("../context/CartesianProvider");
 var _isBandScale = require("../internals/isBandScale");
-var _utils = require("../internals/utils");
+var _getSVGPoint = require("../internals/getSVGPoint");
 var _useSvgRef = require("./useSvgRef");
 var _useDrawingArea = require("./useDrawingArea");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -46,10 +46,7 @@ const useAxisEvents = disableAxisListener => {
     if (element === null || disableAxisListener) {
       return () => {};
     }
-    const getUpdate = (axisConfig, mouseValue) => {
-      if (usedXAxis === null) {
-        return null;
-      }
+    function getNewAxisState(axisConfig, mouseValue) {
       const {
         scale,
         data: axisData,
@@ -97,7 +94,7 @@ const useAxisEvents = disableAxisListener => {
         index: dataIndex,
         value: axisData[dataIndex]
       };
-    };
+    }
     const handleOut = () => {
       mousePosition.current = {
         x: -1,
@@ -109,7 +106,7 @@ const useAxisEvents = disableAxisListener => {
     };
     const handleMove = event => {
       const target = 'targetTouches' in event ? event.targetTouches[0] : event;
-      const svgPoint = (0, _utils.getSVGPoint)(svgRef.current, target);
+      const svgPoint = (0, _getSVGPoint.getSVGPoint)(svgRef.current, target);
       mousePosition.current = {
         x: svgPoint.x,
         y: svgPoint.y
@@ -122,8 +119,8 @@ const useAxisEvents = disableAxisListener => {
         });
         return;
       }
-      const newStateX = getUpdate(xAxis[usedXAxis], svgPoint.x);
-      const newStateY = getUpdate(yAxis[usedYAxis], svgPoint.y);
+      const newStateX = getNewAxisState(xAxis[usedXAxis], svgPoint.x);
+      const newStateY = getNewAxisState(yAxis[usedYAxis], svgPoint.y);
       dispatch({
         type: 'updateAxis',
         data: {

package/hooks/useChartDimensions.d.ts

@@ -1,5 +1,5 @@
 import { LayoutConfig } from '../models/layout';
-declare const useChartDimensions: (width: number, height: number, margin: LayoutConfig['margin']) => {
+declare const useChartDimensions: (width: number, height: number, margin: LayoutConfig["margin"]) => {
     left: number;
     top: number;
     right: number;

package/hooks/useColor.d.ts

@@ -1,4 +1,4 @@
-import { ChartSeriesType } from '../internals';
+import { ChartSeriesType } from '../models/seriesType/config';
 import { ColorProcessorsConfig } from '../models/plugin';
 export declare function useColorProcessor<T extends ChartSeriesType>(seriesType: T): ColorProcessorsConfig<ChartSeriesType>;
 export declare function useColorProcessor(): ColorProcessorsConfig<ChartSeriesType>;

package/hooks/useScale.js

@@ -16,7 +16,7 @@ var _isBandScale = require("../internals/isBandScale");
  */
 function getValueToPositionMapper(scale) {
   if ((0, _isBandScale.isBandScale)(scale)) {
-    return value => scale(value) + scale.bandwidth() / 2;
+    return value => (scale(value) ?? 0) + scale.bandwidth() / 2;
   }
   return value => scale(value);
 }

package/hooks/useTicks.js

@@ -43,7 +43,8 @@ function useTicks(options) {
       const domain = scale.domain();
       if (scale.bandwidth() > 0) {
         // scale type = 'band'
-        return [...domain.map(value => ({
+        const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
+        return [...filteredDomain.map(value => ({
           value,
           formattedValue: valueFormatter?.(value, {
             location: 'tick'

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.7.1
+ * @mui/x-charts v7.8.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/AxisSharedComponents.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 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/ChartsAxesGradients/ChartsAxesGradients.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { AxisId } from '../../../models/axis';
-export declare function useChartGradient(): (axisId: AxisId, direction: 'x' | 'y') => string;
+export declare function useChartGradient(): (axisId: AxisId, direction: "x" | "y") => string;
 export declare function ChartsAxesGradients(): React.JSX.Element;

package/internals/defaultizeColor.d.ts

@@ -2,92 +2,92 @@ import { AllSeriesType } from '../models/seriesType';
 export declare function defaultizeColor(series: AllSeriesType, seriesIndex: number, colors?: string[]): {
     data: {
         color: string;
-        label?: string | ((location: "tooltip" | "legend" | "arc") => string) | undefined;
+        label?: string | ((location: "tooltip" | "legend" | "arc") => string);
         value: number;
         id?: import("../models/seriesType").PieItemId | undefined;
     }[];
     type: "pie";
-    innerRadius?: string | number | undefined;
-    outerRadius?: string | number | undefined;
-    arcLabelRadius?: string | number | undefined;
-    cornerRadius?: number | undefined;
-    startAngle?: number | undefined;
-    endAngle?: number | undefined;
-    paddingAngle?: number | undefined;
-    sortingValues?: import("../models/seriesType").ChartsPieSorting | undefined;
-    arcLabel?: "label" | "value" | "formattedValue" | ((item: Omit<import("../models/seriesType").DefaultizedPieValueType, "label"> & {
-        label?: string | undefined;
-    }) => string) | undefined;
-    arcLabelMinAngle?: number | undefined;
-    cx?: string | number | undefined;
-    cy?: string | number | undefined;
+    innerRadius?: number | string;
+    outerRadius?: number | string;
+    arcLabelRadius?: number | string;
+    cornerRadius?: number;
+    startAngle?: number;
+    endAngle?: number;
+    paddingAngle?: number;
+    sortingValues?: import("../models/seriesType").ChartsPieSorting;
+    arcLabel?: "formattedValue" | "label" | "value" | ((item: Omit<import("../models/seriesType").DefaultizedPieValueType, "label"> & {
+        label?: string;
+    }) => string);
+    arcLabelMinAngle?: number;
+    cx?: number | string;
+    cy?: number | string;
     highlighted?: {
-        additionalRadius?: number | undefined;
-        innerRadius?: number | undefined;
-        outerRadius?: number | undefined;
-        cornerRadius?: number | undefined;
-        paddingAngle?: number | undefined;
-        arcLabelRadius?: number | undefined;
-        color?: string | undefined;
-    } | undefined;
+        additionalRadius?: number;
+        innerRadius?: number;
+        outerRadius?: number;
+        cornerRadius?: number;
+        paddingAngle?: number;
+        arcLabelRadius?: number;
+        color?: string;
+    };
     faded?: {
-        additionalRadius?: number | undefined;
-        innerRadius?: number | undefined;
-        outerRadius?: number | undefined;
-        cornerRadius?: number | undefined;
-        paddingAngle?: number | undefined;
-        arcLabelRadius?: number | undefined;
-        color?: string | undefined;
-    } | undefined;
-    id?: import(".").SeriesId | undefined;
-    color?: string | undefined;
+        additionalRadius?: number;
+        innerRadius?: number;
+        outerRadius?: number;
+        cornerRadius?: number;
+        paddingAngle?: number;
+        arcLabelRadius?: number;
+        color?: string;
+    };
+    id?: import(".").SeriesId;
+    color?: string;
     valueFormatter?: import(".").SeriesValueFormatter<import(".").MakeOptional<import("../models/seriesType").PieValueType, "id">> | undefined;
-    highlightScope?: Partial<import("..").HighlightScope> | undefined;
+    highlightScope?: Partial<import("..").HighlightScope>;
 } | {
     type: "bar";
-    data?: (number | null)[] | undefined;
-    dataKey?: string | undefined;
-    label?: string | ((location: "tooltip" | "legend") => string) | undefined;
-    layout?: "horizontal" | "vertical" | undefined;
-    stackOffset?: import("..").StackOffsetType | undefined;
-    id?: import(".").SeriesId | undefined;
+    data?: (number | null)[];
+    dataKey?: string;
+    label?: string | ((location: "tooltip" | "legend") => string);
+    layout?: "horizontal" | "vertical";
+    stackOffset?: import("..").StackOffsetType;
+    id?: import(".").SeriesId;
     color: string;
     valueFormatter?: import(".").SeriesValueFormatter<number | null> | undefined;
-    highlightScope?: Partial<import("..").HighlightScope> | undefined;
-    xAxisKey?: string | undefined;
-    yAxisKey?: string | undefined;
-    stack?: string | undefined;
-    stackOrder?: import("..").StackOrderType | undefined;
+    highlightScope?: Partial<import("..").HighlightScope>;
+    xAxisKey?: string;
+    yAxisKey?: string;
+    stack?: string;
+    stackOrder?: import("..").StackOrderType;
 } | {
     type: "line";
-    data?: (number | null)[] | undefined;
-    dataKey?: string | undefined;
-    stack?: string | undefined;
-    area?: boolean | undefined;
-    label?: string | ((location: "tooltip" | "legend") => string) | undefined;
-    curve?: import("../models/seriesType").CurveType | undefined;
-    showMark?: boolean | ((params: import("../models/seriesType").ShowMarkParams<number | Date>) => boolean) | undefined;
-    disableHighlight?: boolean | undefined;
-    connectNulls?: boolean | undefined;
-    stackOffset?: import("..").StackOffsetType | undefined;
-    id?: import(".").SeriesId | undefined;
+    data?: (number | null)[];
+    dataKey?: string;
+    stack?: string;
+    area?: boolean;
+    label?: string | ((location: "tooltip" | "legend") => string);
+    curve?: import("../models/seriesType").CurveType;
+    showMark?: boolean | ((params: import("../models/seriesType").ShowMarkParams) => boolean);
+    disableHighlight?: boolean;
+    connectNulls?: boolean;
+    stackOffset?: import("..").StackOffsetType;
+    id?: import(".").SeriesId;
     color: string;
     valueFormatter?: import(".").SeriesValueFormatter<number | null> | undefined;
-    highlightScope?: Partial<import("..").HighlightScope> | undefined;
-    xAxisKey?: string | undefined;
-    yAxisKey?: string | undefined;
-    stackOrder?: import("..").StackOrderType | undefined;
+    highlightScope?: Partial<import("..").HighlightScope>;
+    xAxisKey?: string;
+    yAxisKey?: string;
+    stackOrder?: import("..").StackOrderType;
 } | {
     type: "scatter";
     data: import("../models/seriesType").ScatterValueType[];
-    markerSize?: number | undefined;
-    label?: string | ((location: "tooltip" | "legend") => string) | undefined;
-    disableHover?: boolean | undefined;
-    zAxisKey?: string | undefined;
-    id?: import(".").SeriesId | undefined;
+    markerSize?: number;
+    label?: string | ((location: "tooltip" | "legend") => string);
+    disableHover?: boolean;
+    zAxisKey?: string;
+    id?: import(".").SeriesId;
     color: string;
     valueFormatter?: import(".").SeriesValueFormatter<import("../models/seriesType").ScatterValueType> | undefined;
-    highlightScope?: Partial<import("..").HighlightScope> | undefined;
-    xAxisKey?: string | undefined;
-    yAxisKey?: string | undefined;
+    highlightScope?: Partial<import("..").HighlightScope>;
+    xAxisKey?: string;
+    yAxisKey?: string;
 };

package/internals/getSVGPoint.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Transform mouse event position to coordinates inside the SVG.
+ * @param svg The SVG element
+ * @param event The mouseEvent to transform
+ */
+export declare function getSVGPoint(svg: SVGSVGElement, event: Pick<MouseEvent, 'clientX' | 'clientY'>): DOMPoint;

package/internals/getSVGPoint.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSVGPoint = getSVGPoint;
+/**
+ * Transform mouse event position to coordinates inside the SVG.
+ * @param svg The SVG element
+ * @param event The mouseEvent to transform
+ */
+function getSVGPoint(svg, event) {
+  const pt = svg.createSVGPoint();
+  pt.x = event.clientX;
+  pt.y = event.clientY;
+  return pt.matrixTransform(svg.getScreenCTM().inverse());
+}

package/internals/getWordsByLines.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type ChartsTextBaseline = 'hanging' | 'central' | 'auto';
 export interface ChartsTextStyle extends React.CSSProperties {
     angle?: number;

package/internals/index.d.ts

@@ -3,12 +3,14 @@ export * from '../ResponsiveChartContainer/useChartContainerDimensions';
 export * from '../ResponsiveChartContainer/ResizableContainer';
 export { useReducedMotion } from '../hooks/useReducedMotion';
 export { useSeries } from '../hooks/useSeries';
+export { useDrawingArea } from '../hooks/useDrawingArea';
 export { useChartContainerHooks } from '../ChartContainer/useChartContainerHooks';
 export { useScatterChartProps } from '../ScatterChart/useScatterChartProps';
 export { useLineChartProps } from '../LineChart/useLineChartProps';
 export { useBarChartProps } from '../BarChart/useBarChartProps';
 export * from './defaultizeValueFormatter';
 export * from './configInit';
+export * from './getSVGPoint';
 export * from '../context/CartesianProvider';
 export * from '../context/DrawingProvider';
 export * from '../context/ColorProvider';

package/internals/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {
   useReducedMotion: true,
   useSeries: true,
+  useDrawingArea: true,
   useChartContainerHooks: true,
   useScatterChartProps: true,
   useLineChartProps: true,
@@ -23,6 +24,12 @@ Object.defineProperty(exports, "useChartContainerHooks", {
     return _useChartContainerHooks.useChartContainerHooks;
   }
 });
+Object.defineProperty(exports, "useDrawingArea", {
+  enumerable: true,
+  get: function () {
+    return _useDrawingArea.useDrawingArea;
+  }
+});
 Object.defineProperty(exports, "useLineChartProps", {
   enumerable: true,
   get: function () {
@@ -85,6 +92,7 @@ Object.keys(_ResizableContainer).forEach(function (key) {
 });
 var _useReducedMotion = require("../hooks/useReducedMotion");
 var _useSeries = require("../hooks/useSeries");
+var _useDrawingArea = require("../hooks/useDrawingArea");
 var _useChartContainerHooks = require("../ChartContainer/useChartContainerHooks");
 var _useScatterChartProps = require("../ScatterChart/useScatterChartProps");
 var _useLineChartProps = require("../LineChart/useLineChartProps");
@@ -113,6 +121,18 @@ Object.keys(_configInit).forEach(function (key) {
     }
   });
 });
+var _getSVGPoint = require("./getSVGPoint");
+Object.keys(_getSVGPoint).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _getSVGPoint[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _getSVGPoint[key];
+    }
+  });
+});
 var _CartesianProvider = require("../context/CartesianProvider");
 Object.keys(_CartesianProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/internals/useAnimatedPath.d.ts

@@ -1,2 +1 @@
-/// <reference types="@react-spring/core" />
 export declare const useAnimatedPath: (path: string, skipAnimation?: boolean) => import("@react-spring/core").Interpolation<string, any>;

package/internals/utils.d.ts

@@ -4,12 +4,6 @@ type Without<T, U> = {
     [P in Exclude<keyof T, keyof U>]?: never;
 };
 export type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
-/**
- * Transform mouse event position to coordinates inside the SVG.
- * @param svg The SVG element
- * @param event The mouseEvent to transform
- */
-export declare function getSVGPoint(svg: SVGSVGElement, event: Pick<MouseEvent, 'clientX' | 'clientY'>): DOMPoint;
 /**
  * Helper that converts values and percentages into values.
  * @param value The value provided by the developer. Can either be a number or a string with '%' or 'px'.

package/internals/utils.js

@@ -5,25 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.cleanId = cleanId;
 exports.getPercentageValue = getPercentageValue;
-exports.getSVGPoint = getSVGPoint;
 exports.getSymbol = getSymbol;
 // Returns the index of a defined shape
 function getSymbol(shape) {
   const symbolNames = 'circle cross diamond square star triangle wye'.split(/ /);
   return symbolNames.indexOf(shape) || 0;
 }
-/**
- * Transform mouse event position to coordinates inside the SVG.
- * @param svg The SVG element
- * @param event The mouseEvent to transform
- */
-function getSVGPoint(svg, event) {
-  const pt = svg.createSVGPoint();
-  pt.x = event.clientX;
-  pt.y = event.clientY;
-  return pt.matrixTransform(svg.getScreenCTM().inverse());
-}
-
 /**
  * Helper that converts values and percentages into values.
  * @param value The value provided by the developer. Can either be a number or a string with '%' or 'px'.

package/models/axis.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ScaleBand, ScaleLogarithmic, ScalePower, ScaleTime, ScaleLinear, ScalePoint, ScaleOrdinal, ScaleSequential, ScaleThreshold } from 'd3-scale';
 import { ChartsAxisClasses } from '../ChartsAxis/axisClasses';
 import type { TickParams } from '../hooks/useTicks';
@@ -126,7 +125,7 @@ export interface ChartsXAxisProps extends ChartsAxisProps {
      */
     position?: 'top' | 'bottom';
 }
-export type ScaleName = 'linear' | 'band' | 'point' | 'log' | 'pow' | 'sqrt' | 'time' | 'utc';
+export type ScaleName = keyof AxisScaleConfig;
 export type ContinuousScaleName = 'linear' | 'log' | 'pow' | 'sqrt' | 'time' | 'utc';
 export interface AxisScaleConfig {
     band: {

package/modern/BarChart/useBarChartProps.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
-
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.

package/modern/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -66,15 +66,30 @@ function ChartsAxisHighlight(props) {
   } = React.useContext(InteractionContext);
   const getXPosition = getValueToPositionMapper(xScale);
   const getYPosition = getValueToPositionMapper(yScale);
+  const axisX = axis.x;
+  const axisY = axis.y;
+  const isBandScaleX = xAxisHighlight === 'band' && axisX !== null && isBandScale(xScale);
+  const isBandScaleY = yAxisHighlight === 'band' && axisY !== null && isBandScale(yScale);
+  if (process.env.NODE_ENV !== 'production') {
+    const isXError = isBandScaleX && xScale(axisX.value) === undefined;
+    const isYError = isBandScaleY && yScale(axisY.value) === undefined;
+    if (isXError || isYError) {
+      console.error([`MUI X Charts: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
+    }
+  }
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [xAxisHighlight === 'band' && axis.x !== null && isBandScale(xScale) && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
-      d: `M ${xScale(axis.x.value) - (xScale.step() - xScale.bandwidth()) / 2} ${yScale.range()[0]} l ${xScale.step()} 0 l 0 ${yScale.range()[1] - yScale.range()[0]} l ${-xScale.step()} 0 Z`,
+    children: [isBandScaleX && xScale(axisX.value) !== undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath
+    // @ts-expect-error, xScale value is checked in the statement above
+    , {
+      d: `M ${xScale(axisX.value) - (xScale.step() - xScale.bandwidth()) / 2} ${yScale.range()[0]} l ${xScale.step()} 0 l 0 ${yScale.range()[1] - yScale.range()[0]} l ${-xScale.step()} 0 Z`,
       className: classes.root,
       ownerState: {
         axisHighlight: 'band'
       }
-    }), yAxisHighlight === 'band' && axis.y !== null && isBandScale(yScale) && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
-      d: `M ${xScale.range()[0]} ${yScale(axis.y.value) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${xScale.range()[1] - xScale.range()[0]} 0 l 0 ${-yScale.step()} Z`,
+    }), isBandScaleY && yScale(axisY.value) === undefined && /*#__PURE__*/_jsx(ChartsAxisHighlightPath, {
+      d: `M ${xScale.range()[0]} ${
+      // @ts-expect-error, yScale value is checked in the statement above
+      yScale(axisY.value) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${xScale.range()[1] - xScale.range()[0]} 0 l 0 ${-yScale.step()} Z`,
       className: classes.root,
       ownerState: {
         axisHighlight: 'band'

package/modern/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -5,7 +5,7 @@ import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { InteractionContext } from '../context/InteractionProvider';
 import { useCartesianContext } from '../context/CartesianProvider';
 import { getValueToPositionMapper } from '../hooks/useScale';
-import { getSVGPoint } from '../internals/utils';
+import { getSVGPoint } from '../internals/getSVGPoint';
 import { useDrawingArea, useSvgRef } from '../hooks';
 import { useHighlighted } from '../context';
 import { useScatterSeries } from '../hooks/useSeries';

package/modern/ChartsYAxis/ChartsYAxis.js

@@ -81,6 +81,7 @@ function ChartsYAxis(inProps) {
     tickLabelInterval
   } = defaultizedProps;
   const theme = useTheme();
+  const isRTL = theme.direction === 'rtl';
   const classes = useUtilityClasses(_extends({}, defaultizedProps, {
     theme
   }));
@@ -108,13 +109,14 @@ function ChartsYAxis(inProps) {
   const Tick = slots?.axisTick ?? 'line';
   const TickLabel = slots?.axisTickLabel ?? ChartsText;
   const Label = slots?.axisLabel ?? ChartsText;
+  const revertAnchor = !isRTL && position === 'right' || isRTL && position !== 'right';
   const axisTickLabelProps = useSlotProps({
     elementType: TickLabel,
     externalSlotProps: slotProps?.axisTickLabel,
     additionalProps: {
       style: _extends({
         fontSize: tickFontSize,
-        textAnchor: position === 'right' ? 'start' : 'end',
+        textAnchor: revertAnchor ? 'start' : 'end',
         dominantBaseline: 'central'
       }, tickLabelStyle)
     },

package/modern/LineChart/useLineChartProps.js

@@ -81,19 +81,19 @@ export const useLineChartProps = props => {
   const areaPlotProps = {
     slots,
     slotProps,
-    onAreaClick,
+    onItemClick: onAreaClick,
     skipAnimation
   };
   const linePlotProps = {
     slots,
     slotProps,
-    onLineClick,
+    onItemClick: onLineClick,
     skipAnimation
   };
   const markPlotProps = {
     slots,
     slotProps,
-    onMarkClick,
+    onItemClick: onMarkClick,
     skipAnimation
   };
   const overlayProps = {

package/modern/context/CartesianProvider/computeValue.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { scaleBand, scalePoint } from 'd3-scale';
+import { scaleBand, scalePoint, scaleTime } from 'd3-scale';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../../constants';
 import { isBandScaleConfig, isPointScaleConfig } from '../../models/axis';
 import { getColorScale, getOrdinalColorScale } from '../../internals/colorScale';
@@ -10,6 +10,13 @@ const getRange = (drawingArea, axisName, isReverse) => {
   const range = axisName === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
   return isReverse ? range.reverse() : range;
 };
+const isDateData = data => data?.[0] instanceof Date;
+function createDateFormatter(axis, range) {
+  const timeScale = scaleTime(axis.data, range);
+  return (v, {
+    location
+  }) => location === 'tick' ? timeScale.tickFormat(axis.tickNumber)(v) : `${v.toLocaleString()}`;
+}
 const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
 const DEFAULT_BAR_GAP_RATIO = 0.1;
 export function computeValue(drawingArea, formattedSeries, inAxis, extremumGetters, axisName) {
@@ -42,6 +49,10 @@ export function computeValue(drawingArea, formattedSeries, inAxis, extremumGette
           values: axis.data
         }, axis.colorMap)) : getColorScale(axis.colorMap))
       });
+      if (isDateData(axis.data)) {
+        const dateFormatter = createDateFormatter(axis, scaleRange);
+        completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
+      }
     }
     if (isPointScaleConfig(axis)) {
       const scaleRange = axisName === 'x' ? range : [...range].reverse();
@@ -52,6 +63,10 @@ export function computeValue(drawingArea, formattedSeries, inAxis, extremumGette
           values: axis.data
         }, axis.colorMap)) : getColorScale(axis.colorMap))
       });
+      if (isDateData(axis.data)) {
+        const dateFormatter = createDateFormatter(axis, scaleRange);
+        completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
+      }
     }
     if (axis.scaleType === 'band' || axis.scaleType === 'point') {
       // Could be merged with the two previous "if conditions" but then TS does not get that `axis.scaleType` can't be `band` or `point`.

package/modern/hooks/useAxisEvents.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { InteractionContext } from '../context/InteractionProvider';
 import { useCartesianContext } from '../context/CartesianProvider';
 import { isBandScale } from '../internals/isBandScale';
-import { getSVGPoint } from '../internals/utils';
+import { getSVGPoint } from '../internals/getSVGPoint';
 import { useSvgRef } from './useSvgRef';
 import { useDrawingArea } from './useDrawingArea';
 function getAsANumber(value) {
@@ -38,10 +38,7 @@ export const useAxisEvents = disableAxisListener => {
     if (element === null || disableAxisListener) {
       return () => {};
     }
-    const getUpdate = (axisConfig, mouseValue) => {
-      if (usedXAxis === null) {
-        return null;
-      }
+    function getNewAxisState(axisConfig, mouseValue) {
       const {
         scale,
         data: axisData,
@@ -89,7 +86,7 @@ export const useAxisEvents = disableAxisListener => {
         index: dataIndex,
         value: axisData[dataIndex]
       };
-    };
+    }
     const handleOut = () => {
       mousePosition.current = {
         x: -1,
@@ -114,8 +111,8 @@ export const useAxisEvents = disableAxisListener => {
         });
         return;
       }
-      const newStateX = getUpdate(xAxis[usedXAxis], svgPoint.x);
-      const newStateY = getUpdate(yAxis[usedYAxis], svgPoint.y);
+      const newStateX = getNewAxisState(xAxis[usedXAxis], svgPoint.x);
+      const newStateY = getNewAxisState(yAxis[usedYAxis], svgPoint.y);
       dispatch({
         type: 'updateAxis',
         data: {

package/modern/hooks/useScale.js

@@ -8,7 +8,7 @@ import { isBandScale } from '../internals/isBandScale';
  */
 export function getValueToPositionMapper(scale) {
   if (isBandScale(scale)) {
-    return value => scale(value) + scale.bandwidth() / 2;
+    return value => (scale(value) ?? 0) + scale.bandwidth() / 2;
   }
   return value => scale(value);
 }

package/modern/hooks/useTicks.js

@@ -34,7 +34,8 @@ export function useTicks(options) {
       const domain = scale.domain();
       if (scale.bandwidth() > 0) {
         // scale type = 'band'
-        return [...domain.map(value => ({
+        const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
+        return [...filteredDomain.map(value => ({
           value,
           formattedValue: valueFormatter?.(value, {
             location: 'tick'

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.7.1
+ * @mui/x-charts v7.8.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the