@mui/x-charts 8.20.0 → 8.22.0

package/esm/ChartsYAxis/useAxisTicksProps.js

@@ -46,7 +46,9 @@ export function useAxisTicksProps(inProps) {
   const defaultDominantBaseline = getDefaultBaseline((position === 'right' ? -90 : 90) - (tickLabelStyle?.angle ?? 0));
   const axisTickLabelProps = useSlotProps({
     elementType: TickLabel,
+    // @ts-expect-error `useSlotProps` applies `WithCommonProps` with adds a `style: React.CSSProperties` prop automatically.
     externalSlotProps: slotProps?.axisTickLabel,
+    // @ts-expect-error `useSlotProps` applies `WithCommonProps` with adds a `style: React.CSSProperties` prop automatically.
     additionalProps: {
       style: _extends({}, theme.typography.caption, {
         fontSize: tickFontSize,

package/esm/ChartsYAxis/utilities.d.ts

@@ -1,4 +1,4 @@
-import { AxisConfig, ChartsYAxisProps } from "../models/axis.js";
+import { type AxisConfig, type ChartsYAxisProps } from "../models/axis.js";
 export declare const useUtilityClasses: (ownerState: AxisConfig<any, any, ChartsYAxisProps>) => Record<"root" | "line" | "label" | "tickContainer" | "tick" | "tickLabel", string>;
 export declare const TICK_LABEL_GAP = 2;
 export declare const AXIS_LABEL_TICK_LABEL_GAP = 2;

package/esm/Gauge/Gauge.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { GaugeContainerProps } from "./GaugeContainer.js";
-import { GaugeClasses } from "./gaugeClasses.js";
-import { GaugeValueTextProps } from "./GaugeValueText.js";
+import { type GaugeContainerProps } from "./GaugeContainer.js";
+import { type GaugeClasses } from "./gaugeClasses.js";
+import { type GaugeValueTextProps } from "./GaugeValueText.js";
 export interface GaugeProps extends GaugeContainerProps, Pick<GaugeValueTextProps, 'text'> {
   classes?: Partial<GaugeClasses>;
   children?: React.ReactNode;

package/esm/Gauge/GaugeContainer.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
-import { GaugeProviderProps } from "./GaugeProvider.js";
-import { MergeSignaturesProperty } from "../internals/plugins/models/index.js";
-import { ChartCorePluginSignatures } from "../internals/plugins/corePlugins/index.js";
+import { type ChartsSurfaceProps } from "../ChartsSurface/index.js";
+import { type GaugeProviderProps } from "./GaugeProvider.js";
+import { type MergeSignaturesProperty } from "../internals/plugins/models/index.js";
+import { type ChartCorePluginSignatures } from "../internals/plugins/corePlugins/index.js";
 export interface GaugeContainerProps extends Omit<ChartsSurfaceProps, 'children'>, Omit<MergeSignaturesProperty<ChartCorePluginSignatures, 'params'>, 'series' | 'dataset' | 'colors' | 'theme' | 'experimentalFeatures'>, Omit<GaugeProviderProps, 'children'>, Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {
   children?: React.ReactNode;
 }

package/esm/Gauge/GaugeValueText.d.ts

@@ -1,4 +1,4 @@
-import { ChartsTextProps } from "../ChartsText/index.js";
+import { type ChartsTextProps } from "../ChartsText/index.js";
 export interface GaugeFormatterParams {
   value: number | null;
   valueMin: number;

package/esm/LineChart/AppearingMask.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SeriesId } from "../models/seriesType/common.js";
+import { type SeriesId } from "../models/seriesType/common.js";
 interface AppearingMaskProps {
   id: SeriesId;
   skipAnimation?: boolean;

package/esm/LineChart/AreaElement.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { AnimatedAreaProps } from "./AnimatedArea.js";
-import { SeriesId } from "../models/seriesType/common.js";
+import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { type AnimatedAreaProps } from "./AnimatedArea.js";
+import { type SeriesId } from "../models/seriesType/common.js";
 export interface AreaElementClasses {
   /** Styles applied to the root element. */
   root: string;

package/esm/LineChart/AreaPlot.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { AreaElementProps, AreaElementSlotProps, AreaElementSlots } from "./AreaElement.js";
-import { LineItemIdentifier } from "../models/seriesType/line.js";
+import { type AreaElementProps, type AreaElementSlotProps, type AreaElementSlots } from "./AreaElement.js";
+import { type LineItemIdentifier } from "../models/seriesType/line.js";
 export interface AreaPlotSlots extends AreaElementSlots {}
 export interface AreaPlotSlotProps extends AreaElementSlotProps {}
 export interface AreaPlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<AreaElementProps, 'slots' | 'slotProps' | 'skipAnimation'> {

package/esm/LineChart/AreaPlot.js

@@ -11,13 +11,16 @@ import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
 import { useXAxes, useYAxes } from "../hooks/useAxis.js";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.js";
 import { useAreaPlotData } from "./useAreaPlotData.js";
+import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const AreaPlotRoot = styled('g', {
   name: 'MuiAreaPlot',
   slot: 'Root'
 })({
   [`& .${areaElementClasses.root}`]: {
-    transition: 'opacity 0.2s ease-in, fill 0.2s ease-in'
+    transitionProperty: 'opacity, fill',
+    transitionDuration: `${ANIMATION_DURATION_MS}ms`,
+    transitionTimingFunction: ANIMATION_TIMING_FUNCTION
   }
 });
 const useAggregatedData = () => {

package/esm/LineChart/CircleMarkElement.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { MarkElementOwnerState } from "./markElementClasses.js";
+import { type MarkElementOwnerState } from "./markElementClasses.js";
 export type CircleMarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & {
   /**
    * If `true`, animations are skipped.

package/esm/LineChart/CircleMarkElement.js

@@ -13,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const Circle = styled('circle')({
   [`&.${markElementClasses.animate}`]: {
     transitionDuration: `${ANIMATION_DURATION_MS}ms`,
-    transitionProperty: 'cx, cy',
+    transitionProperty: 'cx, cy, opacity',
     transitionTimingFunction: ANIMATION_TIMING_FUNCTION
   }
 });

package/esm/LineChart/FocusedLineMark.d.ts

@@ -0,0 +1 @@
+export declare function FocusedLineMark(): import("react/jsx-runtime").JSX.Element | null;

package/esm/LineChart/{FocusedMark.js → FocusedLineMark.js}

@@ -5,7 +5,7 @@ import { useFocusedItem } from "../hooks/useFocusedItem.js";
 import { useLineSeriesContext, useXAxes, useYAxes } from "../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const RADIUS = 6;
-export function FocusedMark() {
+export function FocusedLineMark() {
   const theme = useTheme();
   const focusedItem = useFocusedItem();
   const lineSeries = useLineSeriesContext();

package/esm/LineChart/LineChart.d.ts

@@ -1,21 +1,21 @@
 import * as React from 'react';
-import { MakeOptional } from '@mui/x-internals/types';
-import { ChartsSlots, ChartsSlotProps } from "../internals/material/index.js";
-import { AreaPlotProps, AreaPlotSlotProps, AreaPlotSlots } from "./AreaPlot.js";
-import { LinePlotProps, LinePlotSlotProps, LinePlotSlots } from "./LinePlot.js";
-import { ChartContainerProps } from "../ChartContainer/index.js";
-import { MarkPlotProps, MarkPlotSlotProps, MarkPlotSlots } from "./MarkPlot.js";
-import { ChartsAxisProps } from "../ChartsAxis/ChartsAxis.js";
-import { LineSeriesType } from "../models/seriesType/line.js";
-import { ChartsTooltipSlots, ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.js";
-import { ChartsLegendSlotProps, ChartsLegendSlots } from "../ChartsLegend/index.js";
-import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
-import { ChartsAxisSlotProps, ChartsAxisSlots } from "../models/axis.js";
-import { LineHighlightPlotSlots, LineHighlightPlotSlotProps } from "./LineHighlightPlot.js";
-import { ChartsGridProps } from "../ChartsGrid/index.js";
-import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "../ChartsOverlay/index.js";
-import { LineChartPluginSignatures } from "./LineChart.plugins.js";
-import { ChartsToolbarSlots, ChartsToolbarSlotProps } from "../Toolbar/index.js";
+import { type MakeOptional } from '@mui/x-internals/types';
+import { type ChartsSlots, type ChartsSlotProps } from "../internals/material/index.js";
+import { type AreaPlotProps, type AreaPlotSlotProps, type AreaPlotSlots } from "./AreaPlot.js";
+import { type LinePlotProps, type LinePlotSlotProps, type LinePlotSlots } from "./LinePlot.js";
+import { type ChartContainerProps } from "../ChartContainer/index.js";
+import { type MarkPlotProps, type MarkPlotSlotProps, type MarkPlotSlots } from "./MarkPlot.js";
+import { type ChartsAxisProps } from "../ChartsAxis/ChartsAxis.js";
+import { type LineSeriesType } from "../models/seriesType/line.js";
+import { type ChartsTooltipSlots, type ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.js";
+import { type ChartsLegendSlotProps, type ChartsLegendSlots } from "../ChartsLegend/index.js";
+import { type ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
+import { type ChartsAxisSlotProps, type ChartsAxisSlots } from "../models/axis.js";
+import { type LineHighlightPlotSlots, type LineHighlightPlotSlotProps } from "./LineHighlightPlot.js";
+import { type ChartsGridProps } from "../ChartsGrid/index.js";
+import { type ChartsOverlayProps, type ChartsOverlaySlotProps, type ChartsOverlaySlots } from "../ChartsOverlay/index.js";
+import type { LineChartPluginSignatures } from "./LineChart.plugins.js";
+import type { ChartsToolbarSlots, ChartsToolbarSlotProps } from "../Toolbar/index.js";
 export interface LineChartSlots extends ChartsAxisSlots, AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface LineChartSlotProps extends ChartsAxisSlotProps, AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export type LineSeries = MakeOptional<LineSeriesType, 'type'>;

package/esm/LineChart/LineChart.js

@@ -20,7 +20,7 @@ import { useChartContainerProps } from "../ChartContainer/useChartContainerProps
 import { ChartDataProvider } from "../ChartDataProvider/index.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
 import { ChartsWrapper } from "../ChartsWrapper/index.js";
-import { FocusedMark } from "./FocusedMark.js";
+import { FocusedLineMark } from "./FocusedLineMark.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -64,7 +64,7 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(inProps, ref)
       children: [props.showToolbar && Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
           children: [/*#__PURE__*/_jsx(AreaPlot, _extends({}, areaPlotProps)), /*#__PURE__*/_jsx(LinePlot, _extends({}, linePlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
-        })), /*#__PURE__*/_jsx(FocusedMark, {}), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx("g", {
+        })), /*#__PURE__*/_jsx(FocusedLineMark, {}), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/_jsx(MarkPlot, _extends({}, markPlotProps))
         }), /*#__PURE__*/_jsx(LineHighlightPlot, _extends({}, lineHighlightPlotProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
@@ -291,6 +291,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     offset: PropTypes.number,
+    ordinalTimeTicks: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), PropTypes.shape({
+      format: PropTypes.func.isRequired,
+      getTickNumber: PropTypes.func.isRequired,
+      isTick: PropTypes.func.isRequired
+    })]).isRequired),
     position: PropTypes.oneOf(['bottom', 'none', 'top']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band']),
@@ -307,6 +312,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
@@ -343,6 +349,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     offset: PropTypes.number,
+    ordinalTimeTicks: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), PropTypes.shape({
+      format: PropTypes.func.isRequired,
+      getTickNumber: PropTypes.func.isRequired,
+      isTick: PropTypes.func.isRequired
+    })]).isRequired),
     position: PropTypes.oneOf(['bottom', 'none', 'top']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['point']),
@@ -359,6 +370,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
@@ -403,6 +415,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
@@ -448,6 +461,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
@@ -492,6 +506,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
@@ -536,6 +551,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
@@ -584,6 +600,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
@@ -632,6 +649,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
@@ -676,6 +694,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   })]).isRequired),
   /**
@@ -719,6 +738,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     offset: PropTypes.number,
+    ordinalTimeTicks: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), PropTypes.shape({
+      format: PropTypes.func.isRequired,
+      getTickNumber: PropTypes.func.isRequired,
+      isTick: PropTypes.func.isRequired
+    })]).isRequired),
     position: PropTypes.oneOf(['left', 'none', 'right']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['band']),
@@ -734,6 +758,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
   }), PropTypes.shape({
@@ -770,6 +795,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     offset: PropTypes.number,
+    ordinalTimeTicks: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), PropTypes.shape({
+      format: PropTypes.func.isRequired,
+      getTickNumber: PropTypes.func.isRequired,
+      isTick: PropTypes.func.isRequired
+    })]).isRequired),
     position: PropTypes.oneOf(['left', 'none', 'right']),
     reverse: PropTypes.bool,
     scaleType: PropTypes.oneOf(['point']),
@@ -785,6 +815,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
   }), PropTypes.shape({
@@ -828,6 +859,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
   }), PropTypes.shape({
@@ -872,6 +904,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
   }), PropTypes.shape({
@@ -915,6 +948,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
   }), PropTypes.shape({
@@ -958,6 +992,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
   }), PropTypes.shape({
@@ -1005,6 +1040,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
   }), PropTypes.shape({
@@ -1052,6 +1088,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
   }), PropTypes.shape({
@@ -1095,6 +1132,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: PropTypes.number,
     tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
+    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
     width: PropTypes.number
   })]).isRequired)

package/esm/LineChart/LineChart.plugins.d.ts

@@ -1,9 +1,10 @@
-import { UseChartZAxisSignature } from "../internals/plugins/featurePlugins/useChartZAxis/index.js";
-import { UseChartCartesianAxisSignature } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
-import { UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
-import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
-import { UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
-import { ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
-import { UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
-export type LineChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'line'>, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
+import { type UseChartZAxisSignature } from "../internals/plugins/featurePlugins/useChartZAxis/index.js";
+import { type UseChartCartesianAxisSignature } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { type UseChartTooltipSignature } from "../internals/plugins/featurePlugins/useChartTooltip/index.js";
+import { type UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { type UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+import { type UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+import { type ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
+import { type UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
+export type LineChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'line'>, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
 export declare const LINE_CHART_PLUGINS: ConvertSignaturesIntoPlugins<LineChartPluginSignatures>;

package/esm/LineChart/LineChart.plugins.js

@@ -1,7 +1,8 @@
 import { useChartZAxis } from "../internals/plugins/featurePlugins/useChartZAxis/index.js";
 import { useChartCartesianAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { useChartTooltip } from "../internals/plugins/featurePlugins/useChartTooltip/index.js";
 import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 import { useChartKeyboardNavigation } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { useChartBrush } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
-export const LINE_CHART_PLUGINS = [useChartZAxis, useChartBrush, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartKeyboardNavigation];
+export const LINE_CHART_PLUGINS = [useChartZAxis, useChartBrush, useChartTooltip, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartKeyboardNavigation];

package/esm/LineChart/LineElement.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { AnimatedLineProps } from "./AnimatedLine.js";
-import { SeriesId } from "../models/seriesType/common.js";
+import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { type AnimatedLineProps } from "./AnimatedLine.js";
+import { type SeriesId } from "../models/seriesType/common.js";
 export interface LineElementClasses {
   /** Styles applied to the root element. */
   root: string;

