@mui/x-charts 7.7.1 → 7.8.0

package/LineChart/useLineChartProps.d.ts

@@ -1,5 +1,17 @@
-/// <reference types="react" />
 import type { LineChartProps } from './LineChart';
+import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
+import { ChartsOnAxisClickHandlerProps } from '../ChartsOnAxisClickHandler';
+import { ChartsGridProps } from '../ChartsGrid';
+import { ChartsClipPathProps } from '../ChartsClipPath';
+import { AreaPlotProps } from './AreaPlot';
+import { LinePlotProps } from './LinePlot';
+import { MarkPlotProps } from './MarkPlot';
+import { ChartsOverlayProps } from '../ChartsOverlay';
+import { ChartsAxisProps } from '../ChartsAxis';
+import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
+import { LineHighlightPlotProps } from './LineHighlightPlot';
+import { ChartsLegendProps } from '../ChartsLegend';
+import { ChartsTooltipProps } from '../ChartsTooltip';
 /**
  * A helper function that extracts LineChartProps from the input props
  * and returns an object with props for the children components of LineChart.
@@ -8,110 +20,21 @@ import type { LineChartProps } from './LineChart';
  * @returns An object with props for the children components of LineChart
  */
 export declare const useLineChartProps: (props: LineChartProps) => {
-    chartContainerProps: {
-        series: {
-            color?: string | undefined;
-            area?: boolean | undefined;
-            data?: (number | null)[] | undefined;
-            label?: string | ((location: "tooltip" | "legend") => string) | undefined;
-            id?: import("../internals").SeriesId | undefined;
-            dataKey?: string | undefined;
-            stackOffset?: import("..").StackOffsetType | undefined;
-            valueFormatter?: import("../internals").SeriesValueFormatter<number | null> | undefined;
-            highlightScope?: Partial<import("..").HighlightScope> | undefined;
-            xAxisKey?: string | undefined;
-            yAxisKey?: string | undefined;
-            stack?: string | undefined;
-            stackOrder?: import("..").StackOrderType | undefined;
-            curve?: import("..").CurveType | undefined;
-            showMark?: boolean | ((params: import("..").ShowMarkParams<number | Date>) => boolean) | undefined;
-            disableHighlight: boolean;
-            connectNulls?: boolean | undefined;
-            type: "line";
-        }[];
-        width: number | undefined;
-        height: number | undefined;
-        margin: Partial<import("..").CardinalDirections<number>> | undefined;
-        colors: import("..").ChartsColorPalette | undefined;
-        dataset: import("../internals").DatasetType | undefined;
-        xAxis: import("../internals").MakeOptional<import("..").AxisConfig<import("..").ScaleName, any, import("..").ChartsXAxisProps>, "id">[];
-        yAxis: import("../internals").MakeOptional<import("..").AxisConfig<import("..").ScaleName, any, import("..").ChartsYAxisProps>, "id">[] | undefined;
-        sx: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
-        highlightedItem: import("..").HighlightItemData | null | undefined;
-        onHighlightChange: ((highlightedItem: import("..").HighlightItemData | null) => void) | undefined;
-        disableAxisListener: boolean;
-    };
-    axisClickHandlerProps: {
-        onAxisClick: ((event: MouseEvent, data: {
-            dataIndex: number;
-            axisValue?: string | number | Date | undefined;
-            seriesValues: Record<string, number | null | undefined>;
-        } | null) => void) | undefined;
-    };
-    gridProps: {
-        vertical: boolean | undefined;
-        horizontal: boolean | undefined;
-    };
-    clipPathProps: {
-        id: string;
-    };
+    chartContainerProps: ResponsiveChartContainerProps;
+    axisClickHandlerProps: ChartsOnAxisClickHandlerProps;
+    gridProps: ChartsGridProps;
+    clipPathProps: ChartsClipPathProps;
     clipPathGroupProps: {
         clipPath: string;
     };
-    areaPlotProps: {
-        slots: import("./LineChart").LineChartSlots | undefined;
-        slotProps: import("./LineChart").LineChartSlotProps | undefined;
-        onAreaClick: ((event: import("react").MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: import("..").LineItemIdentifier) => void) | undefined;
-        skipAnimation: boolean | undefined;
-    };
-    linePlotProps: {
-        slots: import("./LineChart").LineChartSlots | undefined;
-        slotProps: import("./LineChart").LineChartSlotProps | undefined;
-        onLineClick: ((event: import("react").MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: import("..").LineItemIdentifier) => void) | undefined;
-        skipAnimation: boolean | undefined;
-    };
-    markPlotProps: {
-        slots: import("./LineChart").LineChartSlots | undefined;
-        slotProps: import("./LineChart").LineChartSlotProps | undefined;
-        onMarkClick: ((event: import("react").MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: import("..").LineItemIdentifier) => void) | undefined;
-        skipAnimation: boolean | undefined;
-    };
-    overlayProps: {
-        slots: import("./LineChart").LineChartSlots | undefined;
-        slotProps: import("./LineChart").LineChartSlotProps | undefined;
-        loading: boolean | undefined;
-    };
-    chartsAxisProps: {
-        topAxis: string | import("..").ChartsXAxisProps | null | undefined;
-        leftAxis: string | import("..").ChartsYAxisProps | null | undefined;
-        rightAxis: string | import("..").ChartsYAxisProps | null | undefined;
-        bottomAxis: string | import("..").ChartsXAxisProps | null | undefined;
-        slots: import("./LineChart").LineChartSlots | undefined;
-        slotProps: import("./LineChart").LineChartSlotProps | undefined;
-    };
-    axisHighlightProps: {
-        x: "none" | "line" | "band";
-        y?: ("none" | "line" | "band") | undefined;
-    };
-    lineHighlightPlotProps: {
-        slots: import("./LineChart").LineChartSlots | undefined;
-        slotProps: import("./LineChart").LineChartSlotProps | undefined;
-    };
-    legendProps: {
-        slots: import("./LineChart").LineChartSlots | undefined;
-        slotProps: import("./LineChart").LineChartSlotProps | undefined;
-        position?: import("..").AnchorPosition | undefined;
-        classes?: Partial<import("..").ChartsLegendClasses> | undefined;
-        hidden?: boolean | undefined;
-        direction?: import("..").Direction | undefined;
-    };
-    tooltipProps: {
-        slots: import("./LineChart").LineChartSlots | undefined;
-        slotProps: import("./LineChart").LineChartSlotProps | undefined;
-        trigger?: import("../ChartsTooltip/utils").TriggerOptions | undefined;
-        itemContent?: import("react").ElementType<import("..").ChartsItemContentProps<any>, keyof import("react").JSX.IntrinsicElements> | undefined;
-        axisContent?: import("react").ElementType<import("..").ChartsAxisContentProps, keyof import("react").JSX.IntrinsicElements> | undefined;
-        classes?: Partial<import("..").ChartsTooltipClasses> | undefined;
-    };
+    areaPlotProps: AreaPlotProps;
+    linePlotProps: LinePlotProps;
+    markPlotProps: MarkPlotProps;
+    overlayProps: ChartsOverlayProps;
+    chartsAxisProps: ChartsAxisProps;
+    axisHighlightProps: ChartsAxisHighlightProps;
+    lineHighlightPlotProps: LineHighlightPlotProps;
+    legendProps: ChartsLegendProps;
+    tooltipProps: ChartsTooltipProps;
     children: import("react").ReactNode;
 };

