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

package/SparkLineChart/SparkLineChart.d.ts

@@ -8,10 +8,11 @@ import { LineSeriesType } from '../models/seriesType/line';
 import { AreaPlotSlotsComponent, AreaPlotSlotComponentProps } from '../LineChart/AreaPlot';
 import { LinePlotSlotsComponent, LinePlotSlotComponentProps } from '../LineChart/LinePlot';
 import { MarkPlotSlotsComponent, MarkPlotSlotComponentProps } from '../LineChart/MarkPlot';
+import { LineHighlightPlotSlotsComponent, LineHighlightPlotSlotComponentProps } from '../LineChart/LineHighlightPlot';
 import { BarPlotSlotsComponent, BarPlotSlotComponentProps } from '../BarChart/BarPlot';
-export interface SparkLineChartSlotsComponent extends AreaPlotSlotsComponent, LinePlotSlotsComponent, MarkPlotSlotsComponent, BarPlotSlotsComponent {
+export interface SparkLineChartSlotsComponent extends AreaPlotSlotsComponent, LinePlotSlotsComponent, MarkPlotSlotsComponent, LineHighlightPlotSlotsComponent, BarPlotSlotsComponent {
 }
-export interface SparkLineChartSlotComponentProps extends AreaPlotSlotComponentProps, LinePlotSlotComponentProps, MarkPlotSlotComponentProps, BarPlotSlotComponentProps {
+export interface SparkLineChartSlotComponentProps extends AreaPlotSlotComponentProps, LinePlotSlotComponentProps, MarkPlotSlotComponentProps, LineHighlightPlotSlotComponentProps, BarPlotSlotComponentProps {
 }
 export interface SparkLineChartProps extends Omit<ResponsiveChartContainerProps, 'series' | 'xAxis' | 'yAxis'> {
     /**

package/SparkLineChart/SparkLineChart.js

@@ -8,7 +8,6 @@ exports.SparkLineChart = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styles = require("@mui/material/styles");
 var _BarChart = require("../BarChart");
 var _LineChart = require("../LineChart");
 var _ResponsiveChartContainer = require("../ResponsiveChartContainer");
@@ -18,14 +17,6 @@ var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
 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 SparkLineMarkPlot = (0, _styles.styled)(_LineChart.MarkPlot)({
-  [`& .${_LineChart.markElementClasses.root}`]: {
-    display: 'none',
-    [`&.${_LineChart.markElementClasses.highlighted}`]: {
-      display: 'inherit'
-    }
-  }
-});
 const SPARKLINE_DEFAULT_MARGIN = {
   top: 5,
   bottom: 5,
@@ -67,7 +58,8 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
       valueFormatter
     }, plotType === 'bar' ? {} : {
       area,
-      curve
+      curve,
+      disableHighlight: !showHighlight
     })],
     width: width,
     height: height,
@@ -93,7 +85,10 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LinePlot, {
         slots: slots,
         slotProps: slotProps
-      }), showHighlight && /*#__PURE__*/(0, _jsxRuntime.jsx)(SparkLineMarkPlot, {})]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LineHighlightPlot, {
+        slots: slots,
+        slotProps: slotProps
+      })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlight)), showTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip)), children]
   });
 });
@@ -111,7 +106,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   area: _propTypes.default.bool,
   axisHighlight: _propTypes.default.shape({
     x: _propTypes.default.oneOf(['band', 'line', 'none']),
-    y: _propTypes.default.oneOf(['line', 'none'])
+    y: _propTypes.default.oneOf(['band', 'line', 'none'])
   }),
   children: _propTypes.default.node,
   className: _propTypes.default.string,

package/context/CartesianContextProvider.js

