@mui/x-charts 8.0.0-alpha.9 → 8.0.0-beta.1

package/modern/Gauge/GaugeProvider.d.ts

@@ -0,0 +1,117 @@
+import * as React from 'react';
+interface CircularConfig {
+  /**
+   * The start angle (deg).
+   * @default 0
+   */
+  startAngle?: number;
+  /**
+   * The end angle (deg).
+   * @default 360
+   */
+  endAngle?: number;
+  /**
+   * The radius between circle center and the beginning of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '80%'
+   */
+  innerRadius?: number | string;
+  /**
+   * The radius between circle center and the end of the arc.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the maximal radius that fit into the drawing area.
+   * @default '100%'
+   */
+  outerRadius?: number | string;
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   * Set it to '50%' to get rounded arc.
+   * @default 0
+   */
+  cornerRadius?: number | string;
+  /**
+   * The x coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the width the drawing area.
+   */
+  cx?: number | string;
+  /**
+   * The y coordinate of the arc center.
+   * Can be a number (in px) or a string with a percentage such as '50%'.
+   * The '100%' is the height the drawing area.
+   */
+  cy?: number | string;
+}
+interface ProcessedCircularConfig {
+  /**
+   * The start angle (rad).
+   */
+  startAngle: number;
+  /**
+   * The end angle (rad).
+   */
+  endAngle: number;
+  /**
+   * The radius between circle center and the beginning of the arc.
+   */
+  innerRadius: number;
+  /**
+   * The radius between circle center and the end of the arc.
+   */
+  outerRadius: number;
+  /**
+   * The radius applied to arc corners (similar to border radius).
+   */
+  cornerRadius: number;
+  /**
+   * The x coordinate of the pie center.
+   */
+  cx: number;
+  /**
+   * The y coordinate of the pie center.
+   */
+  cy: number;
+}
+interface GaugeConfig {
+  /**
+   * The value of the gauge.
+   * Set to `null` to not display a value.
+   */
+  value?: number | null;
+  /**
+   * The minimal value of the gauge.
+   * @default 0
+   */
+  valueMin?: number;
+  /**
+   * The maximal value of the gauge.
+   * @default 100
+   */
+  valueMax?: number;
+}
+export declare const GaugeContext: React.Context<Required<GaugeConfig> & ProcessedCircularConfig & {
+  /**
+   * The maximal radius from (cx, cy) that fits the arc in the drawing area.
+   */
+  maxRadius: number;
+  /**
+   * The angle (rad) associated to the current value.
+   */
+  valueAngle: null | number;
+}>;
+export interface GaugeProviderProps extends GaugeConfig, CircularConfig {
+  children: React.ReactNode;
+}
+export declare function GaugeProvider(props: GaugeProviderProps): React.JSX.Element;
+export declare function useGaugeState(): Required<GaugeConfig> & ProcessedCircularConfig & {
+  /**
+   * The maximal radius from (cx, cy) that fits the arc in the drawing area.
+   */
+  maxRadius: number;
+  /**
+   * The angle (rad) associated to the current value.
+   */
+  valueAngle: null | number;
+};
+export {};

package/modern/Gauge/GaugeProvider.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { getPercentageValue } from "../internals/getPercentageValue.js";
 import { getArcRatios, getAvailableRadius } from "./utils.js";
 import { useDrawingArea } from "../hooks/useDrawingArea.js";
+import { deg2rad } from "../internals/angleConversion.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GaugeContext = /*#__PURE__*/React.createContext({
   value: null,
