@mui/x-charts 6.0.0-alpha.8 → 6.18.0

package/LineChart/AreaPlot.js

@@ -17,8 +17,19 @@ var _useScale = require("../hooks/useScale");
 var _getCurve = _interopRequireDefault(require("../internals/getCurve"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * 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/)
+ */
 function AreaPlot(props) {
   const {
       slots,
@@ -50,20 +61,28 @@ function AreaPlot(props) {
         const {
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
-          stackedData
+          stackedData,
+          data,
+          connectNulls
         } = series[seriesId];
         const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisKey].scale);
         const yScale = yAxis[yAxisKey].scale;
         const xData = xAxis[xAxisKey].data;
-        if (xData === undefined) {
-          throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot.`);
+        if (process.env.NODE_ENV !== 'production') {
+          if (xData === undefined) {
+            throw new Error(`Axis of id "${xAxisKey}" should have data property to be able to display a line plot.`);
+          }
+          if (xData.length < stackedData.length) {
+            throw new Error(`MUI: data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items)`);
+          }
         }
-        const areaPath = (0, _d3Shape.area)().x(d => xScale(d.x)).y0(d => yScale(d.y[0])).y1(d => yScale(d.y[1]));
+        const areaPath = (0, _d3Shape.area)().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y0(d => d.y && yScale(d.y[0])).y1(d => d.y && yScale(d.y[1]));
         const curve = (0, _getCurve.default)(series[seriesId].curve);
-        const d3Data = xData?.map((x, index) => ({
+        const formattedData = xData?.map((x, index) => ({
           x,
           y: stackedData[index]
-        }));
+        })) ?? [];
+        const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
         return !!series[seriesId].area && /*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaElement.AreaElement, {
           id: seriesId,
           d: areaPath.curve(curve)(d3Data) || undefined,

package/LineChart/LineChart.d.ts

@@ -6,19 +6,27 @@ import { MarkPlotSlotComponentProps, MarkPlotSlotsComponent } from './MarkPlot';
 import { ChartsAxisProps } from '../ChartsAxis/ChartsAxis';
 import { LineSeriesType } from '../models/seriesType/line';
 import { MakeOptional } from '../models/helpers';
-import { ChartsTooltipProps } from '../ChartsTooltip';
+import { ChartsTooltipProps, ChartsTooltipSlotComponentProps, ChartsTooltipSlotsComponent } from '../ChartsTooltip';
 import { ChartsLegendProps, ChartsLegendSlotComponentProps, ChartsLegendSlotsComponent } from '../ChartsLegend';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsAxisSlotComponentProps, ChartsAxisSlotsComponent } from '../models/axis';
-export interface LineChartSlotsComponent extends ChartsAxisSlotsComponent, AreaPlotSlotsComponent, LinePlotSlotsComponent, MarkPlotSlotsComponent, ChartsLegendSlotsComponent {
+import { LineHighlightPlotSlotsComponent, LineHighlightPlotSlotComponentProps } from './LineHighlightPlot';
+export interface LineChartSlotsComponent extends ChartsAxisSlotsComponent, AreaPlotSlotsComponent, LinePlotSlotsComponent, MarkPlotSlotsComponent, LineHighlightPlotSlotsComponent, ChartsLegendSlotsComponent, ChartsTooltipSlotsComponent {
 }
-export interface LineChartSlotComponentProps extends ChartsAxisSlotComponentProps, AreaPlotSlotComponentProps, LinePlotSlotComponentProps, MarkPlotSlotComponentProps, ChartsLegendSlotComponentProps {
+export interface LineChartSlotComponentProps extends ChartsAxisSlotComponentProps, AreaPlotSlotComponentProps, LinePlotSlotComponentProps, MarkPlotSlotComponentProps, LineHighlightPlotSlotComponentProps, ChartsLegendSlotComponentProps, ChartsTooltipSlotComponentProps {
 }
 export interface LineChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'> {
     series: MakeOptional<LineSeriesType, 'type'>[];
     tooltip?: ChartsTooltipProps;
     axisHighlight?: ChartsAxisHighlightProps;
+    /**
+     * @deprecated Consider using `slotProps.legend` instead.
+     */
     legend?: ChartsLegendProps;
+    /**
+     * If `true`, render the line highlight item.
+     */
+    disableLineItemHighlight?: boolean;
     /**
      * Overridable component slots.
      * @default {}
@@ -30,5 +38,15 @@ export interface LineChartProps extends Omit<ResponsiveChartContainerProps, 'ser
      */
     slotProps?: LineChartSlotComponentProps;
 }
+/**
+ * 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<unknown>>;
 export { LineChart };

package/LineChart/LineChart.js

@@ -19,10 +19,21 @@ var _ChartsTooltip = require("../ChartsTooltip");
 var _ChartsLegend = require("../ChartsLegend");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
 var _ChartsClipPath = require("../ChartsClipPath");
+var _LineHighlightPlot = require("./LineHighlightPlot");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * 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/)
+ */
+const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
   const {
     xAxis,
     yAxis,
@@ -37,6 +48,7 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     axisHighlight = {
       x: 'line'
     },
+    disableLineItemHighlight,
     legend,
     topAxis,
     leftAxis,
@@ -51,6 +63,7 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, {
     ref: ref,
     series: series.map(s => (0, _extends2.default)({
+      disableHighlight: !!disableLineItemHighlight,
       type: 'line'
     }, s)),
     width: width,
@@ -84,18 +97,23 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
       bottomAxis: bottomAxis,
       slots: slots,
       slotProps: slotProps
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkPlot.MarkPlot, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlight)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkPlot.MarkPlot, {
+      slots: slots,
+      slotProps: slotProps
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineHighlightPlot.LineHighlightPlot, {
       slots: slots,
       slotProps: slotProps
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legend, {
       slots: slots,
       slotProps: slotProps
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlight)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, {
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip, {
+      slots: slots,
+      slotProps: slotProps
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, {
       id: clipPathId
     }), children]
   });
 });
-exports.LineChart = LineChart;
 process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -118,11 +136,15 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     fill: _propTypes.default.string,
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
+    labelStyle: _propTypes.default.object,
     position: _propTypes.default.oneOf(['bottom', 'top']),
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
+    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
@@ -137,6 +159,10 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   dataset: _propTypes.default.arrayOf(_propTypes.default.object),
   desc: _propTypes.default.string,
   disableAxisListener: _propTypes.default.bool,
+  /**
+   * If `true`, render the line highlight item.
+   */
+  disableLineItemHighlight: _propTypes.default.bool,
   height: _propTypes.default.number,
   /**
    * Indicate which axis to display the left of the charts.
@@ -151,33 +177,33 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     fill: _propTypes.default.string,
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
+    labelStyle: _propTypes.default.object,
     position: _propTypes.default.oneOf(['left', 'right']),
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
+    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
+  /**
+   * @deprecated Consider using `slotProps.legend` instead.
+   */
   legend: _propTypes.default.shape({
     classes: _propTypes.default.object,
     direction: _propTypes.default.oneOf(['column', 'row']),
     hidden: _propTypes.default.bool,
-    itemWidth: _propTypes.default.number,
-    markSize: _propTypes.default.number,
-    offset: _propTypes.default.shape({
-      x: _propTypes.default.number,
-      y: _propTypes.default.number
-    }),
     position: _propTypes.default.shape({
       horizontal: _propTypes.default.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: _propTypes.default.oneOf(['bottom', 'middle', 'top']).isRequired
     }),
     slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    spacing: _propTypes.default.number
+    slots: _propTypes.default.object
   }),
   margin: _propTypes.default.shape({
     bottom: _propTypes.default.number,
@@ -198,11 +224,15 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     fill: _propTypes.default.string,
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
+    labelStyle: _propTypes.default.object,
     position: _propTypes.default.oneOf(['left', 'right']),
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
+    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
@@ -211,15 +241,18 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   series: _propTypes.default.arrayOf(_propTypes.default.shape({
     area: _propTypes.default.bool,
     color: _propTypes.default.string,
+    connectNulls: _propTypes.default.bool,
     curve: _propTypes.default.oneOf(['catmullRom', 'linear', 'monotoneX', 'monotoneY', 'natural', 'step', 'stepAfter', 'stepBefore']),
     data: _propTypes.default.arrayOf(_propTypes.default.number),
     dataKey: _propTypes.default.string,
+    disableHighlight: _propTypes.default.bool,
     highlightScope: _propTypes.default.shape({
       faded: _propTypes.default.oneOf(['global', 'none', 'series']),
       highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
     }),
     id: _propTypes.default.string,
     label: _propTypes.default.string,
+    showMark: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.bool]),
     stack: _propTypes.default.string,
     stackOffset: _propTypes.default.oneOf(['diverging', 'expand', 'none', 'silhouette', 'wiggle']),
     stackOrder: _propTypes.default.oneOf(['appearance', 'ascending', 'descending', 'insideOut', 'none', 'reverse']),
@@ -244,6 +277,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     axisContent: _propTypes.default.elementType,
     classes: _propTypes.default.object,
     itemContent: _propTypes.default.elementType,
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     trigger: _propTypes.default.oneOf(['axis', 'item', 'none'])
   }),
   /**
@@ -259,11 +294,15 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     fill: _propTypes.default.string,
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
+    labelStyle: _propTypes.default.object,
     position: _propTypes.default.oneOf(['bottom', 'top']),
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
+    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
@@ -288,6 +327,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     id: _propTypes.default.string,
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
+    labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
@@ -296,6 +336,9 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
+    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
@@ -314,6 +357,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     id: _propTypes.default.string,
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
+    labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
@@ -322,6 +366,9 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
+    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,

package/LineChart/LineElement.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/base';
+import { SlotComponentProps } from '@mui/base/utils';
 import { HighlightScope } from '../context/HighlightProvider';
 export interface LineElementClasses {
     /** Styles applied to the root element. */
@@ -10,7 +10,7 @@ export interface LineElementClasses {
     faded: string;
 }
 export type LineElementClassKey = keyof LineElementClasses;
-export interface LineElementOwnerState {
+interface LineElementOwnerState {
     id: string;
     color: string;
     isFaded: boolean;
@@ -43,6 +43,16 @@ export type LineElementProps = Omit<LineElementOwnerState, 'isFaded' | 'isHighli
         line?: React.ElementType;
     };
 };
+/**
+ * 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/)
+ */
 declare function LineElement(props: LineElementProps): React.JSX.Element;
 declare namespace LineElement {
     var propTypes: any;

package/LineChart/LineElement.js

@@ -22,13 +22,12 @@ var _InteractionProvider = require("../context/InteractionProvider");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["id", "classes", "color", "highlightScope", "slots", "slotProps"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function getLineElementUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiLineElement', slot);
 }
-const lineElementClasses = (0, _generateUtilityClasses.default)('MuiLineElement', ['root', 'highlighted', 'faded']);
-exports.lineElementClasses = lineElementClasses;
+const lineElementClasses = exports.lineElementClasses = (0, _generateUtilityClasses.default)('MuiLineElement', ['root', 'highlighted', 'faded']);
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -41,7 +40,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, getLineElementUtilityClass, classes);
 };
-const LineElementPath = (0, _styles.styled)('path', {
+const LineElementPath = exports.LineElementPath = (0, _styles.styled)('path', {
   name: 'MuiLineElement',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -55,7 +54,6 @@ const LineElementPath = (0, _styles.styled)('path', {
   transition: 'opacity 0.2s ease-in, stroke 0.2s ease-in',
   opacity: ownerState.isFaded ? 0.3 : 1
 }));
-exports.LineElementPath = LineElementPath;
 LineElementPath.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -71,6 +69,16 @@ LineElementPath.propTypes = {
   }).isRequired,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 };
+/**
+ * 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,

package/LineChart/LineHighlightElement.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+export interface LineHighlightElementClasses {
+    /** Styles applied to the root element. */
+    root: string;
+}
+export type HighlightElementClassKey = keyof LineHighlightElementClasses;
+interface LineHighlightElementOwnerState {
+    id: string;
+    color: string;
+    x: number;
+    y: number;
+    classes?: Partial<LineHighlightElementClasses>;
+}
+export declare function getHighlightElementUtilityClass(slot: string): string;
+export declare const lineHighlightElementClasses: LineHighlightElementClasses;
+export type LineHighlightElementProps = LineHighlightElementOwnerState & React.ComponentPropsWithoutRef<'circle'> & {};
+/**
+ * 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/LineChart/LineHighlightElement.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LineHighlightElement = LineHighlightElement;
+exports.getHighlightElementUtilityClass = getHighlightElementUtilityClass;
+exports.lineHighlightElementClasses = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _styles = require("@mui/material/styles");
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["x", "y", "id", "classes", "color"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function getHighlightElementUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiHighlightElement', slot);
+}
+const lineHighlightElementClasses = exports.lineHighlightElementClasses = (0, _generateUtilityClasses.default)('MuiHighlightElement', ['root']);
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    id
+  } = ownerState;
+  const slots = {
+    root: ['root', `series-${id}`]
+  };
+  return (0, _composeClasses.default)(slots, getHighlightElementUtilityClass, classes);
+};
+const HighlightElement = (0, _styles.styled)('circle', {
+  name: 'MuiHighlightElement',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  ownerState
+}) => ({
+  transform: `translate(${ownerState.x}px, ${ownerState.y}px)`,
+  transformOrigin: `${ownerState.x}px ${ownerState.y}px`,
+  fill: ownerState.color
+}));
+/**
+ * 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,
+      id,
+      classes: innerClasses,
+      color
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const ownerState = {
+    id,
+    classes: innerClasses,
+    color,
+    x,
+    y
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightElement, (0, _extends2.default)({}, other, {
+    ownerState: ownerState,
+    className: classes.root,
+    cx: 0,
+    cy: 0,
+    r: other.r === undefined ? 5 : other.r
+  }));
+}
+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 "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  classes: _propTypes.default.object
+} : void 0;

package/LineChart/LineHighlightPlot.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { LineHighlightElementProps } from './LineHighlightElement';
+export interface LineHighlightPlotSlotsComponent {
+    lineHighlight?: React.JSXElementConstructor<LineHighlightElementProps>;
+}
+export interface LineHighlightPlotSlotComponentProps {
+    lineHighlight?: Partial<LineHighlightElementProps>;
+}
+export interface LineHighlightPlotProps extends React.SVGAttributes<SVGSVGElement> {
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: LineHighlightPlotSlotsComponent;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: LineHighlightPlotSlotComponentProps;
+}
+/**
+ * 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 };