@mui/x-charts 8.0.0-beta.2 → 8.0.0

package/modern/LineChart/LineElement.js

@@ -1,111 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps", "onClick"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import composeClasses from '@mui/utils/composeClasses';
-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 { AnimatedLine } from "./AnimatedLine.js";
-import { useItemHighlighted } from "../hooks/useItemHighlighted.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export function getLineElementUtilityClass(slot) {
-  return generateUtilityClass('MuiLineElement', slot);
-}
-export const lineElementClasses = generateUtilityClasses('MuiLineElement', ['root', 'highlighted', 'faded']);
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    id,
-    isFaded,
-    isHighlighted
-  } = ownerState;
-  const slots = {
-    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
-  };
-  return composeClasses(slots, getLineElementUtilityClass, classes);
-};
-/**
- * Demos:
- *
- * - [Lines](https://mui.com/x/react-charts/lines/)
- * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
- *
- * API:
- *
- * - [LineElement API](https://mui.com/x/api/charts/line-element/)
- */
-function LineElement(props) {
-  const {
-      id,
-      classes: innerClasses,
-      color,
-      gradientId,
-      slots,
-      slotProps,
-      onClick
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const interactionProps = useInteractionItemProps({
-    type: 'line',
-    seriesId: id
-  });
-  const {
-    isFaded,
-    isHighlighted
-  } = useItemHighlighted({
-    seriesId: id
-  });
-  const ownerState = {
-    id,
-    classes: innerClasses,
-    color,
-    gradientId,
-    isFaded,
-    isHighlighted
-  };
-  const classes = useUtilityClasses(ownerState);
-  const Line = slots?.line ?? AnimatedLine;
-  const lineProps = useSlotProps({
-    elementType: Line,
-    externalSlotProps: slotProps?.line,
-    additionalProps: _extends({}, interactionProps, {
-      onClick,
-      cursor: onClick ? 'pointer' : 'unset'
-    }),
-    className: classes.root,
-    ownerState
-  });
-  return /*#__PURE__*/_jsx(Line, _extends({}, other, lineProps));
-}
-process.env.NODE_ENV !== "production" ? LineElement.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  classes: PropTypes.object,
-  color: PropTypes.string.isRequired,
-  d: PropTypes.string.isRequired,
-  gradientId: PropTypes.string,
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  /**
-   * If `true`, animations are skipped.
-   * @default false
-   */
-  skipAnimation: PropTypes.bool,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps: PropTypes.object,
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots: PropTypes.object
-} : void 0;
-export { LineElement };

