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

package/legacy/hooks/useAxisEvents.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
 import { InteractionContext } from '../context/InteractionProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
@@ -30,64 +31,47 @@ export var useAxisEvents = function useAxisEvents(disableAxisListener) {
     if (element === null || disableAxisListener) {
       return function () {};
     }
-    var getUpdateY = function getUpdateY(y) {
-      if (usedYAxis === null) {
-        return null;
-      }
-      var _yAxis$usedYAxis = yAxis[usedYAxis],
-        yScale = _yAxis$usedYAxis.scale,
-        yAxisData = _yAxis$usedYAxis.data;
-      if (!isBandScale(yScale)) {
-        return {
-          value: yScale.invert(y)
-        };
-      }
-      var dataIndex = Math.floor((y - yScale.range()[0]) / yScale.step());
-      if (dataIndex < 0 || dataIndex >= yAxisData.length) {
-        return null;
-      }
-      return {
-        index: dataIndex,
-        value: yAxisData[dataIndex]
-      };
-    };
-    var getUpdateX = function getUpdateX(x) {
+    var getUpdate = function getUpdate(axisConfig, mouseValue) {
       if (usedXAxis === null) {
         return null;
       }
-      var _xAxis$usedXAxis = xAxis[usedXAxis],
-        xScale = _xAxis$usedXAxis.scale,
-        xAxisData = _xAxis$usedXAxis.data;
-      if (!isBandScale(xScale)) {
-        var value = xScale.invert(x);
-        var closestIndex = xAxisData == null ? void 0 : xAxisData.findIndex(function (v, index) {
+      var scale = axisConfig.scale,
+        axisData = axisConfig.data;
+      if (!isBandScale(scale)) {
+        var value = scale.invert(mouseValue);
+        if (axisData === undefined) {
+          return {
+            value: value
+          };
+        }
+        var closestIndex = axisData == null ? void 0 : axisData.findIndex(function (v, index) {
           if (v > value) {
             // @ts-ignore
-            if (index === 0 || Math.abs(value - v) <= Math.abs(value - xAxisData[index - 1])) {
+            if (index === 0 || Math.abs(value - v) <= Math.abs(value - axisData[index - 1])) {
               return true;
             }
           }
           if (v <= value) {
-            if (index === xAxisData.length - 1 ||
+            if (index === axisData.length - 1 ||
             // @ts-ignore
-            Math.abs(value - v) < Math.abs(value - xAxisData[index + 1])) {
+            Math.abs(value - v) < Math.abs(value - axisData[index + 1])) {
               return true;
             }
           }
           return false;
         });
         return {
-          value: closestIndex !== undefined && closestIndex >= 0 ? xAxisData[closestIndex] : value,
+          value: closestIndex !== undefined && closestIndex >= 0 ? axisData[closestIndex] : value,
           index: closestIndex
         };
       }
-      var dataIndex = xScale.bandwidth() === 0 ? Math.floor((x - xScale.range()[0] + xScale.step() / 2) / xScale.step()) : Math.floor((x - xScale.range()[0]) / xScale.step());
-      if (dataIndex < 0 || dataIndex >= xAxisData.length) {
+      var dataIndex = scale.bandwidth() === 0 ? Math.floor((mouseValue - Math.min.apply(Math, _toConsumableArray(scale.range())) + scale.step() / 2) / scale.step()) : Math.floor((mouseValue - Math.min.apply(Math, _toConsumableArray(scale.range()))) / scale.step());
+      if (dataIndex < 0 || dataIndex >= axisData.length) {
         return null;
       }
       return {
         index: dataIndex,
-        value: xAxisData[dataIndex]
+        value: axisData[dataIndex]
       };
     };
     var handleMouseOut = function handleMouseOut() {
@@ -125,8 +109,8 @@ export var useAxisEvents = function useAxisEvents(disableAxisListener) {
         });
         return;
       }
-      var newStateX = getUpdateX(svgPt.x);
-      var newStateY = getUpdateY(svgPt.y);
+      var newStateX = getUpdate(xAxis[usedXAxis], svgPt.x);
+      var newStateY = getUpdate(yAxis[usedYAxis], svgPt.y);
       dispatch({
         type: 'updateAxis',
         data: {

package/legacy/hooks/useTicks.js

@@ -22,11 +22,11 @@ function useTicks(options) {
       var domain = scale.domain();
       if (scale.bandwidth() > 0) {
         // scale type = 'band'
-        return [].concat(_toConsumableArray(domain.map(function (value, index) {
+        return [].concat(_toConsumableArray(domain.map(function (value) {
           var _valueFormatter;
           return {
             formattedValue: (_valueFormatter = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter : value,
-            offset: index === 0 ? scale.range()[0] : scale(value) - (scale.step() - scale.bandwidth()) / 2,
+            offset: scale(value) - (scale.step() - scale.bandwidth()) / 2,
             labelOffset: scale.step() / 2
           };
         })), [{

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v6.0.0-alpha.7
+ * @mui/x-charts v6.0.0-alpha.8
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/models/seriesType/bar.d.ts

@@ -11,6 +11,11 @@ export interface BarSeriesType extends CommonSeriesType<number>, CartesianSeries
      */
     dataKey?: string;
     label?: string;
+    /**
+     * Layout of the bars. All bar should have the same layout.
+     * @default 'vertical'
+     */
+    layout?: 'horizontal' | 'vertical';
 }
 /**
  * An object that allows to identify a single bar.
@@ -21,5 +26,5 @@ export type BarItemIdentifier = {
     seriesId: DefaultizedBarSeriesType['id'];
     dataIndex: number;
 };
-export interface DefaultizedBarSeriesType extends DefaultizedProps<BarSeriesType, CommonDefaultizedProps | 'color'> {
+export interface DefaultizedBarSeriesType extends DefaultizedProps<BarSeriesType, CommonDefaultizedProps | 'color' | 'layout'> {
 }

package/modern/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,22 +37,34 @@ 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 => (s.data ?? dataset ?? []).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 ?? [{
-      id: DEFAULT_X_AXIS_KEY,
-      scaleType: 'band',
-      data: Array.from({
-        length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
-      }, (_, index) => index)
-    }],
-    yAxis: yAxis,
+    xAxis: xAxis ?? (hasHorizontalSeries ? undefined : [_extends({
+      id: DEFAULT_X_AXIS_KEY
+    }, defaultAxisConfig)]),
+    yAxis: yAxis ?? (hasHorizontalSeries ? [_extends({
+      id: DEFAULT_Y_AXIS_KEY
+    }, defaultAxisConfig)] : undefined),
     colors: colors,
     dataset: dataset,
     sx: sx,
@@ -72,9 +85,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, {
@@ -89,7 +100,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.
@@ -124,6 +135,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`.
@@ -204,6 +216,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/modern/BarChart/BarPlot.js

@@ -61,27 +61,37 @@ function BarPlot(props) {
         const yAxisKey = series[seriesId].yAxisKey ?? 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
@@ -92,10 +102,10 @@ function BarPlot(props) {
           return /*#__PURE__*/_jsx(BarElement, _extends({
             id: seriesId,
             dataIndex: dataIndex,
-            x: xScale(xAxis[xAxisKey].data?.[dataIndex]) + groupIndex * (barWidth + offset),
-            y: yScale(value),
-            height: yScale(baseline) - yScale(value),
-            width: barWidth,
+            x: verticalLayout ? xScale(xAxis[xAxisKey].data?.[dataIndex]) + barOffset : xScale(baseline),
+            y: verticalLayout ? yScale(value) : yScale(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/modern/BarChart/extremums.js

@@ -1,4 +1,4 @@
-export const getExtremumX = params => {
+const getBaseExtremum = params => {
   const {
     axis
   } = params;
@@ -6,7 +6,7 @@ export const getExtremumX = params => {
   const maxX = Math.max(...(axis.data ?? []));
   return [minX, maxX];
 };
-export const getExtremumY = params => {
+const getValueExtremum = params => {
   const {
     series,
     axis,
@@ -16,4 +16,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/modern/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/modern/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/modern/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -71,29 +71,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 ?? DefaultChartsAxisContent;
   return /*#__PURE__*/_jsx(Content, {
     axisData: axisData,

package/modern/LineChart/LineChart.js

@@ -94,7 +94,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.

package/modern/LineChart/MarkPlot.js

@@ -1,4 +1,6 @@
 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';
@@ -8,9 +10,10 @@ import { getValueToPositionMapper } from '../hooks/useScale';
 import { jsx as _jsx } from "react/jsx-runtime";
 function MarkPlot(props) {
   const {
-    slots,
-    slotProps
-  } = props;
+      slots,
+      slotProps
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const seriesData = React.useContext(SeriesContext).line;
   const axisData = React.useContext(CartesianContext);
   const Mark = slots?.mark ?? MarkElement;
@@ -29,7 +32,7 @@ function MarkPlot(props) {
   } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
-  return /*#__PURE__*/_jsx("g", _extends({}, props, {
+  return /*#__PURE__*/_jsx("g", _extends({}, other, {
     children: stackingGroups.flatMap(({
       ids: groupIds
     }) => {

package/modern/PieChart/PieChart.js

@@ -88,7 +88,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/modern/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/modern/SparkLineChart/SparkLineChart.js

@@ -102,7 +102,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/modern/context/CartesianContextProvider.js

@@ -150,17 +150,17 @@ function CartesianContextProvider({
       const range = [drawingArea.top + drawingArea.height, drawingArea.top];
       if (isBandScaleConfig(axis)) {
         const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
-        completedXAxis[axis.id] = _extends({
+        completedYAxis[axis.id] = _extends({
           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
         });
       }

package/modern/hooks/useAxisEvents.js

@@ -33,66 +33,49 @@ export const useAxisEvents = disableAxisListener => {
     if (element === null || disableAxisListener) {
       return () => {};
     }
-    const getUpdateY = y => {
-      if (usedYAxis === null) {
-        return null;
-      }
-      const {
-        scale: yScale,
-        data: yAxisData
-      } = yAxis[usedYAxis];
-      if (!isBandScale(yScale)) {
-        return {
-          value: yScale.invert(y)
-        };
-      }
-      const dataIndex = Math.floor((y - yScale.range()[0]) / yScale.step());
-      if (dataIndex < 0 || dataIndex >= yAxisData.length) {
-        return null;
-      }
-      return {
-        index: dataIndex,
-        value: yAxisData[dataIndex]
-      };
-    };
-    const getUpdateX = x => {
+    const getUpdate = (axisConfig, mouseValue) => {
       if (usedXAxis === null) {
         return null;
       }
       const {
-        scale: xScale,
-        data: xAxisData
-      } = xAxis[usedXAxis];
-      if (!isBandScale(xScale)) {
-        const value = xScale.invert(x);
-        const closestIndex = xAxisData?.findIndex((v, index) => {
+        scale,
+        data: axisData
+      } = axisConfig;
+      if (!isBandScale(scale)) {
+        const value = scale.invert(mouseValue);
+        if (axisData === undefined) {
+          return {
+            value
+          };
+        }
+        const closestIndex = axisData?.findIndex((v, index) => {
           if (v > value) {
             // @ts-ignore
-            if (index === 0 || Math.abs(value - v) <= Math.abs(value - xAxisData[index - 1])) {
+            if (index === 0 || Math.abs(value - v) <= Math.abs(value - axisData[index - 1])) {
               return true;
             }
           }
           if (v <= value) {
-            if (index === xAxisData.length - 1 ||
+            if (index === axisData.length - 1 ||
             // @ts-ignore
-            Math.abs(value - v) < Math.abs(value - xAxisData[index + 1])) {
+            Math.abs(value - v) < Math.abs(value - axisData[index + 1])) {
               return true;
             }
           }
           return false;
         });
         return {
-          value: closestIndex !== undefined && closestIndex >= 0 ? xAxisData[closestIndex] : value,
+          value: closestIndex !== undefined && closestIndex >= 0 ? axisData[closestIndex] : value,
           index: closestIndex
         };
       }
-      const dataIndex = xScale.bandwidth() === 0 ? Math.floor((x - xScale.range()[0] + xScale.step() / 2) / xScale.step()) : Math.floor((x - xScale.range()[0]) / xScale.step());
-      if (dataIndex < 0 || dataIndex >= xAxisData.length) {
+      const dataIndex = scale.bandwidth() === 0 ? Math.floor((mouseValue - Math.min(...scale.range()) + scale.step() / 2) / scale.step()) : Math.floor((mouseValue - Math.min(...scale.range())) / scale.step());
+      if (dataIndex < 0 || dataIndex >= axisData.length) {
         return null;
       }
       return {
         index: dataIndex,
-        value: xAxisData[dataIndex]
+        value: axisData[dataIndex]
       };
     };
     const handleMouseOut = () => {
@@ -130,8 +113,8 @@ export const useAxisEvents = disableAxisListener => {
         });
         return;
       }
-      const newStateX = getUpdateX(svgPt.x);
-      const newStateY = getUpdateY(svgPt.y);
+      const newStateX = getUpdate(xAxis[usedXAxis], svgPt.x);
+      const newStateY = getUpdate(yAxis[usedYAxis], svgPt.y);
       dispatch({
         type: 'updateAxis',
         data: {

package/modern/hooks/useTicks.js

@@ -25,9 +25,9 @@ function useTicks(options) {
       const domain = scale.domain();
       if (scale.bandwidth() > 0) {
         // scale type = 'band'
-        return [...domain.map((value, index) => ({
+        return [...domain.map(value => ({
           formattedValue: valueFormatter?.(value) ?? value,
-          offset: index === 0 ? scale.range()[0] : scale(value) - (scale.step() - scale.bandwidth()) / 2,
+          offset: scale(value) - (scale.step() - scale.bandwidth()) / 2,
           labelOffset: scale.step() / 2
         })), {
           formattedValue: undefined,

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v6.0.0-alpha.7
+ * @mui/x-charts v6.0.0-alpha.8
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the