@@ -161,17 +161,17 @@ function CartesianContextProvider({
       const range = [drawingArea.top + drawingArea.height, drawingArea.top];
       if ((0, _axis.isBandScaleConfig)(axis)) {
         const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
-        completedXAxis[axis.id] = (0, _extends2.default)({
+        completedYAxis[axis.id] = (0, _extends2.default)({
           categoryGapRatio,
           barGapRatio: 0
         }, axis, {
-          scale: (0, _d3Scale.scaleBand)(axis.data, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
+          scale: (0, _d3Scale.scaleBand)(axis.data, [range[1], range[0]]).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
           ticksNumber: axis.data.length
         });
       }
       if ((0, _axis.isPointScaleConfig)(axis)) {
-        completedXAxis[axis.id] = (0, _extends2.default)({}, axis, {
-          scale: (0, _d3Scale.scalePoint)(axis.data, range),
+        completedYAxis[axis.id] = (0, _extends2.default)({}, axis, {
+          scale: (0, _d3Scale.scalePoint)(axis.data, [range[1], range[0]]),
           ticksNumber: axis.data.length
         });
       }

package/esm/BarChart/BarChart.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { BarPlot } from './BarPlot';
 import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
 import { ChartsAxis } from '../ChartsAxis';
-import { DEFAULT_X_AXIS_KEY } from '../constants';
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 import { ChartsTooltip } from '../ChartsTooltip';
 import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
@@ -23,6 +23,7 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     colors,
     dataset,
     sx,
+    layout,
     tooltip,
     axisHighlight,
     legend,
@@ -36,25 +37,37 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
   } = props;
   const id = useId();
   const clipPathId = `${id}-clip-path`;
+  const hasHorizontalSeries = layout === 'horizontal' || layout === undefined && series.some(item => item.layout === 'horizontal');
+  const defaultAxisConfig = {
+    scaleType: 'band',
+    data: Array.from({
+      length: Math.max(...series.map(s => {
+        var _ref, _s$data;
+        return ((_ref = (_s$data = s.data) != null ? _s$data : dataset) != null ? _ref : []).length;
+      }))
+    }, (_, index) => index)
+  };
+  const defaultizedAxisHighlight = _extends({}, hasHorizontalSeries ? {
+    y: 'band'
+  } : {
+    x: 'band'
+  }, axisHighlight);
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
     ref: ref,
     series: series.map(s => _extends({
       type: 'bar'
-    }, s)),
+    }, s, {
+      layout: hasHorizontalSeries ? 'horizontal' : 'vertical'
+    })),
     width: width,
     height: height,
     margin: margin,
-    xAxis: xAxis != null ? xAxis : [{
-      id: DEFAULT_X_AXIS_KEY,
-      scaleType: 'band',
-      data: Array.from({
-        length: Math.max(...series.map(s => {
-          var _ref, _s$data;
-          return ((_ref = (_s$data = s.data) != null ? _s$data : dataset) != null ? _ref : []).length;
-        }))
-      }, (_, index) => index)
-    }],
-    yAxis: yAxis,
+    xAxis: xAxis != null ? xAxis : hasHorizontalSeries ? undefined : [_extends({
+      id: DEFAULT_X_AXIS_KEY
+    }, defaultAxisConfig)],
+    yAxis: yAxis != null ? yAxis : hasHorizontalSeries ? [_extends({
+      id: DEFAULT_Y_AXIS_KEY
+    }, defaultAxisConfig)] : undefined,
     colors: colors,
     dataset: dataset,
     sx: sx,
@@ -75,9 +88,7 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
       slots: slots,
       slotProps: slotProps
-    })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({
-      x: "band"
-    }, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
+    })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, defaultizedAxisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
       slots: slots,
       slotProps: slotProps
     })), /*#__PURE__*/_jsx(ChartsClipPath, {
@@ -92,7 +103,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   // ----------------------------------------------------------------------
   axisHighlight: PropTypes.shape({
     x: PropTypes.oneOf(['band', 'line', 'none']),
-    y: PropTypes.oneOf(['line', 'none'])
+    y: PropTypes.oneOf(['band', 'line', 'none'])
   }),
   /**
    * Indicate which axis to display the bottom of the charts.
@@ -127,6 +138,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   desc: PropTypes.string,
   disableAxisListener: PropTypes.bool,
   height: PropTypes.number,
+  layout: PropTypes.oneOf(['horizontal', 'vertical']),
   /**
    * Indicate which axis to display the left of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -207,6 +219,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     }),
     id: PropTypes.string,
     label: PropTypes.string,
+    layout: PropTypes.oneOf(['horizontal', 'vertical']),
     stack: PropTypes.string,
     stackOffset: PropTypes.oneOf(['diverging', 'expand', 'none', 'silhouette', 'wiggle']),
     stackOrder: PropTypes.oneOf(['appearance', 'ascending', 'descending', 'insideOut', 'none', 'reverse']),

package/esm/BarChart/BarPlot.js

@@ -62,42 +62,52 @@ function BarPlot(props) {
         const yAxisKey = (_series$seriesId$yAxi = series[seriesId].yAxisKey) != null ? _series$seriesId$yAxi : defaultYAxisId;
         const xAxisConfig = xAxis[xAxisKey];
         const yAxisConfig = yAxis[yAxisKey];
-        if (!isBandScaleConfig(xAxisConfig)) {
-          throw new Error(`Axis with id "${xAxisKey}" shoud be of type "band" to display the bar series of id "${seriesId}"`);
-        }
-        if (xAxis[xAxisKey].data === undefined) {
-          throw new Error(`Axis with id "${xAxisKey}" shoud have data property`);
+        const verticalLayout = series[seriesId].layout === 'vertical';
+        let baseScaleConfig;
+        if (verticalLayout) {
+          if (!isBandScaleConfig(xAxisConfig)) {
+            throw new Error(`Axis with id "${xAxisKey}" shoud be of type "band" to display the bar series of id "${seriesId}"`);
+          }
+          if (xAxis[xAxisKey].data === undefined) {
+            throw new Error(`Axis with id "${xAxisKey}" shoud have data property`);
+          }
+          baseScaleConfig = xAxisConfig;
+        } else {
+          if (!isBandScaleConfig(yAxisConfig)) {
+            throw new Error(`Axis with id "${yAxisKey}" shoud be of type "band" to display the bar series of id "${seriesId}"`);
+          }
+          if (yAxis[yAxisKey].data === undefined) {
+            throw new Error(`Axis with id "${xAxisKey}" shoud have data property`);
+          }
+          baseScaleConfig = yAxisConfig;
         }
         const xScale = xAxisConfig.scale;
         const yScale = yAxisConfig.scale;
-
-        // Currently assuming all bars are vertical
-        const bandWidth = xScale.bandwidth();
+        const bandWidth = baseScaleConfig.scale.bandwidth();
         const {
           barWidth,
           offset
         } = getBandSize({
           bandWidth,
           numberOfGroups: stackingGroups.length,
-          gapRatio: xAxisConfig.barGapRatio
+          gapRatio: baseScaleConfig.barGapRatio
         });
-
-        // @ts-ignore TODO: fix when adding a correct API for customisation
+        const barOffset = groupIndex * (barWidth + offset);
         const {
           stackedData,
           color
         } = series[seriesId];
         return stackedData.map((values, dataIndex) => {
-          var _xAxis$xAxisKey$data;
+          var _xAxis$xAxisKey$data, _yAxis$yAxisKey$data;
           const baseline = Math.min(...values);
           const value = Math.max(...values);
           return /*#__PURE__*/_jsx(BarElement, _extends({
             id: seriesId,
             dataIndex: dataIndex,
-            x: xScale((_xAxis$xAxisKey$data = xAxis[xAxisKey].data) == null ? void 0 : _xAxis$xAxisKey$data[dataIndex]) + groupIndex * (barWidth + offset),
-            y: yScale(value),
-            height: yScale(baseline) - yScale(value),
-            width: barWidth,
+            x: verticalLayout ? xScale((_xAxis$xAxisKey$data = xAxis[xAxisKey].data) == null ? void 0 : _xAxis$xAxisKey$data[dataIndex]) + barOffset : xScale(baseline),
+            y: verticalLayout ? yScale(value) : yScale((_yAxis$yAxisKey$data = yAxis[yAxisKey].data) == null ? void 0 : _yAxis$yAxisKey$data[dataIndex]) + barOffset,
+            height: verticalLayout ? Math.abs(yScale(baseline) - yScale(value)) : barWidth,
+            width: verticalLayout ? barWidth : Math.abs(xScale(baseline) - xScale(value)),
             color: color,
             highlightScope: series[seriesId].highlightScope
           }, props), `${seriesId}-${dataIndex}`);

package/esm/BarChart/extremums.js

@@ -1,4 +1,4 @@
-export const getExtremumX = params => {
+const getBaseExtremum = params => {
   var _axis$data, _axis$data2;
   const {
     axis
@@ -7,7 +7,7 @@ export const getExtremumX = params => {
   const maxX = Math.max(...((_axis$data2 = axis.data) != null ? _axis$data2 : []));
   return [minX, maxX];
 };
-export const getExtremumY = params => {
+const getValueExtremum = params => {
   const {
     series,
     axis,
@@ -17,4 +17,20 @@ export const getExtremumY = params => {
     const [seriesMin, seriesMax] = series[seriesId].stackedData.reduce((seriesAcc, values) => [Math.min(...values, ...(seriesAcc[0] === null ? [] : [seriesAcc[0]])), Math.max(...values, ...(seriesAcc[1] === null ? [] : [seriesAcc[1]]))], series[seriesId].stackedData[0]);
     return [acc[0] === null ? seriesMin : Math.min(seriesMin, acc[0]), acc[1] === null ? seriesMax : Math.max(seriesMax, acc[1])];
   }, [null, null]);
+};
+export const getExtremumX = params => {
+  // Notice that bar should be all horizontal or all vertical.
+  // Don't think it's a problem for now
+  const isHorizontal = Object.keys(params.series).some(seriesId => params.series[seriesId].layout === 'horizontal');
+  if (isHorizontal) {
+    return getValueExtremum(params);
+  }
+  return getBaseExtremum(params);
+};
+export const getExtremumY = params => {
+  const isHorizontal = Object.keys(params.series).some(seriesId => params.series[seriesId].layout === 'horizontal');
+  if (isHorizontal) {
+    return getBaseExtremum(params);
+  }
+  return getValueExtremum(params);
 };

package/esm/BarChart/formatter.js

@@ -42,7 +42,9 @@ const formatter = (params, dataset) => {
     })).order(stackingOrder).offset(stackingOffset)(d3Dataset);
     ids.forEach((id, index) => {
       const dataKey = series[id].dataKey;
-      completedSeries[id] = _extends({}, series[id], {
+      completedSeries[id] = _extends({
+        layout: 'vertical'
+      }, series[id], {
         data: dataKey ? dataset.map(d => d[dataKey]) : series[id].data,
         stackedData: stackedSeries[index].map(([a, b]) => [a, b])
       });

package/esm/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -25,6 +25,7 @@ function ChartsAxisHighlight(props) {
     axis
   } = React.useContext(InteractionContext);
   const getXPosition = getValueToPositionMapper(xScale);
+  const getYPosition = getValueToPositionMapper(yScale);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [xAxisHighlight === 'band' && axis.x !== null && isBandScale(xScale) && /*#__PURE__*/_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`,
@@ -33,15 +34,22 @@ function ChartsAxisHighlight(props) {
       style: {
         pointerEvents: 'none'
       }
+    }), yAxisHighlight === 'band' && axis.y !== null && isBandScale(yScale) && /*#__PURE__*/_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__*/_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__*/_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: {
@@ -56,6 +64,6 @@ process.env.NODE_ENV !== "production" ? ChartsAxisHighlight.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   x: PropTypes.oneOf(['band', 'line', 'none']),
-  y: PropTypes.oneOf(['line', 'none'])
+  y: PropTypes.oneOf(['band', 'line', 'none'])
 } : void 0;
 export { ChartsAxisHighlight };

package/esm/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -72,29 +72,33 @@ export 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(CartesianContext);
   const series = React.useContext(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 != null ? content : DefaultChartsAxisContent;
   return /*#__PURE__*/_jsx(Content, {
     axisData: axisData,

package/esm/LineChart/LineChart.js

@@ -12,6 +12,7 @@ import { ChartsTooltip } from '../ChartsTooltip';
 import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { ChartsClipPath } from '../ChartsClipPath';
+import { LineHighlightPlot } from './LineHighlightPlot';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
@@ -29,6 +30,7 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     axisHighlight = {
       x: 'line'
     },
+    disableLineItemHighlight,
     legend,
     topAxis,
     leftAxis,
@@ -43,6 +45,7 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
     ref: ref,
     series: series.map(s => _extends({
+      disableHighlight: !!disableLineItemHighlight,
       type: 'line'
     }, s)),
     width: width,
@@ -79,13 +82,16 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
       bottomAxis: bottomAxis,
       slots: slots,
       slotProps: slotProps
-    }), /*#__PURE__*/_jsx(MarkPlot, {
+    }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), /*#__PURE__*/_jsx(MarkPlot, {
+      slots: slots,
+      slotProps: slotProps
+    }), /*#__PURE__*/_jsx(LineHighlightPlot, {
       slots: slots,
       slotProps: slotProps
     }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
       slots: slots,
       slotProps: slotProps
-    })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, {
+    })), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, {
       id: clipPathId
     }), children]
   });
@@ -97,7 +103,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   // ----------------------------------------------------------------------
   axisHighlight: PropTypes.shape({
     x: PropTypes.oneOf(['band', 'line', 'none']),
-    y: PropTypes.oneOf(['line', 'none'])
+    y: PropTypes.oneOf(['band', 'line', 'none'])
   }),
   /**
    * Indicate which axis to display the bottom of the charts.
@@ -131,6 +137,10 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   dataset: PropTypes.arrayOf(PropTypes.object),
   desc: PropTypes.string,
   disableAxisListener: PropTypes.bool,
+  /**
+   * If `true`, render the line highlight item.
+   */
+  disableLineItemHighlight: PropTypes.bool,
   height: PropTypes.number,
   /**
    * Indicate which axis to display the left of the charts.
@@ -208,12 +218,14 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     curve: PropTypes.oneOf(['catmullRom', 'linear', 'monotoneX', 'monotoneY', 'natural', 'step', 'stepAfter', 'stepBefore']),
     data: PropTypes.arrayOf(PropTypes.number),
     dataKey: PropTypes.string,
+    disableHighlight: PropTypes.bool,
     highlightScope: PropTypes.shape({
       faded: PropTypes.oneOf(['global', 'none', 'series']),
       highlighted: PropTypes.oneOf(['item', 'none', 'series'])
     }),
     id: PropTypes.string,
     label: PropTypes.string,
+    showMark: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
     stack: PropTypes.string,
     stackOffset: PropTypes.oneOf(['diverging', 'expand', 'none', 'silhouette', 'wiggle']),
     stackOrder: PropTypes.oneOf(['appearance', 'ascending', 'descending', 'insideOut', 'none', 'reverse']),

package/esm/LineChart/LineHighlightElement.js

@@ -0,0 +1,68 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["x", "y", "id", "classes", "color"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import { styled } from '@mui/material/styles';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+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);
+};
+const HighlightElement = 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 = _objectWithoutPropertiesLoose(props, _excluded);
+  const ownerState = {
+    id,
+    classes: innerClasses,
+    color,
+    x,
+    y
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(HighlightElement, _extends({}, 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.object
+} : void 0;
+export { LineHighlightElement };

package/esm/LineChart/LineHighlightPlot.js

@@ -0,0 +1,92 @@
+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 { SeriesContext } from '../context/SeriesContextProvider';
+import { CartesianContext } from '../context/CartesianContextProvider';
+import { LineHighlightElement } from './LineHighlightElement';
+import { getValueToPositionMapper } from '../hooks/useScale';
+import { InteractionContext } from '../context/InteractionProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+function LineHighlightPlot(props) {
+  var _axis$x, _slots$lineHighlight;
+  const {
+      slots,
+      slotProps
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const seriesData = React.useContext(SeriesContext).line;
+  const axisData = React.useContext(CartesianContext);
+  const {
+    axis
+  } = React.useContext(InteractionContext);
+  const highlightedIndex = (_axis$x = axis.x) == null ? void 0 : _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 = slots == null ? void 0 : slots.lineHighlight) != null ? _slots$lineHighlight : LineHighlightElement;
+  return /*#__PURE__*/_jsx("g", _extends({}, 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 = 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__*/_jsx(Element, _extends({
+          id: seriesId,
+          color: series[seriesId].color,
+          x: x,
+          y: y
+        }, slotProps == null ? void 0 : 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.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
+} : void 0;
+export { LineHighlightPlot };

package/esm/LineChart/MarkElement.js

@@ -40,10 +40,7 @@ const MarkElementPath = 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 --------------------------------