package/modern/LineChart/LineHighlightElement.d.ts

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { SeriesId } from "../models/seriesType/common.js";
-export interface LineHighlightElementClasses {
-  /** Styles applied to the root element. */
-  root: string;
-}
-export type HighlightElementClassKey = keyof LineHighlightElementClasses;
-interface LineHighlightElementCommonProps {
-  id: SeriesId;
-  color: string;
-  x: number;
-  y: number;
-  classes?: Partial<LineHighlightElementClasses>;
-}
-export declare function getHighlightElementUtilityClass(slot: string): string;
-export declare const lineHighlightElementClasses: LineHighlightElementClasses;
-export type LineHighlightElementProps = (LineHighlightElementCommonProps & ({
-  shape: 'circle';
-} & Omit<React.SVGProps<SVGCircleElement>, 'ref' | 'id'>)) | (LineHighlightElementCommonProps & {
-  shape: 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
-} & Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'>);
-/**
- * Demos:
- *
- * - [Lines](https://mui.com/x/react-charts/lines/)
- * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
- *
- * API:
- *
- * - [LineHighlightElement API](https://mui.com/x/api/charts/line-highlight-element/)
- */
-declare function LineHighlightElement(props: LineHighlightElementProps): React.JSX.Element;
-declare namespace LineHighlightElement {
-  var propTypes: any;
-}
-export { LineHighlightElement };

package/modern/LineChart/LineHighlightElement.js

@@ -1,79 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["x", "y", "id", "classes", "color", "shape"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import reactMajor from '@mui/x-internals/reactMajor';
-import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from '@mui/x-charts-vendor/d3-shape';
-import composeClasses from '@mui/utils/composeClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import { getSymbol } from "../internals/getSymbol.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export function getHighlightElementUtilityClass(slot) {
-  return generateUtilityClass('MuiHighlightElement', slot);
-}
-export const lineHighlightElementClasses = generateUtilityClasses('MuiHighlightElement', ['root']);
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    id
-  } = ownerState;
-  const slots = {
-    root: ['root', `series-${id}`]
-  };
-  return composeClasses(slots, getHighlightElementUtilityClass, classes);
-};
-/**
- * Demos:
- *
- * - [Lines](https://mui.com/x/react-charts/lines/)
- * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
- *
- * API:
- *
- * - [LineHighlightElement API](https://mui.com/x/api/charts/line-highlight-element/)
- */
-function LineHighlightElement(props) {
-  const {
-      x,
-      y,
-      color,
-      shape
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const classes = useUtilityClasses(props);
-  const Element = shape === 'circle' ? 'circle' : 'path';
-  const additionalProps = shape === 'circle' ? {
-    cx: 0,
-    cy: 0,
-    r: other.r === undefined ? 5 : other.r
-  } : {
-    d: d3Symbol(d3SymbolsFill[getSymbol(shape)])()
-  };
-
-  // React 18 does not recognize `transformOrigin` and React 19 does not recognize `transform-origin`
-  const transformOrigin = reactMajor > 18 ? {
-    transformOrigin: `${x} ${y}`
-  } : {
-    'transform-origin': `${x} ${y}`
-  };
-  return /*#__PURE__*/_jsx(Element, _extends({
-    pointerEvents: "none",
-    className: classes.root,
-    transform: `translate(${x} ${y})`,
-    fill: color
-  }, transformOrigin, additionalProps, other));
-}
-process.env.NODE_ENV !== "production" ? LineHighlightElement.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  classes: PropTypes.object,
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  shape: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired
-} : void 0;
-export { LineHighlightElement };

package/modern/LineChart/LineHighlightPlot.d.ts

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { LineHighlightElementProps } from "./LineHighlightElement.js";
-export interface LineHighlightPlotSlots {
-  lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
-}
-export interface LineHighlightPlotSlotProps {
-  lineHighlight?: SlotComponentPropsFromProps<LineHighlightElementProps, {}, {}>;
-}
-export interface LineHighlightPlotProps extends React.SVGAttributes<SVGSVGElement> {
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots?: LineHighlightPlotSlots;
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps?: LineHighlightPlotSlotProps;
-}
-/**
- * Demos:
- *
- * - [Lines](https://mui.com/x/react-charts/lines/)
- * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
- *
- * API:
- *
- * - [LineHighlightPlot API](https://mui.com/x/api/charts/line-highlight-plot/)
- */
-declare function LineHighlightPlot(props: LineHighlightPlotProps): React.JSX.Element | null;
-declare namespace LineHighlightPlot {
-  var propTypes: any;
-}
-export { LineHighlightPlot };

package/modern/LineChart/LineHighlightPlot.js

