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

package/legacy/BarChart/extremums.js

@@ -1,13 +1,13 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-export var getExtremumX = function getExtremumX(params) {
+var getBaseExtremum = function getBaseExtremum(params) {
   var _axis$data, _axis$data2;
   var axis = params.axis;
   var minX = Math.min.apply(Math, _toConsumableArray((_axis$data = axis.data) != null ? _axis$data : []));
   var maxX = Math.max.apply(Math, _toConsumableArray((_axis$data2 = axis.data) != null ? _axis$data2 : []));
   return [minX, maxX];
 };
-export var getExtremumY = function getExtremumY(params) {
+var getValueExtremum = function getValueExtremum(params) {
   var series = params.series,
     axis = params.axis,
     isDefaultAxis = params.isDefaultAxis;
@@ -22,4 +22,24 @@ export var getExtremumY = function getExtremumY(params) {
       seriesMax = _series$seriesId$stac2[1];
     return [acc[0] === null ? seriesMin : Math.min(seriesMin, acc[0]), acc[1] === null ? seriesMax : Math.max(seriesMax, acc[1])];
   }, [null, null]);
+};
+export var getExtremumX = function getExtremumX(params) {
+  // Notice that bar should be all horizontal or all vertical.
+  // Don't think it's a problem for now
+  var isHorizontal = Object.keys(params.series).some(function (seriesId) {
+    return params.series[seriesId].layout === 'horizontal';
+  });
+  if (isHorizontal) {
+    return getValueExtremum(params);
+  }
+  return getBaseExtremum(params);
+};
+export var getExtremumY = function getExtremumY(params) {
+  var isHorizontal = Object.keys(params.series).some(function (seriesId) {
+    return params.series[seriesId].layout === 'horizontal';
+  });
+  if (isHorizontal) {
+    return getBaseExtremum(params);
+  }
+  return getValueExtremum(params);
 };

package/legacy/BarChart/formatter.js

@@ -38,7 +38,9 @@ var formatter = function formatter(params, dataset) {
     })).order(stackingOrder).offset(stackingOffset)(d3Dataset);
     ids.forEach(function (id, index) {
       var dataKey = series[id].dataKey;
-      completedSeries[id] = _extends({}, series[id], {
+      completedSeries[id] = _extends({
+        layout: 'vertical'
+      }, series[id], {
         data: dataKey ? dataset.map(function (d) {
           return d[dataKey];
         }) : series[id].data,

package/legacy/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -21,6 +21,7 @@ function ChartsAxisHighlight(props) {
   var _React$useContext2 = React.useContext(InteractionContext),
     axis = _React$useContext2.axis;
   var getXPosition = getValueToPositionMapper(xScale);
+  var getYPosition = getValueToPositionMapper(yScale);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [xAxisHighlight === 'band' && axis.x !== null && isBandScale(xScale) && /*#__PURE__*/_jsx("path", {
       d: "M ".concat(xScale(axis.x.value) - (xScale.step() - xScale.bandwidth()) / 2, " ").concat(yScale.range()[0], " l ").concat(xScale.step(), " 0 l 0 ").concat(yScale.range()[1] - yScale.range()[0], " l ").concat(-xScale.step(), " 0 Z"),
@@ -29,15 +30,22 @@ function ChartsAxisHighlight(props) {
       style: {
         pointerEvents: 'none'
       }
+    }), yAxisHighlight === 'band' && axis.y !== null && isBandScale(yScale) && /*#__PURE__*/_jsx("path", {
+      d: "M ".concat(xScale.range()[0], " ").concat(yScale(axis.y.value) - (yScale.step() - yScale.bandwidth()) / 2, " l 0 ").concat(yScale.step(), " l ").concat(xScale.range()[1] - xScale.range()[0], " 0 l 0 ").concat(-yScale.step(), " Z"),
+      fill: "gray",
+      fillOpacity: 0.1,
+      style: {
+        pointerEvents: 'none'
+      }
     }), xAxisHighlight === 'line' && axis.x !== null && /*#__PURE__*/_jsx("path", {
-      d: "M ".concat(getXPosition(axis.x.value), " ").concat(yScale(yScale.domain()[0]), " L ").concat(getXPosition(axis.x.value), " ").concat(yScale(yScale.domain().at(-1))),
+      d: "M ".concat(getXPosition(axis.x.value), " ").concat(yScale.range()[0], " L ").concat(getXPosition(axis.x.value), " ").concat(yScale.range()[1]),
       stroke: "black",
       strokeDasharray: "5 2",
       style: {
         pointerEvents: 'none'
       }
     }), yAxisHighlight === 'line' && axis.y !== null && /*#__PURE__*/_jsx("path", {
-      d: "M ".concat(xScale.range()[0], " ").concat(yScale(axis.y.value), " L ").concat(xScale.range()[1], " ").concat(yScale(axis.y.value)),
+      d: "M ".concat(xScale.range()[0], " ").concat(getYPosition(axis.y.value), " L ").concat(xScale.range()[1], " ").concat(getYPosition(axis.y.value)),
       stroke: "black",
       strokeDasharray: "5 2",
       style: {
@@ -52,6 +60,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/legacy/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -71,30 +71,34 @@ export function ChartsAxisTooltipContent(props) {
     axisData = props.axisData,
     sx = props.sx,
     classes = props.classes;
-  var dataIndex = axisData.x && axisData.x.index;
-  var axisValue = axisData.x && axisData.x.value;
+  var isXaxis = (axisData.x && axisData.x.index) !== undefined;
+  var dataIndex = isXaxis ? axisData.x && axisData.x.index : axisData.y && axisData.y.index;
+  var axisValue = isXaxis ? axisData.x && axisData.x.value : axisData.y && axisData.y.value;
   var _React$useContext = React.useContext(CartesianContext),
     xAxisIds = _React$useContext.xAxisIds,
-    xAxis = _React$useContext.xAxis;
+    xAxis = _React$useContext.xAxis,
+    yAxisIds = _React$useContext.yAxisIds,
+    yAxis = _React$useContext.yAxis;
   var series = React.useContext(SeriesContext);
-  var USED_X_AXIS_ID = xAxisIds[0];
+  var USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
   var relevantSeries = React.useMemo(function () {
     var rep = [];
     Object.keys(series).filter(function (seriesType) {
       return ['bar', 'line', 'scatter'].includes(seriesType);
     }).forEach(function (seriesType) {
       series[seriesType].seriesOrder.forEach(function (seriesId) {
-        var axisKey = series[seriesType].series[seriesId].xAxisKey;
-        if (axisKey === undefined || axisKey === USED_X_AXIS_ID) {
+        var item = series[seriesType].series[seriesId];
+        var 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]);
   var relevantAxis = React.useMemo(function () {
-    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]);
   var Content = content != null ? content : DefaultChartsAxisContent;
   return /*#__PURE__*/_jsx(Content, {
     axisData: axisData,

package/legacy/LineChart/LineChart.js

@@ -13,6 +13,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";
 var LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
@@ -30,6 +31,7 @@ var LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     axisHighlight = _props$axisHighlight === void 0 ? {
       x: 'line'
     } : _props$axisHighlight,
+    disableLineItemHighlight = props.disableLineItemHighlight,
     legend = props.legend,
     topAxis = props.topAxis,
     leftAxis = props.leftAxis,
@@ -44,6 +46,7 @@ var LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     ref: ref,
     series: series.map(function (s) {
       return _extends({
+        disableHighlight: !!disableLineItemHighlight,
         type: 'line'
       }, s);
     }),
@@ -83,13 +86,16 @@ var 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]
   });
@@ -101,7 +107,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.
@@ -135,6 +141,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.
@@ -212,12 +222,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/legacy/LineChart/LineHighlightElement.js

@@ -0,0 +1,67 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _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 var lineHighlightElementClasses = generateUtilityClasses('MuiHighlightElement', ['root']);
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes,
+    id = ownerState.id;
+  var slots = {
+    root: ['root', "series-".concat(id)]
+  };
+  return composeClasses(slots, getHighlightElementUtilityClass, classes);
+};
+var HighlightElement = styled('circle', {
+  name: 'MuiHighlightElement',
+  slot: 'Root',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.root;
+  }
+})(function (_ref) {
+  var ownerState = _ref.ownerState;
+  return {
+    transform: "translate(".concat(ownerState.x, "px, ").concat(ownerState.y, "px)"),
+    transformOrigin: "".concat(ownerState.x, "px ").concat(ownerState.y, "px"),
+    fill: ownerState.color
+  };
+});
+function LineHighlightElement(props) {
+  var x = props.x,
+    y = props.y,
+    id = props.id,
+    innerClasses = props.classes,
+    color = props.color,
+    other = _objectWithoutProperties(props, _excluded);
+  var ownerState = {
+    id: id,
+    classes: innerClasses,
+    color: color,
+    x: x,
+    y: y
+  };
+  var 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/legacy/LineChart/LineHighlightPlot.js

@@ -0,0 +1,85 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _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;
+  var slots = props.slots,
+    slotProps = props.slotProps,
+    other = _objectWithoutProperties(props, _excluded);
+  var seriesData = React.useContext(SeriesContext).line;
+  var axisData = React.useContext(CartesianContext);
+  var _React$useContext = React.useContext(InteractionContext),
+    axis = _React$useContext.axis;
+  var highlightedIndex = (_axis$x = axis.x) == null ? void 0 : _axis$x.index;
+  if (highlightedIndex === undefined) {
+    return null;
+  }
+  if (seriesData === undefined) {
+    return null;
+  }
+  var series = seriesData.series,
+    stackingGroups = seriesData.stackingGroups;
+  var xAxis = axisData.xAxis,
+    yAxis = axisData.yAxis,
+    xAxisIds = axisData.xAxisIds,
+    yAxisIds = axisData.yAxisIds;
+  var defaultXAxisId = xAxisIds[0];
+  var defaultYAxisId = yAxisIds[0];
+  var Element = (_slots$lineHighlight = slots == null ? void 0 : slots.lineHighlight) != null ? _slots$lineHighlight : LineHighlightElement;
+  return /*#__PURE__*/_jsx("g", _extends({}, other, {
+    children: stackingGroups.flatMap(function (_ref) {
+      var groupIds = _ref.ids;
+      return groupIds.flatMap(function (seriesId) {
+        var _series$seriesId = series[seriesId],
+          _series$seriesId$xAxi = _series$seriesId.xAxisKey,
+          xAxisKey = _series$seriesId$xAxi === void 0 ? defaultXAxisId : _series$seriesId$xAxi,
+          _series$seriesId$yAxi = _series$seriesId.yAxisKey,
+          yAxisKey = _series$seriesId$yAxi === void 0 ? defaultYAxisId : _series$seriesId$yAxi,
+          stackedData = _series$seriesId.stackedData,
+          disableHighlight = _series$seriesId.disableHighlight;
+        if (disableHighlight) {
+          return null;
+        }
+        var xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
+        var yScale = yAxis[yAxisKey].scale;
+        var xData = xAxis[xAxisKey].data;
+        if (xData === undefined) {
+          throw new Error("Axis of id \"".concat(xAxisKey, "\" should have data property to be able to display a line plot."));
+        }
+        var x = xScale(xData[highlightedIndex]);
+        var 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), "".concat(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/legacy/LineChart/MarkElement.js

@@ -40,10 +40,7 @@ var MarkElementPath = styled('path', {
     transformOrigin: "".concat(ownerState.x, "px ").concat(ownerState.y, "px"),
     fill: theme.palette.background.paper,
     stroke: ownerState.color,
-    strokeWidth: 2,
-    '&.MuiMarkElement-highlighted': {
-      fill: ownerState.color
-    }
+    strokeWidth: 2
   };
 });
 MarkElementPath.propTypes = {

package/legacy/LineChart/MarkPlot.js

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { SeriesContext } from '../context/SeriesContextProvider';
@@ -10,7 +12,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 function MarkPlot(props) {
   var _slots$mark;
   var slots = props.slots,
-    slotProps = props.slotProps;
+    slotProps = props.slotProps,
+    other = _objectWithoutProperties(props, _excluded);
   var seriesData = React.useContext(SeriesContext).line;
   var axisData = React.useContext(CartesianContext);
   var Mark = (_slots$mark = slots == null ? void 0 : slots.mark) != null ? _slots$mark : MarkElement;
@@ -25,7 +28,7 @@ function MarkPlot(props) {
     yAxisIds = axisData.yAxisIds;
   var defaultXAxisId = xAxisIds[0];
   var defaultYAxisId = yAxisIds[0];
-  return /*#__PURE__*/_jsx("g", _extends({}, props, {
+  return /*#__PURE__*/_jsx("g", _extends({}, other, {
     children: stackingGroups.flatMap(function (_ref) {
       var groupIds = _ref.ids;
       return groupIds.flatMap(function (seriesId) {
@@ -34,7 +37,12 @@ function MarkPlot(props) {
           xAxisKey = _series$seriesId$xAxi === void 0 ? defaultXAxisId : _series$seriesId$xAxi,
           _series$seriesId$yAxi = _series$seriesId.yAxisKey,
           yAxisKey = _series$seriesId$yAxi === void 0 ? defaultYAxisId : _series$seriesId$yAxi,
-          stackedData = _series$seriesId.stackedData;
+          stackedData = _series$seriesId.stackedData,
+          _series$seriesId$show = _series$seriesId.showMark,
+          showMark = _series$seriesId$show === void 0 ? true : _series$seriesId$show;
+        if (showMark === false) {
+          return null;
+        }
         var xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
         var yScale = yAxis[yAxisKey].scale;
         var xData = xAxis[xAxisKey].data;
@@ -59,13 +67,23 @@ function MarkPlot(props) {
           return {
             x: xScale(x),
             y: yScale(y),
+            position: x,
+            value: y,
             index: index
           };
         }).filter(isInRange).map(function (_ref3) {
           var x = _ref3.x,
             y = _ref3.y,
-            index = _ref3.index;
-          return /*#__PURE__*/_jsx(Mark, _extends({
+            index = _ref3.index,
+            position = _ref3.position,
+            value = _ref3.value;
+          return showMark === true || showMark({
+            x: x,
+            y: y,
+            index: index,
+            position: position,
+            value: value
+          }) ? /*#__PURE__*/_jsx(Mark, _extends({
             id: seriesId,
             dataIndex: index,
             shape: "circle",
@@ -73,7 +91,7 @@ function MarkPlot(props) {
             x: x,
             y: y,
             highlightScope: series[seriesId].highlightScope
-          }, slotProps == null ? void 0 : slotProps.mark), "".concat(seriesId, "-").concat(index));
+          }, slotProps == null ? void 0 : slotProps.mark), "".concat(seriesId, "-").concat(index)) : null;
         });
       });
     })

package/legacy/LineChart/index.js

@@ -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 './MarkElement';
+export * from './LineHighlightElement';

package/legacy/PieChart/PieChart.js

@@ -100,7 +100,7 @@ process.env.NODE_ENV !== "production" ? PieChart.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.

package/legacy/ScatterChart/ScatterChart.js

@@ -70,7 +70,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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.

package/legacy/SparkLineChart/SparkLineChart.js

@@ -1,21 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
 import { BarPlot } from '../BarChart';
-import { LinePlot, MarkPlot, AreaPlot, markElementClasses } from '../LineChart';
+import { LinePlot, AreaPlot, LineHighlightPlot } from '../LineChart';
 import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { ChartsTooltip } from '../ChartsTooltip';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var SparkLineMarkPlot = styled(MarkPlot)(_defineProperty({}, "& .".concat(markElementClasses.root), _defineProperty({
-  display: 'none'
-}, "&.".concat(markElementClasses.highlighted), {
-  display: 'inherit'
-})));
 var SPARKLINE_DEFAULT_MARGIN = {
   top: 5,
   bottom: 5,
@@ -61,7 +54,8 @@ var SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props
       valueFormatter: valueFormatter
     }, plotType === 'bar' ? {} : {
       area: area,
-      curve: curve
+      curve: curve,
+      disableHighlight: !showHighlight
     })],
     width: width,
     height: height,
@@ -89,7 +83,10 @@ var SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props
       }), /*#__PURE__*/_jsx(LinePlot, {
         slots: slots,
         slotProps: slotProps
-      }), showHighlight && /*#__PURE__*/_jsx(SparkLineMarkPlot, {})]
+      }), /*#__PURE__*/_jsx(LineHighlightPlot, {
+        slots: slots,
+        slotProps: slotProps
+      })]
     }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), showTooltip && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), children]
   });
 });
@@ -106,7 +103,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   area: PropTypes.bool,
   axisHighlight: PropTypes.shape({
     x: PropTypes.oneOf(['band', 'line', 'none']),
-    y: PropTypes.oneOf(['line', 'none'])
+    y: PropTypes.oneOf(['band', 'line', 'none'])
   }),
   children: PropTypes.node,
   className: PropTypes.string,

package/legacy/context/CartesianContextProvider.js

@@ -182,17 +182,17 @@ function CartesianContextProvider(_ref) {
       if (isBandScaleConfig(axis)) {
         var _axis$categoryGapRati2;
         var categoryGapRatio = (_axis$categoryGapRati2 = axis.categoryGapRatio) != null ? _axis$categoryGapRati2 : DEFAULT_CATEGORY_GAP_RATIO;
-        completedXAxis[axis.id] = _extends({
+        completedYAxis[axis.id] = _extends({
           categoryGapRatio: categoryGapRatio,
           barGapRatio: 0
         }, axis, {
-          scale: scaleBand(axis.data, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
+          scale: scaleBand(axis.data, [range[1], range[0]]).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
           ticksNumber: axis.data.length
         });
       }
       if (isPointScaleConfig(axis)) {
-        completedXAxis[axis.id] = _extends({}, axis, {
-          scale: scalePoint(axis.data, range),
+        completedYAxis[axis.id] = _extends({}, axis, {
+          scale: scalePoint(axis.data, [range[1], range[0]]),
           ticksNumber: axis.data.length
         });
       }