@mui/x-charts 7.0.0-beta.5 → 7.0.0-beta.7

package/modern/ChartsLegend/DefaultChartsLegend.js

@@ -50,6 +50,7 @@ function DefaultChartsLegend(props) {
     labelStyle: inLabelStyle
   } = props;
   const theme = useTheme();
+  const isRTL = theme.direction === 'rtl';
   const labelStyle = React.useMemo(() => _extends({}, theme.typography.subtitle1, {
     color: 'inherit',
     dominantBaseline: 'central',
@@ -80,7 +81,7 @@ function DefaultChartsLegend(props) {
   const totalHeight = drawingArea.top + drawingArea.height + drawingArea.bottom;
   const availableWidth = totalWidth - padding.left - padding.right;
   const availableHeight = totalHeight - padding.top - padding.bottom;
-  const seriesWithPosition = React.useMemo(() => {
+  const [seriesWithPosition, legendWidth, legendHeight] = React.useMemo(() => {
     // Start at 0, 0. Will be modified later by padding and position.
     let x = 0;
     let y = 0;
@@ -144,40 +145,31 @@ function DefaultChartsLegend(props) {
       }
       return rep;
     });
-
-    // Move the legend according to padding and position
-    let gapX = 0;
-    let gapY = 0;
+    return [seriesWithRawPosition.map(item => _extends({}, item, {
+      positionY: item.positionY + (direction === 'row' ? rowMaxHeight[item.rowIndex] / 2 // Get the center of the entire row
+      : item.outerHeight / 2) // Get the center of the item
+    })), totalWidthUsed, totalHeightUsed];
+  }, [seriesToDisplay, getItemSpace, labelStyle, direction, availableWidth, availableHeight, itemGap]);
+  const gapX = React.useMemo(() => {
     switch (position.horizontal) {
       case 'left':
-        gapX = padding.left;
-        break;
+        return padding.left;
       case 'right':
-        gapX = totalWidth - padding.right - totalWidthUsed;
-        break;
+        return totalWidth - padding.right - legendWidth;
       default:
-        gapX = (totalWidth - totalWidthUsed) / 2;
-        break;
+        return (totalWidth - legendWidth) / 2;
     }
+  }, [position.horizontal, padding.left, padding.right, totalWidth, legendWidth]);
+  const gapY = React.useMemo(() => {
     switch (position.vertical) {
       case 'top':
-        gapY = padding.top;
-        break;
+        return padding.top;
       case 'bottom':
-        gapY = totalHeight - padding.bottom - totalHeightUsed;
-        break;
+        return totalHeight - padding.bottom - legendHeight;
       default:
-        gapY = (totalHeight - totalHeightUsed) / 2;
-        break;
+        return (totalHeight - legendHeight) / 2;
     }
-    return seriesWithRawPosition.map(item => _extends({}, item, {
-      // Add the gap due to the position
-      positionX: item.positionX + gapX,
-      // Add the gap due to the position
-      positionY: item.positionY + gapY + (direction === 'row' ? rowMaxHeight[item.rowIndex] / 2 // Get the center of the entire row
-      : item.outerHeight / 2) // Get the center of the item
-    }));
-  }, [seriesToDisplay, position.horizontal, position.vertical, getItemSpace, labelStyle, direction, availableWidth, availableHeight, itemGap, padding.left, padding.right, padding.top, padding.bottom, totalWidth, totalHeight]);
+  }, [position.vertical, padding.top, padding.bottom, totalHeight, legendHeight]);
   if (hidden) {
     return null;
   }
@@ -192,9 +184,10 @@ function DefaultChartsLegend(props) {
         positionY
       }) => /*#__PURE__*/_jsxs("g", {
         className: classes.series,
-        transform: `translate(${positionX} ${positionY})`,
+        transform: `translate(${gapX + (isRTL ? legendWidth - positionX : positionX)} ${gapY + positionY})`,
         children: [/*#__PURE__*/_jsx("rect", {
           className: classes.mark,
+          x: isRTL ? -itemMarkWidth : 0,
           y: -itemMarkHeight / 2,
           width: itemMarkWidth,
           height: itemMarkHeight,
@@ -202,7 +195,7 @@ function DefaultChartsLegend(props) {
         }), /*#__PURE__*/_jsx(ChartsText, {
           style: labelStyle,
           text: label,
-          x: itemMarkWidth + markGap,
+          x: (isRTL ? -1 : 1) * (itemMarkWidth + markGap),
           y: 0
         })]
       }, id))
@@ -272,6 +265,9 @@ process.env.NODE_ENV !== "production" ? DefaultChartsLegend.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   })]),
+  /**
+   * The position of the legend.
+   */
   position: PropTypes.shape({
     horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
     vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired

package/modern/ChartsTooltip/DefaultChartsAxisTooltipContent.js

@@ -29,7 +29,9 @@ function DefaultChartsAxisTooltipContent(props) {
           children: /*#__PURE__*/_jsx(ChartsTooltipCell, {
             colSpan: 3,
             children: /*#__PURE__*/_jsx(Typography, {
-              children: axisFormatter(axisValue)
+              children: axisFormatter(axisValue, {
+                location: 'tooltip'
+              })
             })
           })
         })

package/modern/ChartsXAxis/ChartsXAxis.js

@@ -140,7 +140,9 @@ function ChartsXAxis(inProps) {
     slots,
     slotProps,
     tickInterval,
-    tickLabelInterval
+    tickLabelInterval,
+    tickPlacement,
+    tickLabelPlacement
   } = defaultizedProps;
   const theme = useTheme();
   const classes = useUtilityClasses(_extends({}, defaultizedProps, {
@@ -176,7 +178,9 @@ function ChartsXAxis(inProps) {
     scale: xScale,
     tickNumber,
     valueFormatter,
-    tickInterval
+    tickInterval,
+    tickPlacement,
+    tickLabelPlacement
   });
   const xTicksWithDimension = addLabelDimension(xTicks, {
     tickLabelStyle: axisTickLabelProps.style,
@@ -319,6 +323,12 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * @default 'auto'
    */
   tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+  /**
+   * The placement of ticks label. Can be the middle of the band, or the tick position.
+   * Only used if scale is 'band'.
+   * @default 'middle'
+   */
+  tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
   /**
    * The style applied to ticks text.
    */
@@ -340,6 +350,12 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * Not supported by categorical axis (band, points).
    */
   tickNumber: PropTypes.number,
+  /**
+   * The placement of ticks in regard to the band interval.
+   * Only used if scale is 'band'.
+   * @default 'extremities'
+   */
+  tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
   /**
    * The size of the ticks.
    * @default 6

package/modern/ChartsYAxis/ChartsYAxis.js

@@ -79,7 +79,9 @@ function ChartsYAxis(inProps) {
     tickSize: tickSizeProp,
     valueFormatter,
     slots,
-    slotProps
+    slotProps,
+    tickPlacement,
+    tickLabelPlacement
   } = defaultizedProps;
   const theme = useTheme();
   const classes = useUtilityClasses(_extends({}, defaultizedProps, {
@@ -95,7 +97,9 @@ function ChartsYAxis(inProps) {
   const yTicks = useTicks({
     scale: yScale,
     tickNumber,
-    valueFormatter
+    valueFormatter,
+    tickPlacement,
+    tickLabelPlacement
   });
   const positionSign = position === 'right' ? 1 : -1;
   const labelRefPoint = {
@@ -249,6 +253,12 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    * @default 'auto'
    */
   tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+  /**
+   * The placement of ticks label. Can be the middle of the band, or the tick position.
+   * Only used if scale is 'band'.
+   * @default 'middle'
+   */
+  tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
   /**
    * The style applied to ticks text.
    */
@@ -270,6 +280,12 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    * Not supported by categorical axis (band, points).
    */
   tickNumber: PropTypes.number,
+  /**
+   * The placement of ticks in regard to the band interval.
+   * Only used if scale is 'band'.
+   * @default 'extremities'
+   */
+  tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
   /**
    * The size of the ticks.
    * @default 6

package/modern/LineChart/LineChart.js

@@ -160,10 +160,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number
   }), PropTypes.string]),
   children: PropTypes.node,
@@ -220,10 +222,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number
   }), PropTypes.string]),
   /**
@@ -292,10 +296,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number
   }), PropTypes.string]),
   /**
@@ -353,10 +359,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number
   }), PropTypes.string]),
   viewBox: PropTypes.shape({
@@ -397,10 +405,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
   })),
@@ -432,10 +442,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
   }))

package/modern/PieChart/PieChart.js

@@ -8,6 +8,7 @@ import { ChartsTooltip } from '../ChartsTooltip';
 import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { PiePlot } from './PiePlot';
+import { useIsRTL } from '../internals/useIsRTL';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const defaultMargin = {
@@ -16,6 +17,12 @@ const defaultMargin = {
   left: 5,
   right: 100
 };
+const defaultRTLMargin = {
+  top: 5,
+  bottom: 5,
+  left: 100,
+  right: 5
+};
 
 /**
  * Demos:
@@ -45,13 +52,7 @@ function PieChart(props) {
       y: 'none'
     },
     skipAnimation,
-    legend = {
-      direction: 'column',
-      position: {
-        vertical: 'middle',
-        horizontal: 'right'
-      }
-    },
+    legend: legendProps,
     topAxis = null,
     leftAxis = null,
     rightAxis = null,
@@ -61,7 +62,15 @@ function PieChart(props) {
     slotProps,
     onItemClick
   } = props;
-  const margin = _extends({}, defaultMargin, marginProps);
+  const isRTL = useIsRTL();
+  const margin = _extends({}, isRTL ? defaultRTLMargin : defaultMargin, marginProps);
+  const legend = _extends({
+    direction: 'column',
+    position: {
+      vertical: 'middle',
+      horizontal: isRTL ? 'left' : 'right'
+    }
+  }, legendProps);
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
     series: series.map(s => _extends({
       type: 'pie'
@@ -131,10 +140,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number
   }), PropTypes.string]),
   children: PropTypes.node,
@@ -180,10 +191,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number
   }), PropTypes.string]),
   /**
@@ -239,10 +252,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number
   }), PropTypes.string]),
   /**
@@ -300,10 +315,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number
   }), PropTypes.string]),
   viewBox: PropTypes.shape({
@@ -344,10 +361,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
   })),
@@ -379,10 +398,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
   }))

package/modern/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -132,10 +132,12 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
   })),
@@ -167,10 +169,12 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
   }))

package/modern/ScatterChart/ScatterChart.js

@@ -121,10 +121,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number
   }), PropTypes.string]),
   children: PropTypes.node,
@@ -182,10 +184,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number
   }), PropTypes.string]),
   /**
@@ -241,10 +245,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number
   }), PropTypes.string]),
   /**
@@ -297,10 +303,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number
   }), PropTypes.string]),
   viewBox: PropTypes.shape({
@@ -346,10 +354,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
   })),
@@ -381,10 +391,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
   }))

package/modern/SparkLineChart/SparkLineChart.js

@@ -247,10 +247,12 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     tickFontSize: PropTypes.number,
     tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
     tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
     tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func
   })

package/modern/hooks/useAxisEvents.js

@@ -43,7 +43,8 @@ export const useAxisEvents = disableAxisListener => {
       }
       const {
         scale,
-        data: axisData
+        data: axisData,
+        reverse
       } = axisConfig;
       if (!isBandScale(scale)) {
         const value = scale.invert(mouseValue);
@@ -76,6 +77,13 @@ export const useAxisEvents = disableAxisListener => {
       if (dataIndex < 0 || dataIndex >= axisData.length) {
         return null;
       }
+      if (reverse) {
+        const reverseIndex = axisData.length - 1 - dataIndex;
+        return {
+          index: reverseIndex,
+          value: axisData[reverseIndex]
+        };
+      }
       return {
         index: dataIndex,
         value: axisData[dataIndex]

package/modern/hooks/useTicks.js

@@ -13,12 +13,20 @@ export function getTickNumber(params) {
   const defaultizedTickNumber = tickNumber ?? Math.floor(Math.abs(range[1] - range[0]) / 50);
   return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber));
 }
+const offsetRatio = {
+  start: 0,
+  extremities: 0,
+  end: 1,
+  middle: 0.5
+};
 export function useTicks(options) {
   const {
     scale,
     tickNumber,
     valueFormatter,
-    tickInterval
+    tickInterval,
+    tickPlacement = 'extremities',
+    tickLabelPlacement = 'middle'
   } = options;
   return React.useMemo(() => {
     // band scale
@@ -28,21 +36,25 @@ export function useTicks(options) {
         // scale type = 'band'
         return [...domain.map(value => ({
           value,
-          formattedValue: valueFormatter?.(value) ?? `${value}`,
-          offset: scale(value) - (scale.step() - scale.bandwidth()) / 2,
-          labelOffset: scale.step() / 2
-        })), {
+          formattedValue: valueFormatter?.(value, {
+            location: 'tick'
+          }) ?? `${value}`,
+          offset: scale(value) - (scale.step() - scale.bandwidth()) / 2 + offsetRatio[tickPlacement] * scale.step(),
+          labelOffset: tickLabelPlacement === 'tick' ? 0 : scale.step() * (offsetRatio[tickLabelPlacement] - offsetRatio[tickPlacement])
+        })), ...(tickPlacement === 'extremities' ? [{
           formattedValue: undefined,
           offset: scale.range()[1],
           labelOffset: 0
-        }];
+        }] : [])];
       }
 
       // scale type = 'point'
       const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
       return filteredDomain.map(value => ({
         value,
-        formattedValue: valueFormatter?.(value) ?? `${value}`,
+        formattedValue: valueFormatter?.(value, {
+          location: 'tick'
+        }) ?? `${value}`,
         offset: scale(value),
         labelOffset: 0
       }));
@@ -50,9 +62,11 @@ export function useTicks(options) {
     const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);
     return ticks.map(value => ({
       value,
-      formattedValue: valueFormatter?.(value) ?? scale.tickFormat(tickNumber)(value),
+      formattedValue: valueFormatter?.(value, {
+        location: 'tick'
+      }) ?? scale.tickFormat(tickNumber)(value),
       offset: scale(value),
       labelOffset: 0
     }));
-  }, [tickNumber, scale, valueFormatter, tickInterval]);
+  }, [scale, tickInterval, tickNumber, valueFormatter, tickPlacement, tickLabelPlacement]);
 }

package/modern/index.js

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

package/modern/internals/useIsRTL.js

@@ -0,0 +1,5 @@
+import { useTheme } from '@mui/material/styles';
+export const useIsRTL = () => {
+  const theme = useTheme();
+  return theme.direction === 'rtl';
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "7.0.0-beta.5",
+  "version": "7.0.0-beta.7",
   "description": "The community edition of the charts components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -28,7 +28,7 @@
     "directory": "packages/x-charts"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.9",
+    "@babel/runtime": "^7.24.0",
     "@mui/base": "^5.0.0-beta.36",
     "@mui/system": "^5.15.9",
     "@mui/utils": "^5.15.9",