@@ -1,122 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { useStore } from "../internals/store/useStore.js";
-import { useSelector } from "../internals/store/useSelector.js";
-import { LineHighlightElement } from "./LineHighlightElement.js";
-import { getValueToPositionMapper } from "../hooks/useScale.js";
-import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
-import { useLineSeriesContext } from "../hooks/useLineSeries.js";
-import getColor from "./seriesConfig/getColor.js";
-import { useChartContext } from "../context/ChartProvider/index.js";
-import { selectorChartsInteractionXAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
-import { useXAxes, useYAxes } from "../hooks/useAxis.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Demos:
- *
- * - [Lines](https://mui.com/x/react-charts/lines/)
- * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
- *
- * API:
- *
- * - [LineHighlightPlot API](https://mui.com/x/api/charts/line-highlight-plot/)
- */
-function LineHighlightPlot(props) {
-  const {
-      slots,
-      slotProps
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const seriesData = useLineSeriesContext();
-  const {
-    xAxis,
-    xAxisIds
-  } = useXAxes();
-  const {
-    yAxis,
-    yAxisIds
-  } = useYAxes();
-  const {
-    instance
-  } = useChartContext();
-  const store = useStore();
-  const xAxisIdentifier = useSelector(store, selectorChartsInteractionXAxis);
-  const highlightedIndex = xAxisIdentifier?.index;
-  if (highlightedIndex === undefined) {
-    return null;
-  }
-  if (seriesData === undefined) {
-    return null;
-  }
-  const {
-    series,
-    stackingGroups
-  } = seriesData;
-  const defaultXAxisId = xAxisIds[0];
-  const defaultYAxisId = yAxisIds[0];
-  const Element = slots?.lineHighlight ?? LineHighlightElement;
-  return /*#__PURE__*/_jsx("g", _extends({}, other, {
-    children: stackingGroups.flatMap(({
-      ids: groupIds
-    }) => {
-      return groupIds.flatMap(seriesId => {
-        const {
-          xAxisId = defaultXAxisId,
-          yAxisId = defaultYAxisId,
-          stackedData,
-          data,
-          disableHighlight,
-          shape = 'circle'
-        } = series[seriesId];
-        if (disableHighlight || data[highlightedIndex] == null) {
-          return null;
-        }
-        const xScale = getValueToPositionMapper(xAxis[xAxisId].scale);
-        const yScale = yAxis[yAxisId].scale;
-        const xData = xAxis[xAxisId].data;
-        if (xData === undefined) {
-          throw new Error(`MUI X: ${xAxisId === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
-        }
-        const x = xScale(xData[highlightedIndex]);
-        const y = yScale(stackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale
-
-        if (!instance.isPointInside({
-          x,
-          y
-        })) {
-          return null;
-        }
-        const colorGetter = getColor(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
-        return /*#__PURE__*/_jsx(Element, _extends({
-          id: seriesId,
-          color: colorGetter(highlightedIndex),
-          x: x,
-          y: y,
-          shape: shape
-        }, slotProps?.lineHighlight), `${seriesId}`);
-      });
-    })
-  }));
-}
-process.env.NODE_ENV !== "production" ? LineHighlightPlot.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps: PropTypes.object,
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots: PropTypes.object
-} : void 0;
-export { LineHighlightPlot };

package/modern/LineChart/LinePlot.d.ts

@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { LineElementProps, LineElementSlotProps, LineElementSlots } from "./LineElement.js";
-import { 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'> {
-  /**
-   * Callback fired when a line 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/)
- * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
- *
- * API:
- *
- * - [LinePlot API](https://mui.com/x/api/charts/line-plot/)
- */
-declare function LinePlot(props: LinePlotProps): React.JSX.Element;
-declare namespace LinePlot {
-  var propTypes: any;
-}
-export { LinePlot };

package/modern/LineChart/LinePlot.js

@@ -1,199 +0,0 @@
-'use client';
-
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import { warnOnce } from '@mui/x-internals/warning';
-import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';
-import { LineElement, lineElementClasses } from "./LineElement.js";
-import { getValueToPositionMapper } from "../hooks/useScale.js";
-import { getCurveFactory } from "../internals/getCurve.js";
-import { isBandScale } from "../internals/isBandScale.js";
-import { DEFAULT_X_AXIS_KEY } from "../constants/index.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/index.js";
-import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const LinePlotRoot = styled('g', {
-  name: 'MuiAreaPlot',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.root
-})({
-  [`& .${lineElementClasses.root}`]: {
-    transition: 'opacity 0.2s ease-in, fill 0.2s ease-in'
-  }
-});
-const useAggregatedData = () => {
-  const seriesData = useLineSeriesContext();
-  const {
-    xAxis,
-    xAxisIds
-  } = useXAxes();
-  const {
-    yAxis,
-    yAxisIds
-  } = useYAxes();
-  const getGradientId = useChartGradientIdBuilder();
-
-  // This memo prevents odd line chart behavior when hydrating.
-  const allData = React.useMemo(() => {
-    if (seriesData === undefined) {
-      return [];
-    }
-    const {
-      series,
-      stackingGroups
-    } = seriesData;
-    const defaultXAxisId = xAxisIds[0];
-    const defaultYAxisId = yAxisIds[0];
-    return stackingGroups.flatMap(({
-      ids: groupIds
-    }) => {
-      return groupIds.flatMap(seriesId => {
-        const {
-          xAxisId = defaultXAxisId,
-          yAxisId = defaultYAxisId,
-          stackedData,
-          data,
-          connectNulls,
-          curve,
-          strictStepCurve
-        } = series[seriesId];
-        const xScale = xAxis[xAxisId].scale;
-        const xPosition = getValueToPositionMapper(xScale);
-        const yScale = yAxis[yAxisId].scale;
-        const xData = xAxis[xAxisId].data;
-        const gradientId = yAxis[yAxisId].colorScale && getGradientId(yAxisId) || xAxis[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
-        if (process.env.NODE_ENV !== 'production') {
-          if (xData === undefined) {
-            throw new Error(`MUI X: ${xAxisId === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
-          }
-          if (xData.length < stackedData.length) {
-            warnOnce(`MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`, 'error');
-          }
-        }
-        const shouldExpand = curve?.includes('step') && !strictStepCurve && isBandScale(xScale);
-        const formattedData = xData?.flatMap((x, index) => {
-          const nullData = data[index] == null;
-          if (shouldExpand) {
-            const rep = [{
-              x,
-              y: stackedData[index],
-              nullData,
-              isExtension: false
-            }];
-            if (!nullData && (index === 0 || data[index - 1] == null)) {
-              rep.unshift({
-                x: (xScale(x) ?? 0) - (xScale.step() - xScale.bandwidth()) / 2,
-                y: stackedData[index],
-                nullData,
-                isExtension: true
-              });
-            }
-            if (!nullData && (index === data.length - 1 || data[index + 1] == null)) {
-              rep.push({
-                x: (xScale(x) ?? 0) + (xScale.step() + xScale.bandwidth()) / 2,
-                y: stackedData[index],
-                nullData,
-                isExtension: true
-              });
-            }
-            return rep;
-          }
-          return {
-            x,
-            y: stackedData[index],
-            nullData
-          };
-        }) ?? [];
-        const d3Data = connectNulls ? formattedData.filter(d => !d.nullData) : formattedData;
-        const linePath = d3Line().x(d => d.isExtension ? d.x : xPosition(d.x)).defined(d => connectNulls || !d.nullData || !!d.isExtension).y(d => yScale(d.y[1]));
-        const d = linePath.curve(getCurveFactory(curve))(d3Data) || '';
-        return _extends({}, series[seriesId], {
-          gradientId,
-          d,
-          seriesId
-        });
-      });
-    });
-  }, [seriesData, xAxisIds, yAxisIds, xAxis, yAxis, getGradientId]);
-  return allData;
-};
-
-/**
- * Demos:
- *
- * - [Lines](https://mui.com/x/react-charts/lines/)
- * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
- *
- * API:
- *
- * - [LinePlot API](https://mui.com/x/api/charts/line-plot/)
- */
-function LinePlot(props) {
-  const {
-      slots,
-      slotProps,
-      skipAnimation: inSkipAnimation,
-      onItemClick
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const isZoomInteracting = useInternalIsZoomInteracting();
-  const skipAnimation = useSkipAnimation(isZoomInteracting || inSkipAnimation);
-  const completedData = useAggregatedData();
-  return /*#__PURE__*/_jsx(LinePlotRoot, _extends({}, other, {
-    children: completedData.map(({
-      d,
-      seriesId,
-      color,
-      gradientId
-    }) => {
-      return /*#__PURE__*/_jsx(LineElement, {
-        id: seriesId,
-        d: d,
-        color: color,
-        gradientId: gradientId,
-        skipAnimation: skipAnimation,
-        slots: slots,
-        slotProps: slotProps,
-        onClick: onItemClick && (event => onItemClick(event, {
-          type: 'line',
-          seriesId
-        }))
-      }, seriesId);
-    })
-  }));
-}
-process.env.NODE_ENV !== "production" ? LinePlot.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * Callback fired when a line item is clicked.
-   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
-   * @param {LineItemIdentifier} lineItemIdentifier The line item identifier.
-   */
-  onItemClick: PropTypes.func,
-  /**
-   * If `true`, animations are skipped.
-   * @default false
-   */
-  skipAnimation: PropTypes.bool,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps: PropTypes.object,
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots: PropTypes.object
-} : void 0;
-export { LinePlot };

package/modern/LineChart/MarkElement.d.ts

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