@mui/x-charts 6.0.0-alpha.7 → 6.0.0-alpha.9

package/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -33,6 +33,7 @@ function ChartsAxisHighlight(props) {
     axis
   } = React.useContext(_InteractionProvider.InteractionContext);
   const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
+  const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [xAxisHighlight === 'band' && axis.x !== null && (0, _isBandScale.isBandScale)(xScale) && /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
       d: `M ${xScale(axis.x.value) - (xScale.step() - xScale.bandwidth()) / 2} ${yScale.range()[0]} l ${xScale.step()} 0 l 0 ${yScale.range()[1] - yScale.range()[0]} l ${-xScale.step()} 0 Z`,
@@ -41,15 +42,22 @@ function ChartsAxisHighlight(props) {
       style: {
         pointerEvents: 'none'
       }
+    }), yAxisHighlight === 'band' && axis.y !== null && (0, _isBandScale.isBandScale)(yScale) && /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: `M ${xScale.range()[0]} ${yScale(axis.y.value) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${xScale.range()[1] - xScale.range()[0]} 0 l 0 ${-yScale.step()} Z`,
+      fill: "gray",
+      fillOpacity: 0.1,
+      style: {
+        pointerEvents: 'none'
+      }
     }), xAxisHighlight === 'line' && axis.x !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-      d: `M ${getXPosition(axis.x.value)} ${yScale(yScale.domain()[0])} L ${getXPosition(axis.x.value)} ${yScale(yScale.domain().at(-1))}`,
+      d: `M ${getXPosition(axis.x.value)} ${yScale.range()[0]} L ${getXPosition(axis.x.value)} ${yScale.range()[1]}`,
       stroke: "black",
       strokeDasharray: "5 2",
       style: {
         pointerEvents: 'none'
       }
     }), yAxisHighlight === 'line' && axis.y !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-      d: `M ${xScale.range()[0]} ${yScale(axis.y.value)} L ${xScale.range()[1]} ${yScale(axis.y.value)}`,
+      d: `M ${xScale.range()[0]} ${getYPosition(axis.y.value)} L ${xScale.range()[1]} ${getYPosition(axis.y.value)}`,
       stroke: "black",
       strokeDasharray: "5 2",
       style: {
@@ -64,5 +72,5 @@ process.env.NODE_ENV !== "production" ? ChartsAxisHighlight.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   x: _propTypes.default.oneOf(['band', 'line', 'none']),
-  y: _propTypes.default.oneOf(['line', 'none'])
+  y: _propTypes.default.oneOf(['band', 'line', 'none'])
 } : void 0;

package/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -80,29 +80,33 @@ function ChartsAxisTooltipContent(props) {
     sx,
     classes
   } = props;
-  const dataIndex = axisData.x && axisData.x.index;
-  const axisValue = axisData.x && axisData.x.value;
+  const isXaxis = (axisData.x && axisData.x.index) !== undefined;
+  const dataIndex = isXaxis ? axisData.x && axisData.x.index : axisData.y && axisData.y.index;
+  const axisValue = isXaxis ? axisData.x && axisData.x.value : axisData.y && axisData.y.value;
   const {
     xAxisIds,
-    xAxis
+    xAxis,
+    yAxisIds,
+    yAxis
   } = React.useContext(_CartesianContextProvider.CartesianContext);
   const series = React.useContext(_SeriesContextProvider.SeriesContext);
-  const USED_X_AXIS_ID = xAxisIds[0];
+  const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
   const relevantSeries = React.useMemo(() => {
     const rep = [];
     Object.keys(series).filter(seriesType => ['bar', 'line', 'scatter'].includes(seriesType)).forEach(seriesType => {
       series[seriesType].seriesOrder.forEach(seriesId => {
-        const axisKey = series[seriesType].series[seriesId].xAxisKey;
-        if (axisKey === undefined || axisKey === USED_X_AXIS_ID) {
+        const item = series[seriesType].series[seriesId];
+        const axisKey = isXaxis ? item.xAxisKey : item.yAxisKey;
+        if (axisKey === undefined || axisKey === USED_AXIS_ID) {
           rep.push(series[seriesType].series[seriesId]);
         }
       });
     });
     return rep;
-  }, [USED_X_AXIS_ID, series]);
+  }, [USED_AXIS_ID, isXaxis, series]);
   const relevantAxis = React.useMemo(() => {
-    return xAxis[USED_X_AXIS_ID];
-  }, [USED_X_AXIS_ID, xAxis]);
+    return isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
+  }, [USED_AXIS_ID, isXaxis, xAxis, yAxis]);
   const Content = content ?? DefaultChartsAxisContent;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
     axisData: axisData,

