@mui/x-charts 8.20.0 → 8.22.0

package/ChartsYAxis/useAxisTicksProps.js

@@ -52,7 +52,9 @@ function useAxisTicksProps(inProps) {
   const defaultDominantBaseline = (0, _defaultTextPlacement.getDefaultBaseline)((position === 'right' ? -90 : 90) - (tickLabelStyle?.angle ?? 0));
   const axisTickLabelProps = (0, _useSlotProps.default)({
     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: (0, _extends2.default)({}, theme.typography.caption, {
         fontSize: tickFontSize,

package/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/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/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/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/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/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/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/LineChart/AreaPlot.js

@@ -17,6 +17,7 @@ var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _useAxis = require("../hooks/useAxis");
 var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
 var _useAreaPlotData = require("./useAreaPlotData");
+var _animation = require("../internals/animation/animation");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "onItemClick", "skipAnimation"];
 const AreaPlotRoot = (0, _styles.styled)('g', {
@@ -24,7 +25,9 @@ const AreaPlotRoot = (0, _styles.styled)('g', {
   slot: 'Root'
 })({
   [`& .${_AreaElement.areaElementClasses.root}`]: {
-    transition: 'opacity 0.2s ease-in, fill 0.2s ease-in'
+    transitionProperty: 'opacity, fill',
+    transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
+    transitionTimingFunction: _animation.ANIMATION_TIMING_FUNCTION
   }
 });
 const useAggregatedData = () => {

package/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/LineChart/CircleMarkElement.js

@@ -20,7 +20,7 @@ const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "
 const Circle = (0, _styles.styled)('circle')({
   [`&.${_markElementClasses.markElementClasses.animate}`]: {
     transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
-    transitionProperty: 'cx, cy',
+    transitionProperty: 'cx, cy, opacity',
     transitionTimingFunction: _animation.ANIMATION_TIMING_FUNCTION
   }
 });

package/LineChart/FocusedLineMark.d.ts

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

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

@@ -4,13 +4,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FocusedMark = FocusedMark;
+exports.FocusedLineMark = FocusedLineMark;
 var _styles = require("@mui/material/styles");
 var _useFocusedItem = require("../hooks/useFocusedItem");
 var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 const RADIUS = 6;
-function FocusedMark() {
+function FocusedLineMark() {
   const theme = (0, _styles.useTheme)();
   const focusedItem = (0, _useFocusedItem.useFocusedItem)();
   const lineSeries = (0, _hooks.useLineSeriesContext)();

package/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/LineChart/LineChart.js

@@ -27,7 +27,7 @@ var _useChartContainerProps = require("../ChartContainer/useChartContainerProps"
 var _ChartDataProvider = require("../ChartDataProvider");
 var _ChartsSurface = require("../ChartsSurface");
 var _ChartsWrapper = require("../ChartsWrapper");
-var _FocusedMark = require("./FocusedMark");
+var _FocusedLineMark = require("./FocusedLineMark");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -71,7 +71,7 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
       children: [props.showToolbar && Toolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPlot.AreaPlot, (0, _extends2.default)({}, areaPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePlot.LinePlot, (0, _extends2.default)({}, linePlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
-        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusedMark.FocusedMark, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusedLineMark.FocusedLineMark, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkPlot.MarkPlot, (0, _extends2.default)({}, markPlotProps))
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineHighlightPlot.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
@@ -298,6 +298,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     offset: _propTypes.default.number,
+    ordinalTimeTicks: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), _propTypes.default.shape({
+      format: _propTypes.default.func.isRequired,
+      getTickNumber: _propTypes.default.func.isRequired,
+      isTick: _propTypes.default.func.isRequired
+    })]).isRequired),
     position: _propTypes.default.oneOf(['bottom', 'none', 'top']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band']),
@@ -314,6 +319,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
@@ -350,6 +356,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     offset: _propTypes.default.number,
+    ordinalTimeTicks: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), _propTypes.default.shape({
+      format: _propTypes.default.func.isRequired,
+      getTickNumber: _propTypes.default.func.isRequired,
+      isTick: _propTypes.default.func.isRequired
+    })]).isRequired),
     position: _propTypes.default.oneOf(['bottom', 'none', 'top']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['point']),
@@ -366,6 +377,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
@@ -410,6 +422,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
@@ -455,6 +468,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
@@ -499,6 +513,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
@@ -543,6 +558,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
@@ -591,6 +607,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
@@ -639,6 +656,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
@@ -683,6 +701,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   })]).isRequired),
   /**
@@ -726,6 +745,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     offset: _propTypes.default.number,
+    ordinalTimeTicks: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), _propTypes.default.shape({
+      format: _propTypes.default.func.isRequired,
+      getTickNumber: _propTypes.default.func.isRequired,
+      isTick: _propTypes.default.func.isRequired
+    })]).isRequired),
     position: _propTypes.default.oneOf(['left', 'none', 'right']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['band']),
@@ -741,6 +765,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number
   }), _propTypes.default.shape({
@@ -777,6 +802,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
     offset: _propTypes.default.number,
+    ordinalTimeTicks: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), _propTypes.default.shape({
+      format: _propTypes.default.func.isRequired,
+      getTickNumber: _propTypes.default.func.isRequired,
+      isTick: _propTypes.default.func.isRequired
+    })]).isRequired),
     position: _propTypes.default.oneOf(['left', 'none', 'right']),
     reverse: _propTypes.default.bool,
     scaleType: _propTypes.default.oneOf(['point']),
@@ -792,6 +822,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number
   }), _propTypes.default.shape({
@@ -835,6 +866,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number
   }), _propTypes.default.shape({
@@ -879,6 +911,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number
   }), _propTypes.default.shape({
@@ -922,6 +955,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number
   }), _propTypes.default.shape({
@@ -965,6 +999,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number
   }), _propTypes.default.shape({
@@ -1012,6 +1047,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number
   }), _propTypes.default.shape({
@@ -1059,6 +1095,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number
   }), _propTypes.default.shape({
@@ -1102,6 +1139,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
+    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
     width: _propTypes.default.number
   })]).isRequired)

package/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/LineChart/LineChart.plugins.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.LINE_CHART_PLUGINS = void 0;
 var _useChartZAxis = require("../internals/plugins/featurePlugins/useChartZAxis");
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
+var _useChartTooltip = require("../internals/plugins/featurePlugins/useChartTooltip");
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
 var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
 var _useChartBrush = require("../internals/plugins/featurePlugins/useChartBrush");
-const LINE_CHART_PLUGINS = exports.LINE_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartBrush.useChartBrush, _useChartInteraction.useChartInteraction, _useChartCartesianAxis.useChartCartesianAxis, _useChartHighlight.useChartHighlight, _useChartKeyboardNavigation.useChartKeyboardNavigation];
+const LINE_CHART_PLUGINS = exports.LINE_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartBrush.useChartBrush, _useChartTooltip.useChartTooltip, _useChartInteraction.useChartInteraction, _useChartCartesianAxis.useChartCartesianAxis, _useChartHighlight.useChartHighlight, _useChartKeyboardNavigation.useChartKeyboardNavigation];

package/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/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/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/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/LineChart/LinePlot.js

@@ -17,6 +17,7 @@ var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _hooks = require("../hooks");
 var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
 var _useLinePlotData = require("./useLinePlotData");
+var _animation = require("../internals/animation/animation");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 const LinePlotRoot = (0, _styles.styled)('g', {
@@ -24,7 +25,9 @@ const LinePlotRoot = (0, _styles.styled)('g', {
   slot: 'Root'
 })({
   [`& .${_LineElement.lineElementClasses.root}`]: {
-    transition: 'opacity 0.2s ease-in, fill 0.2s ease-in'
+    transitionProperty: 'opacity, fill',
+    transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
+    transitionTimingFunction: _animation.ANIMATION_TIMING_FUNCTION
   }
 });
 const useAggregatedData = () => {

package/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/LineChart/MarkElement.js

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

package/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;
 }