@@ -63,8 +64,8 @@ export function GaugeProvider(props) {
   const innerRadius = getPercentageValue(innerRadiusParam ?? '80%', maxRadius);
   const cornerRadius = getPercentageValue(cornerRadiusParam ?? 0, outerRadius - innerRadius);
   const contextValue = React.useMemo(() => {
-    const startAngleRad = Math.PI * startAngle / 180;
-    const endAngleRad = Math.PI * endAngle / 180;
+    const startAngleRad = deg2rad(startAngle);
+    const endAngleRad = deg2rad(endAngle);
     return {
       value,
       valueMin,

package/modern/Gauge/GaugeReferenceArc.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function GaugeReferenceArc(props: React.ComponentProps<'path'>): React.JSX.Element;

package/modern/Gauge/GaugeValueArc.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function GaugeValueArc(props: React.ComponentProps<'path'>): React.JSX.Element | null;

package/modern/Gauge/GaugeValueText.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { ChartsTextProps } from "../ChartsText/index.js";
+export interface GaugeFormatterParams {
+  value: number | null;
+  valueMin: number;
+  valueMax: number;
+}
+export interface GaugeValueTextProps extends Omit<ChartsTextProps, 'text'> {
+  text?: string | ((params: GaugeFormatterParams) => string | null);
+}
+declare function GaugeValueText(props: GaugeValueTextProps): React.JSX.Element | null;
+declare namespace GaugeValueText {
+  var propTypes: any;
+}
+export { GaugeValueText };

package/modern/Gauge/gaugeClasses.d.ts

@@ -0,0 +1,14 @@
+export interface GaugeClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the arc displaying the value. */
+  valueArc: string;
+  /** Styles applied to the arc displaying the range of available values. */
+  referenceArc: string;
+  /** Styles applied to the value text. */
+  valueText: string;
+}
+export type GaugeClassKey = keyof GaugeClasses;
+export declare function getGaugeUtilityClass(slot: string): string;
+export declare const gaugeClasses: GaugeClasses;
+export default gaugeClasses;

package/modern/Gauge/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./Gauge.js";
+export * from "./GaugeContainer.js";
+export * from "./GaugeValueText.js";
+export * from "./GaugeValueArc.js";
+export * from "./GaugeReferenceArc.js";
+export * from "./gaugeClasses.js";
+export { useGaugeState } from "./GaugeProvider.js";

package/modern/Gauge/utils.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Returns the ratio of the arc bounding box and its center.
+ * @param startAngle The start angle (in deg)
+ * @param endAngle The end angle (in deg)
+ */
+export declare function getArcRatios(startAngle: number, endAngle: number): {
+  cx: number;
+  cy: number;
+  minX: number;
+  maxX: number;
+  minY: number;
+  maxY: number;
+};
+export declare function getAvailableRadius(cx: number, cy: number, width: number, height: number, {
+  minX,
+  maxX,
+  minY,
+  maxY
+}: {
+  minX: number;
+  maxX: number;
+  minY: number;
+  maxY: number;
+}): number;

package/modern/Gauge/utils.js

@@ -1,6 +1,4 @@
-function deg2rad(angle) {
-  return Math.PI * angle / 180;
-}
+import { deg2rad } from "../internals/angleConversion.js";
 function getPoint(angle) {
   const radAngle = deg2rad(angle);
   return [Math.sin(radAngle), -Math.cos(radAngle)];

package/modern/LineChart/AnimatedArea.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { AreaElementOwnerState } from './AreaElement';
+export interface AnimatedAreaProps extends React.ComponentPropsWithoutRef<'path'> {
+  ownerState: AreaElementOwnerState;
+  d: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+}
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+ *
+ * API:
+ *
+ * - [AreaElement API](https://mui.com/x/api/charts/animated-area/)
+ */
+declare function AnimatedArea(props: AnimatedAreaProps): React.JSX.Element;
+declare namespace AnimatedArea {
+  var propTypes: any;
+}
+export { AnimatedArea };

package/modern/LineChart/AnimatedLine.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { LineElementOwnerState } from './LineElement';
+export interface AnimatedLineProps extends React.ComponentPropsWithoutRef<'path'> {
+  ownerState: LineElementOwnerState;
+  d: string;
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+}
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [AnimatedLine API](https://mui.com/x/api/charts/animated-line/)
+ */
+declare function AnimatedLine(props: AnimatedLineProps): React.JSX.Element;
+declare namespace AnimatedLine {
+  var propTypes: any;
+}
+export { AnimatedLine };

package/modern/LineChart/AppearingMask.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { SeriesId } from "../models/seriesType/common.js";
+interface AppearingMaskProps {
+  id: SeriesId;
+  skipAnimation?: boolean;
+  children: React.ReactNode;
+}
+/**
+ * @ignore - internal component.
+ */
+export declare function AppearingMask(props: AppearingMaskProps): React.JSX.Element;
+export {};

package/modern/LineChart/AreaElement.d.ts

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { AnimatedAreaProps } from "./AnimatedArea.js";
+import { SeriesId } from "../models/seriesType/common.js";
+export interface AreaElementClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element when highlighted. */
+  highlighted: string;
+  /** Styles applied to the root element when faded. */
+  faded: string;
+}
+export type AreaElementClassKey = keyof AreaElementClasses;
+export interface AreaElementOwnerState {
+  id: SeriesId;
+  color: string;
+  gradientId?: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<AreaElementClasses>;
+}
+export declare function getAreaElementUtilityClass(slot: string): string;
+export declare const areaElementClasses: AreaElementClasses;
+export interface AreaElementSlots {
+  /**
+   * The component that renders the area.
+   * @default AnimatedArea
+   */
+  area?: React.JSXElementConstructor<AnimatedAreaProps>;
+}
+export interface AreaElementSlotProps {
+  area?: SlotComponentPropsFromProps<AnimatedAreaProps, {}, AreaElementOwnerState>;
+}
+export interface AreaElementProps extends Omit<AreaElementOwnerState, 'isFaded' | 'isHighlighted'>, Pick<AnimatedAreaProps, 'skipAnimation'>, Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
+  d: string;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: AreaElementSlotProps;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: AreaElementSlots;
+}
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+ *
+ * API:
+ *
+ * - [AreaElement API](https://mui.com/x/api/charts/area-element/)
+ */
+declare function AreaElement(props: AreaElementProps): React.JSX.Element;
+declare namespace AreaElement {
+  var propTypes: any;
+}
+export { AreaElement };

package/modern/LineChart/AreaElement.js

@@ -10,8 +10,8 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
+import { useItemHighlighted } from "../hooks/useItemHighlighted.js";
 import { AnimatedArea } from "./AnimatedArea.js";
-import { useItemHighlighted } from "../context/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getAreaElementUtilityClass(slot) {
   return generateUtilityClass('MuiAreaElement', slot);
@@ -50,7 +50,10 @@ function AreaElement(props) {
       onClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const getInteractionItemProps = useInteractionItemProps();
+  const interactionProps = useInteractionItemProps({
+    type: 'line',
+    seriesId: id
+  });
   const {
     isFaded,
     isHighlighted
@@ -70,10 +73,7 @@ function AreaElement(props) {
   const areaProps = useSlotProps({
     elementType: Area,
     externalSlotProps: slotProps?.area,
-    additionalProps: _extends({}, getInteractionItemProps({
-      type: 'line',
-      seriesId: id
-    }), {
+    additionalProps: _extends({}, interactionProps, {
       onClick,
       cursor: onClick ? 'pointer' : 'unset'
     }),

package/modern/LineChart/AreaPlot.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { AreaElementProps, AreaElementSlotProps, AreaElementSlots } from "./AreaElement.js";
+import { 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'> {
+  /**
+   * Callback fired when a line area item is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {LineItemIdentifier} lineItemIdentifier The line item identifier.
+   */
+  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void;
+}
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+ * - [Stacking](https://mui.com/x/react-charts/stacking/)
+ *
+ * API:
+ *
+ * - [AreaPlot API](https://mui.com/x/api/charts/area-plot/)
+ */
+declare function AreaPlot(props: AreaPlotProps): React.JSX.Element;
+declare namespace AreaPlot {
+  var propTypes: any;
+}
+export { AreaPlot };

package/modern/LineChart/AreaPlot.js

@@ -9,13 +9,14 @@ import { styled } from '@mui/material/styles';
 import { area as d3Area } from '@mui/x-charts-vendor/d3-shape';
 import { AreaElement, areaElementClasses } from "./AreaElement.js";
 import { getValueToPositionMapper } from "../hooks/useScale.js";
-import getCurveFactory from "../internals/getCurve.js";
+import { getCurveFactory } from "../internals/getCurve.js";
 import { isBandScale } from "../internals/isBandScale.js";
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
-import { useLineSeries } from "../hooks/useSeries.js";
+import { useLineSeriesContext } from "../hooks/useLineSeries.js";
 import { useSkipAnimation } from "../context/AnimationProvider/index.js";
 import { useChartGradientIdBuilder } from "../hooks/useChartGradientId.js";
 import { useXAxes, useYAxes } from "../hooks/useAxis.js";
+import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const AreaPlotRoot = styled('g', {
   name: 'MuiAreaPlot',
@@ -27,7 +28,7 @@ const AreaPlotRoot = styled('g', {
   }
 });
 const useAggregatedData = () => {
-  const seriesData = useLineSeries();
+  const seriesData = useLineSeriesContext();
   const {
     xAxis,
     xAxisIds
@@ -159,7 +160,8 @@ function AreaPlot(props) {
       skipAnimation: inSkipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const skipAnimation = useSkipAnimation(inSkipAnimation);
+  const isZoomInteracting = useInternalIsZoomInteracting();
+  const skipAnimation = useSkipAnimation(isZoomInteracting || inSkipAnimation);
   const completedData = useAggregatedData();
   return /*#__PURE__*/_jsx(AreaPlotRoot, _extends({}, other, {
     children: completedData.map(({

package/modern/LineChart/CircleMarkElement.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { MarkElementOwnerState } from "./markElementClasses.js";
+export type CircleMarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & {
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+  /**
+   * The index to the element in the series' data array.
+   */
+  dataIndex: number;
+};
+/**
+ * The line mark element that only render circle for performance improvement.
+ *
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [CircleMarkElement API](https://mui.com/x/api/charts/circle-mark-element/)
+ */
+declare function CircleMarkElement(props: CircleMarkElementProps): React.JSX.Element;
+declare namespace CircleMarkElement {
+  var propTypes: any;
+}
+export { CircleMarkElement };

package/modern/LineChart/CircleMarkElement.js

@@ -6,9 +6,9 @@ const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTheme } from '@mui/material/styles';
-import { animated, useSpring } from '@react-spring/web';
+import { animated, useSpringValue } from '@react-spring/web';
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
-import { useItemHighlighted } from "../context/index.js";
+import { useItemHighlighted } from "../hooks/useItemHighlighted.js";
 import { useUtilityClasses } from "./markElementClasses.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { selectorChartsInteractionXAxis } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
@@ -39,7 +39,11 @@ function CircleMarkElement(props) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const theme = useTheme();
-  const getInteractionItemProps = useInteractionItemProps();
+  const interactionProps = useInteractionItemProps({
+    type: 'line',
+    seriesId: id,
+    dataIndex
+  });
   const {
     isFaded,
     isHighlighted
@@ -48,13 +52,20 @@ function CircleMarkElement(props) {
   });
   const store = useStore();
   const xAxisIdentifier = useSelector(store, selectorChartsInteractionXAxis);
-  const position = useSpring({
-    to: {
-      x,
-      y
-    },
+  const cx = useSpringValue(x, {
     immediate: skipAnimation
   });
+  const cy = useSpringValue(y, {
+    immediate: skipAnimation
+  });
+  React.useEffect(() => {
+    cy.start(y, {
+      immediate: skipAnimation
+    });
+    cx.start(x, {
+      immediate: skipAnimation
+    });
+  }, [cy, y, cx, x, skipAnimation]);
   const ownerState = {
     id,
     classes: innerClasses,
@@ -65,8 +76,8 @@ function CircleMarkElement(props) {
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(animated.circle, _extends({}, other, {
     // @ts-expect-error
-    cx: position.x,
-    cy: position.y,
+    cx: cx,
+    cy: cy,
     r: 5,
     fill: (theme.vars || theme).palette.background.paper,
     stroke: color,
@@ -74,11 +85,7 @@ function CircleMarkElement(props) {
     className: classes.root,
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset'
-  }, getInteractionItemProps({
-    type: 'line',
-    seriesId: id,
-    dataIndex
-  })));
+  }, interactionProps));
 }
 process.env.NODE_ENV !== "production" ? CircleMarkElement.propTypes = {
   // ----------------------------- Warning --------------------------------

package/modern/LineChart/LineChart.d.ts

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { MakeOptional } from '@mui/x-internals/types';
+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 { LineChartPluginsSignatures } from "./LineChart.plugins.js";
+export interface LineChartSlots extends ChartsAxisSlots, AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots {}
+export interface LineChartSlotProps extends ChartsAxisSlotProps, AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps {}
+export interface LineChartProps extends Omit<ChartContainerProps<'line', LineChartPluginsSignatures>, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
+  /**
+   * The series to display in the line chart.
+   * An array of [[LineSeriesType]] objects.
+   */
+  series: Readonly<MakeOptional<LineSeriesType, 'type'>[]>;
+  /**
+   * Option to display a cartesian grid in the background.
+   */
+  grid?: Pick<ChartsGridProps, 'vertical' | 'horizontal'>;
+  /**
+   * The configuration of axes highlight.
+   * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
+   * @default { x: 'line' }
+   */
+  axisHighlight?: ChartsAxisHighlightProps;
+  /**
+   * If `true`, the legend is not rendered.
+   */
+  hideLegend?: boolean;
+  /**
+   * If `true`, render the line highlight item.
+   */
+  disableLineItemHighlight?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: LineChartSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineChartSlotProps;
+  /**
+   * Callback fired when an area element is clicked.
+   */
+  onAreaClick?: AreaPlotProps['onItemClick'];
+  /**
+   * Callback fired when a line element is clicked.
+   */
+  onLineClick?: LinePlotProps['onItemClick'];
+  /**
+   * Callback fired when a mark element is clicked.
+   */
+  onMarkClick?: MarkPlotProps['onItemClick'];
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation?: boolean;
+}
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [LineChart API](https://mui.com/x/api/charts/line-chart/)
+ */
+declare const LineChart: React.ForwardRefExoticComponent<LineChartProps & React.RefAttributes<SVGSVGElement>>;
+export { LineChart };