package/LineChart/useLineChartProps.js

@@ -88,19 +88,19 @@ 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/PieChart/PieArc.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@react-spring/core" />
 import * as React from 'react';
 import { SpringValue } from '@react-spring/web';
 import { PieItemId } from '../models';

package/PieChart/PieArcLabel.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@react-spring/core" />
 import * as React from 'react';
 import { SpringValue } from '@react-spring/web';
 import { PieItemId } from '../models/seriesType/pie';

package/PieChart/dataTransform/transition.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@react-spring/core" />
 import { UseTransitionProps } from '@react-spring/web';
 import { ValueWithHighlight } from './useTransformData';
 export declare const defaultTransitionConfig: UseTransitionProps<ValueWithHighlight>;

package/ResponsiveChartContainer/ResizableContainer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ResponsiveChartContainerProps } from './ResponsiveChartContainer';
 /**
  * Wrapping div that take the shape of its parent.
@@ -6,5 +5,5 @@ import type { ResponsiveChartContainerProps } from './ResponsiveChartContainer';
  * @ignore - do not document.
  */
 export declare const ResizableContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-    ownerState: Pick<ResponsiveChartContainerProps, 'width' | 'height'>;
+    ownerState: Pick<ResponsiveChartContainerProps, "width" | "height">;
 }, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;

package/ScatterChart/useScatterChartProps.d.ts