package/esm/LineChart/LineHighlightElement.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SeriesId } from "../models/seriesType/common.js";
+import { type SeriesId } from "../models/seriesType/common.js";
 export interface LineHighlightElementClasses {
   /** Styles applied to the root element. */
   root: string;

package/esm/LineChart/LineHighlightPlot.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { LineHighlightElementProps } from "./LineHighlightElement.js";
+import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { type LineHighlightElementProps } from "./LineHighlightElement.js";
 export interface LineHighlightPlotSlots {
   lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
 }

package/esm/LineChart/LinePlot.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { LineElementProps, LineElementSlotProps, LineElementSlots } from "./LineElement.js";
-import { LineItemIdentifier } from "../models/seriesType/line.js";
+import { type LineElementProps, type LineElementSlotProps, type LineElementSlots } from "./LineElement.js";
+import { type LineItemIdentifier } from "../models/seriesType/line.js";
 export interface LinePlotSlots extends LineElementSlots {}
 export interface LinePlotSlotProps extends LineElementSlotProps {}
 export interface LinePlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<LineElementProps, 'slots' | 'slotProps' | 'skipAnimation'> {

package/esm/LineChart/LinePlot.js

@@ -11,13 +11,16 @@ import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
 import { useXAxes, useYAxes } from "../hooks/index.js";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.js";
 import { useLinePlotData } from "./useLinePlotData.js";
+import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const LinePlotRoot = styled('g', {
   name: 'MuiAreaPlot',
   slot: 'Root'
 })({
   [`& .${lineElementClasses.root}`]: {
-    transition: 'opacity 0.2s ease-in, fill 0.2s ease-in'
+    transitionProperty: 'opacity, fill',
+    transitionDuration: `${ANIMATION_DURATION_MS}ms`,
+    transitionTimingFunction: ANIMATION_TIMING_FUNCTION
   }
 });
 const useAggregatedData = () => {

package/esm/LineChart/MarkElement.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { MarkElementOwnerState } from "./markElementClasses.js";
+import { type MarkElementOwnerState } from "./markElementClasses.js";
 export type MarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & {
   /**
    * If `true`, animations are skipped.

package/esm/LineChart/MarkElement.js

@@ -24,7 +24,7 @@ const MarkElementPath = styled('path', {
   strokeWidth: 2,
   [`&.${markElementClasses.animate}`]: {
     transitionDuration: `${ANIMATION_DURATION_MS}ms`,
-    transitionProperty: 'transform, transform-origin',
+    transitionProperty: 'transform, transform-origin, opacity',
     transitionTimingFunction: ANIMATION_TIMING_FUNCTION
   }
 }));

package/esm/LineChart/MarkPlot.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { LineItemIdentifier } from "../models/seriesType/line.js";
-import { MarkElementProps } from "./MarkElement.js";
+import { type LineItemIdentifier } from "../models/seriesType/line.js";
+import { type MarkElementProps } from "./MarkElement.js";
 export interface MarkPlotSlots {
   mark?: React.JSXElementConstructor<MarkElementProps>;
 }
@@ -35,7 +35,7 @@ export interface MarkPlotProps extends React.SVGAttributes<SVGSVGElement>, Pick<
  *
  * - [MarkPlot API](https://mui.com/x/api/charts/mark-plot/)
  */
-declare function MarkPlot(props: MarkPlotProps): import("react/jsx-runtime").JSX.Element | null;
+declare function MarkPlot(props: MarkPlotProps): import("react/jsx-runtime").JSX.Element;
 declare namespace MarkPlot {
   var propTypes: any;
 }