package/LineChart/AreaElement.d.ts

@@ -10,7 +10,7 @@ export interface AreaElementClasses {
     faded: string;
 }
 export type AreaElementClassKey = keyof AreaElementClasses;
-export interface AreaElementOwnerState {
+interface AreaElementOwnerState {
     id: string;
     color: string;
     isFaded: boolean;

package/LineChart/LineChart.d.ts

@@ -10,15 +10,20 @@ import { ChartsTooltipProps } 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 {
 }
-export interface LineChartSlotComponentProps extends ChartsAxisSlotComponentProps, AreaPlotSlotComponentProps, LinePlotSlotComponentProps, MarkPlotSlotComponentProps, ChartsLegendSlotComponentProps {
+export interface LineChartSlotComponentProps extends ChartsAxisSlotComponentProps, AreaPlotSlotComponentProps, LinePlotSlotComponentProps, MarkPlotSlotComponentProps, LineHighlightPlotSlotComponentProps, ChartsLegendSlotComponentProps {
 }
 export interface LineChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'> {
     series: MakeOptional<LineSeriesType, 'type'>[];
     tooltip?: ChartsTooltipProps;
     axisHighlight?: ChartsAxisHighlightProps;
     legend?: ChartsLegendProps;
+    /**
+     * If `true`, render the line highlight item.
+     */
+    disableLineItemHighlight?: boolean;
     /**
      * Overridable component slots.
      * @default {}

package/LineChart/LineChart.js

@@ -19,6 +19,7 @@ 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; }
@@ -37,6 +38,7 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     axisHighlight = {
       x: 'line'
     },
+    disableLineItemHighlight,
     legend,
     topAxis,
     leftAxis,
@@ -51,6 +53,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,13 +87,16 @@ 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)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, {
       id: clipPathId
     }), children]
   });
@@ -103,7 +109,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   // ----------------------------------------------------------------------
   axisHighlight: _propTypes.default.shape({
     x: _propTypes.default.oneOf(['band', 'line', 'none']),
-    y: _propTypes.default.oneOf(['line', 'none'])
+    y: _propTypes.default.oneOf(['band', 'line', 'none'])
   }),
   /**
    * Indicate which axis to display the bottom of the charts.
@@ -137,6 +143,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.
@@ -214,12 +224,14 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     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']),

package/LineChart/LineElement.d.ts

@@ -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;

package/LineChart/LineHighlightElement.d.ts

@@ -0,0 +1,21 @@
+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'> & {};
+declare function LineHighlightElement(props: LineHighlightElementProps): React.JSX.Element;
+declare namespace LineHighlightElement {
+    var propTypes: any;
+}
+export { LineHighlightElement };

package/LineChart/LineHighlightElement.js

@@ -0,0 +1,79 @@
+"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(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 getHighlightElementUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiHighlightElement', slot);
+}
+const lineHighlightElementClasses = (0, _generateUtilityClasses.default)('MuiHighlightElement', ['root']);
+exports.lineHighlightElementClasses = lineHighlightElementClasses;
+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
+}));
+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,25 @@
+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;
+}
+declare function LineHighlightPlot(props: LineHighlightPlotProps): React.JSX.Element | null;
+declare namespace LineHighlightPlot {
+    var propTypes: any;
+}
+export { LineHighlightPlot };

package/LineChart/LineHighlightPlot.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LineHighlightPlot = LineHighlightPlot;
+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 _SeriesContextProvider = require("../context/SeriesContextProvider");
+var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _LineHighlightElement = require("./LineHighlightElement");
+var _useScale = require("../hooks/useScale");
+var _InteractionProvider = require("../context/InteractionProvider");
+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 LineHighlightPlot(props) {
+  const {
+      slots,
+      slotProps
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).line;
+  const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
+  const {
+    axis
+  } = React.useContext(_InteractionProvider.InteractionContext);
+  const highlightedIndex = axis.x?.index;
+  if (highlightedIndex === undefined) {
+    return null;
+  }
+  if (seriesData === undefined) {
+    return null;
+  }
+  const {
+    series,
+    stackingGroups
+  } = seriesData;
+  const {
+    xAxis,
+    yAxis,
+    xAxisIds,
+    yAxisIds
+  } = axisData;
+  const defaultXAxisId = xAxisIds[0];
+  const defaultYAxisId = yAxisIds[0];
+  const Element = slots?.lineHighlight ?? _LineHighlightElement.LineHighlightElement;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
+    children: stackingGroups.flatMap(({
+      ids: groupIds
+    }) => {
+      return groupIds.flatMap(seriesId => {
+        const {
+          xAxisKey = defaultXAxisId,
+          yAxisKey = defaultYAxisId,
+          stackedData,
+          disableHighlight
+        } = series[seriesId];
+        if (disableHighlight) {
+          return null;
+        }
+        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.`);
+        }
+        const x = xScale(xData[highlightedIndex]);
+        const y = yScale(stackedData[highlightedIndex][1]);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({
+          id: seriesId,
+          color: series[seriesId].color,
+          x: x,
+          y: y
+        }, 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 "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object
+} : void 0;

package/LineChart/MarkElement.d.ts

@@ -9,7 +9,7 @@ export interface MarkElementClasses {
     faded: string;
 }
 export type MarkElementClassKey = keyof MarkElementClasses;
-export interface MarkElementOwnerState {
+interface MarkElementOwnerState {
     id: string;
     color: string;
     isFaded: boolean;

package/LineChart/MarkElement.js

@@ -52,10 +52,7 @@ const MarkElementPath = (0, _styles.styled)('path', {
   transformOrigin: `${ownerState.x}px ${ownerState.y}px`,
   fill: theme.palette.background.paper,
   stroke: ownerState.color,
-  strokeWidth: 2,
-  '&.MuiMarkElement-highlighted': {
-    fill: ownerState.color
-  }
+  strokeWidth: 2
 }));
 MarkElementPath.propTypes = {
   // ----------------------------- Warning --------------------------------

package/LineChart/MarkPlot.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MarkPlot = MarkPlot;
 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 _SeriesContextProvider = require("../context/SeriesContextProvider");
@@ -13,13 +14,15 @@ var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _MarkElement = require("./MarkElement");
 var _useScale = require("../hooks/useScale");
 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 MarkPlot(props) {
   const {
-    slots,
-    slotProps
-  } = props;
+      slots,
+      slotProps
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).line;
   const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
   const Mark = slots?.mark ?? _MarkElement.MarkElement;
@@ -38,7 +41,7 @@ function MarkPlot(props) {
   } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
     children: stackingGroups.flatMap(({
       ids: groupIds
     }) => {
@@ -46,8 +49,12 @@ function MarkPlot(props) {
         const {
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
-          stackedData
+          stackedData,
+          showMark = true
         } = series[seriesId];
+        if (showMark === false) {
+          return null;
+        }
         const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisKey].scale);
         const yScale = yAxis[yAxisKey].scale;
         const xData = xAxis[xAxisKey].data;
@@ -73,21 +80,33 @@ function MarkPlot(props) {
           return {
             x: xScale(x),
             y: yScale(y),
+            position: x,
+            value: y,
             index
           };
         }).filter(isInRange).map(({
           x,
           y,
-          index
-        }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Mark, (0, _extends2.default)({
-          id: seriesId,
-          dataIndex: index,
-          shape: "circle",
-          color: series[seriesId].color,
-          x: x,
-          y: y,
-          highlightScope: series[seriesId].highlightScope
-        }, slotProps?.mark), `${seriesId}-${index}`));
+          index,
+          position,
+          value
+        }) => {
+          return showMark === true || showMark({
+            x,
+            y,
+            index,
+            position,
+            value
+          }) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Mark, (0, _extends2.default)({
+            id: seriesId,
+            dataIndex: index,
+            shape: "circle",
+            color: series[seriesId].color,
+            x: x,
+            y: y,
+            highlightScope: series[seriesId].highlightScope
+          }, slotProps?.mark), `${seriesId}-${index}`) : null;
+        });
       });
     })
   }));

package/LineChart/index.d.ts

@@ -1,7 +1,9 @@
 export { LinePlot } from './LinePlot';
 export { AreaPlot } from './AreaPlot';
 export { MarkPlot } from './MarkPlot';
+export { LineHighlightPlot } from './LineHighlightPlot';
 export { LineChart } from './LineChart';
 export * from './AreaElement';
 export * from './LineElement';
 export * from './MarkElement';
+export * from './LineHighlightElement';

package/LineChart/index.js

@@ -7,6 +7,7 @@ var _exportNames = {
   LinePlot: true,
   AreaPlot: true,
   MarkPlot: true,
+  LineHighlightPlot: true,
   LineChart: true
 };
 Object.defineProperty(exports, "AreaPlot", {
@@ -21,6 +22,12 @@ Object.defineProperty(exports, "LineChart", {
     return _LineChart.LineChart;
   }
 });
+Object.defineProperty(exports, "LineHighlightPlot", {
+  enumerable: true,
+  get: function () {
+    return _LineHighlightPlot.LineHighlightPlot;
+  }
+});
 Object.defineProperty(exports, "LinePlot", {
   enumerable: true,
   get: function () {
@@ -36,6 +43,7 @@ Object.defineProperty(exports, "MarkPlot", {
 var _LinePlot = require("./LinePlot");
 var _AreaPlot = require("./AreaPlot");
 var _MarkPlot = require("./MarkPlot");
+var _LineHighlightPlot = require("./LineHighlightPlot");
 var _LineChart = require("./LineChart");
 var _AreaElement = require("./AreaElement");
 Object.keys(_AreaElement).forEach(function (key) {
@@ -72,4 +80,16 @@ Object.keys(_MarkElement).forEach(function (key) {
       return _MarkElement[key];
     }
   });
+});
+var _LineHighlightElement = require("./LineHighlightElement");
+Object.keys(_LineHighlightElement).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _LineHighlightElement[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _LineHighlightElement[key];
+    }
+  });
 });

package/PieChart/PieArc.d.ts

@@ -11,7 +11,7 @@ export interface PieArcClasses {
     faded: string;
 }
 export type PieArcClassKey = keyof PieArcClasses;
-export interface PieArcOwnerState {
+interface PieArcOwnerState {
     id: string;
     dataIndex: number;
     color: string;

package/PieChart/PieArcLabel.d.ts

@@ -11,7 +11,7 @@ export interface PieArcLabelClasses {
     faded: string;
 }
 export type PieArcLabelClassKey = keyof PieArcLabelClasses;
-export interface PieArcLabelOwnerState {
+interface PieArcLabelOwnerState {
     id: string;
     dataIndex: number;
     color: string;

package/PieChart/PieChart.js

@@ -96,7 +96,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   // ----------------------------------------------------------------------
   axisHighlight: _propTypes.default.shape({
     x: _propTypes.default.oneOf(['band', 'line', 'none']),
-    y: _propTypes.default.oneOf(['line', 'none'])
+    y: _propTypes.default.oneOf(['band', 'line', 'none'])
   }),
   /**
    * Indicate which axis to display the bottom of the charts.

package/ScatterChart/ScatterChart.js

@@ -79,7 +79,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   // ----------------------------------------------------------------------
   axisHighlight: _propTypes.default.shape({
     x: _propTypes.default.oneOf(['band', 'line', 'none']),
-    y: _propTypes.default.oneOf(['line', 'none'])
+    y: _propTypes.default.oneOf(['band', 'line', 'none'])
   }),
   /**
    * Indicate which axis to display the bottom of the charts.