@@ -1,5 +1,14 @@
-/// <reference types="react" />
+import { ChartsAxisProps } from '../ChartsAxis';
+import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
+import { ChartsGridProps } from '../ChartsGrid';
+import { ChartsLegendProps } from '../ChartsLegend';
+import { ChartsOverlayProps } from '../ChartsOverlay';
+import { ChartsTooltipProps } from '../ChartsTooltip';
+import type { ChartsVoronoiHandlerProps } from '../ChartsVoronoiHandler';
+import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
+import { ZAxisContextProviderProps } from '../context';
 import type { ScatterChartProps } from './ScatterChart';
+import type { ScatterPlotProps } from './ScatterPlot';
 /**
  * A helper function that extracts ScatterChartProps from the input props
  * and returns an object with props for the children components of ScatterChart.
@@ -8,79 +17,15 @@ import type { ScatterChartProps } from './ScatterChart';
  * @returns An object with props for the children components of ScatterChart
  */
 export declare const useScatterChartProps: (props: ScatterChartProps) => {
-    chartContainerProps: {
-        series: {
-            color?: string | undefined;
-            data: import("..").ScatterValueType[];
-            label?: string | ((location: "tooltip" | "legend") => string) | undefined;
-            id?: import("../internals").SeriesId | undefined;
-            valueFormatter?: import("../internals").SeriesValueFormatter<import("..").ScatterValueType> | undefined;
-            highlightScope?: Partial<import("..").HighlightScope> | undefined;
-            xAxisKey?: string | undefined;
-            yAxisKey?: string | undefined;
-            markerSize?: number | undefined;
-            disableHover?: boolean | undefined;
-            zAxisKey?: string | undefined;
-            type: "scatter";
-        }[];
-        width: number | undefined;
-        height: number | undefined;
-        margin: Partial<import("..").CardinalDirections<number>> | undefined;
-        colors: import("..").ChartsColorPalette | undefined;
-        xAxis: import("../internals").MakeOptional<import("..").AxisConfig<import("..").ScaleName, any, import("..").ChartsXAxisProps>, "id">[] | undefined;
-        yAxis: import("../internals").MakeOptional<import("..").AxisConfig<import("..").ScaleName, any, import("..").ChartsYAxisProps>, "id">[] | undefined;
-        sx: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
-        highlightedItem: import("..").HighlightItemData | null | undefined;
-        onHighlightChange: ((highlightedItem: import("..").HighlightItemData | null) => void) | undefined;
-    };
-    zAxisProps: {
-        zAxis: import("../internals").MakeOptional<import("../internals").ZAxisConfig<any>, "id">[] | undefined;
-    };
-    voronoiHandlerProps: {
-        voronoiMaxRadius: number | undefined;
-        onItemClick: ((event: MouseEvent, scatterItemIdentifier: import("..").ScatterItemIdentifier) => void) | undefined;
-    };
-    chartsAxisProps: {
-        topAxis: string | import("..").ChartsXAxisProps | null | undefined;
-        leftAxis: string | import("..").ChartsYAxisProps | null | undefined;
-        rightAxis: string | import("..").ChartsYAxisProps | null | undefined;
-        bottomAxis: string | import("..").ChartsXAxisProps | null | undefined;
-        slots: import("./ScatterChart").ScatterChartSlots | undefined;
-        slotProps: import("./ScatterChart").ScatterChartSlotProps | undefined;
-    };
-    gridProps: {
-        vertical: boolean | undefined;
-        horizontal: boolean | undefined;
-    };
-    scatterPlotProps: {
-        onItemClick: ((event: import("react").MouseEvent<SVGElement, MouseEvent>, scatterItemIdentifier: import("..").ScatterItemIdentifier) => void) | undefined;
-        slots: import("./ScatterChart").ScatterChartSlots | undefined;
-        slotProps: import("./ScatterChart").ScatterChartSlotProps | undefined;
-    };
-    overlayProps: {
-        loading: boolean | undefined;
-        slots: import("./ScatterChart").ScatterChartSlots | undefined;
-        slotProps: import("./ScatterChart").ScatterChartSlotProps | undefined;
-    };
-    legendProps: {
-        slots: import("./ScatterChart").ScatterChartSlots | undefined;
-        slotProps: import("./ScatterChart").ScatterChartSlotProps | undefined;
-        position?: import("..").AnchorPosition | undefined;
-        classes?: Partial<import("..").ChartsLegendClasses> | undefined;
-        hidden?: boolean | undefined;
-        direction?: import("..").Direction | undefined;
-    };
-    axisHighlightProps: {
-        x: "none" | "line" | "band";
-        y: "none" | "line" | "band";
-    };
-    tooltipProps: {
-        slots: import("./ScatterChart").ScatterChartSlots | undefined;
-        slotProps: import("./ScatterChart").ScatterChartSlotProps | undefined;
-        trigger: import("../ChartsTooltip/utils").TriggerOptions;
-        itemContent?: import("react").ElementType<import("..").ChartsItemContentProps<any>, keyof import("react").JSX.IntrinsicElements> | undefined;
-        axisContent?: import("react").ElementType<import("..").ChartsAxisContentProps, keyof import("react").JSX.IntrinsicElements> | undefined;
-        classes?: Partial<import("..").ChartsTooltipClasses> | undefined;
-    };
+    chartContainerProps: ResponsiveChartContainerProps;
+    zAxisProps: Omit<ZAxisContextProviderProps, "children">;
+    voronoiHandlerProps: ChartsVoronoiHandlerProps;
+    chartsAxisProps: ChartsAxisProps;
+    gridProps: ChartsGridProps;
+    scatterPlotProps: ScatterPlotProps;
+    overlayProps: ChartsOverlayProps;
+    legendProps: ChartsLegendProps;
+    axisHighlightProps: ChartsAxisHighlightProps;
+    tooltipProps: ChartsTooltipProps;
     children: import("react").ReactNode;
 };

package/context/CartesianProvider/computeValue.js

@@ -17,6 +17,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 = (0, _d3Scale.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;
 function computeValue(drawingArea, formattedSeries, inAxis, extremumGetters, axisName) {
@@ -49,6 +56,10 @@ function computeValue(drawingArea, formattedSeries, inAxis, extremumGetters, axi
           values: axis.data
         }, axis.colorMap)) : (0, _colorScale.getColorScale)(axis.colorMap))
       });
+      if (isDateData(axis.data)) {
+        const dateFormatter = createDateFormatter(axis, scaleRange);
+        completeAxis[axis.id].valueFormatter = axis.valueFormatter ?? dateFormatter;
+      }
     }
     if ((0, _axis.isPointScaleConfig)(axis)) {
       const scaleRange = axisName === 'x' ? range : [...range].reverse();
@@ -59,6 +70,10 @@ function computeValue(drawingArea, formattedSeries, inAxis, extremumGetters, axi
           values: axis.data
         }, axis.colorMap)) : (0, _colorScale.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/context/CartesianProvider/normalizeAxis.d.ts

@@ -2,4 +2,4 @@ import type { AxisConfig, ScaleName } from '../../models';
 import { ChartsAxisProps } from '../../models/axis';
 import { MakeOptional } from '../../models/helpers';
 import { DatasetType } from '../../models/seriesType/config';
-export declare const normalizeAxis: <T extends ChartsAxisProps, R extends MakeOptional<AxisConfig<ScaleName, any, T>, "id">>(axis: R[] | undefined, dataset: DatasetType | undefined, axisName: 'x' | 'y') => R[] | undefined;
+export declare const normalizeAxis: <T extends ChartsAxisProps, R extends MakeOptional<AxisConfig<ScaleName, any, T>, "id">>(axis: R[] | undefined, dataset: DatasetType | undefined, axisName: "x" | "y") => R[] | undefined;

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/internals/getSVGPoint.js

@@ -0,0 +1,11 @@
+/**
+ * Transform mouse event position to coordinates inside the SVG.
+ * @param svg The SVG element
+ * @param event The mouseEvent to transform
+ */
+export function getSVGPoint(svg, event) {
+  const pt = svg.createSVGPoint();
+  pt.x = event.clientX;
+  pt.y = event.clientY;
+  return pt.matrixTransform(svg.getScreenCTM().inverse());
+}

package/esm/internals/index.js

@@ -6,6 +6,7 @@ export * from '../ResponsiveChartContainer/ResizableContainer';
 // hooks
 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';
@@ -14,6 +15,7 @@ export { useBarChartProps } from '../BarChart/useBarChartProps';
 // utils
 export * from './defaultizeValueFormatter';
 export * from './configInit';
+export * from './getSVGPoint';
 
 // contexts
 

package/esm/internals/utils.js

@@ -3,18 +3,6 @@ export 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
- */
-export 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'.