@mui/x-charts 8.0.0-beta.2 → 8.0.0

package/ChartsTooltip/chartsTooltipClasses.js

@@ -13,7 +13,7 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 function getChartsTooltipUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiChartsTooltip', slot);
 }
-const chartsTooltipClasses = exports.chartsTooltipClasses = (0, _generateUtilityClasses.default)('MuiChartsTooltip', ['root', 'paper', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell', 'axisValueCell']);
+const chartsTooltipClasses = exports.chartsTooltipClasses = (0, _generateUtilityClasses.default)('MuiChartsTooltip', ['root', 'paper', 'table', 'row', 'cell', 'mark', 'markContainer', 'labelCell', 'valueCell', 'axisValueCell']);
 const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
@@ -22,7 +22,7 @@ const useUtilityClasses = classes => {
     row: ['row'],
     cell: ['cell'],
     mark: ['mark'],
-    markCell: ['markCell'],
+    markContainer: ['markContainer'],
     labelCell: ['labelCell'],
     valueCell: ['valueCell'],
     axisValueCell: ['axisValueCell']

package/ChartsTooltip/index.d.ts

@@ -5,7 +5,10 @@ export { getChartsTooltipUtilityClass, chartsTooltipClasses } from "./chartsTool
 export * from "./ChartsAxisTooltipContent.js";
 export * from "./ChartsItemTooltipContent.js";
 export * from "./ChartsTooltipTable.js";
-export * from "./useItemTooltip.js";
+export type { ItemTooltip } from '../internals/plugins/models/seriesConfig/tooltipGetter.types';
+export type { UseItemTooltipReturnValue, UseRadarItemTooltipReturnValue } from './useItemTooltip';
+export { useItemTooltip, useRadarItemTooltip } from "./useItemTooltip.js";
 export * from "./useAxisTooltip.js";
+export * from "./useAxesTooltip.js";
 export { useMouseTracker } from "./utils.js";
 export * from "./ChartTooltip.types.js";

package/ChartsTooltip/index.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {
   getChartsTooltipUtilityClass: true,
   chartsTooltipClasses: true,
+  useItemTooltip: true,
+  useRadarItemTooltip: true,
   useMouseTracker: true
 };
 Object.defineProperty(exports, "chartsTooltipClasses", {
@@ -20,12 +22,24 @@ Object.defineProperty(exports, "getChartsTooltipUtilityClass", {
     return _chartsTooltipClasses.getChartsTooltipUtilityClass;
   }
 });
+Object.defineProperty(exports, "useItemTooltip", {
+  enumerable: true,
+  get: function () {
+    return _useItemTooltip.useItemTooltip;
+  }
+});
 Object.defineProperty(exports, "useMouseTracker", {
   enumerable: true,
   get: function () {
     return _utils.useMouseTracker;
   }
 });
+Object.defineProperty(exports, "useRadarItemTooltip", {
+  enumerable: true,
+  get: function () {
+    return _useItemTooltip.useRadarItemTooltip;
+  }
+});
 var _ChartsTooltip = require("./ChartsTooltip");
 Object.keys(_ChartsTooltip).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -88,26 +102,27 @@ Object.keys(_ChartsTooltipTable).forEach(function (key) {
   });
 });
 var _useItemTooltip = require("./useItemTooltip");
-Object.keys(_useItemTooltip).forEach(function (key) {
+var _useAxisTooltip = require("./useAxisTooltip");
+Object.keys(_useAxisTooltip).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _useItemTooltip[key]) return;
+  if (key in exports && exports[key] === _useAxisTooltip[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _useItemTooltip[key];
+      return _useAxisTooltip[key];
     }
   });
 });
-var _useAxisTooltip = require("./useAxisTooltip");
-Object.keys(_useAxisTooltip).forEach(function (key) {
+var _useAxesTooltip = require("./useAxesTooltip");
+Object.keys(_useAxesTooltip).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _useAxisTooltip[key]) return;
+  if (key in exports && exports[key] === _useAxesTooltip[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _useAxisTooltip[key];
+      return _useAxesTooltip[key];
     }
   });
 });

package/ChartsTooltip/useAxesTooltip.d.ts

@@ -0,0 +1,7 @@
+import { UseAxisTooltipParams, UseAxisTooltipReturnValue } from "./useAxisTooltip.js";
+type UseAxesTooltipParams = Omit<UseAxisTooltipParams, 'multipleAxes'>;
+/**
+ * Returns the axes to display in the tooltip and the series item related to them.
+ */
+export declare function useAxesTooltip(params?: UseAxesTooltipParams): UseAxisTooltipReturnValue[] | null;
+export {};

package/ChartsTooltip/useAxesTooltip.js

@@ -0,0 +1,18 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAxesTooltip = useAxesTooltip;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _useAxisTooltip = require("./useAxisTooltip");
+/**
+ * Returns the axes to display in the tooltip and the series item related to them.
+ */
+function useAxesTooltip(params) {
+  return (0, _useAxisTooltip.useAxisTooltip)((0, _extends2.default)({}, params, {
+    multipleAxes: true
+  }));
+}

package/ChartsTooltip/useAxisTooltip.d.ts

@@ -1,14 +1,28 @@
 import { SeriesId } from "../models/seriesType/common.js";
-import { CartesianChartSeriesType, ChartsSeriesConfig } from "../models/seriesType/config.js";
+import { CartesianChartSeriesType, ChartsSeriesConfig, PolarChartSeriesType } from "../models/seriesType/config.js";
+import { AxisDefaultized, PolarAxisDefaultized, AxisId } from "../models/axis.js";
 import { ChartsLabelMarkProps } from "../ChartsLabel/index.js";
-export interface UseAxisTooltipReturnValue<SeriesT extends CartesianChartSeriesType = CartesianChartSeriesType, AxisValueT extends string | number | Date = string | number | Date> {
-  axisDirection: 'x' | 'y';
-  dataIndex: number;
-  seriesItems: SeriesItem<SeriesT>[];
+export interface UseAxisTooltipReturnValue<SeriesT extends CartesianChartSeriesType | PolarChartSeriesType = CartesianChartSeriesType | PolarChartSeriesType, AxisValueT extends string | number | Date = string | number | Date> {
+  axisDirection: SeriesT extends CartesianChartSeriesType ? 'x' | 'y' : 'rotation' | 'radius';
+  mainAxis: SeriesT extends CartesianChartSeriesType ? AxisDefaultized : PolarAxisDefaultized;
+  axisId: AxisId;
   axisValue: AxisValueT;
   axisFormattedValue: string;
+  dataIndex: number;
+  seriesItems: SeriesItem<SeriesT>[];
+}
+export interface UseAxisTooltipParams {
+  /**
+   * If `true`, the hook returns an array with an object per active axis.
+   */
+  multipleAxes?: boolean;
+  /**
+   * The axis directions to consider.
+   * If not defined, all directions are considered
+   */
+  directions?: ('x' | 'y' | 'rotation')[];
 }
-interface SeriesItem<T extends CartesianChartSeriesType> {
+interface SeriesItem<T extends CartesianChartSeriesType | PolarChartSeriesType> {
   seriesId: SeriesId;
   color: string;
   value: ChartsSeriesConfig[T]['valueType'];
@@ -16,5 +30,13 @@ interface SeriesItem<T extends CartesianChartSeriesType> {
   formattedLabel: string | null;
   markType: ChartsLabelMarkProps['type'];
 }
-export declare function useAxisTooltip(): UseAxisTooltipReturnValue | null;
+/**
+ * @deprecated Use `useAxesTooltip` instead.
+ */
+export declare function useAxisTooltip(params: UseAxisTooltipParams & {
+  multipleAxes: true;
+}): UseAxisTooltipReturnValue[] | null;
+export declare function useAxisTooltip(params?: UseAxisTooltipParams & {
+  multipleAxes?: false;
+}): UseAxisTooltipReturnValue | null;
 export {};

package/ChartsTooltip/useAxisTooltip.js

@@ -15,12 +15,42 @@ var _utils = require("./utils");
 var _useAxis = require("../hooks/useAxis");
 var _useZAxis = require("../hooks/useZAxis");
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
-function useAxisTooltip() {
+var _useChartPolarInteraction = require("../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors");
+var _isPolar = require("../internals/isPolar");
+function defaultAxisTooltipConfig(axis, dataIndex, axisDirection) {
+  const axisValue = axis.data?.[dataIndex] ?? null;
+  const axisFormatter = axis.valueFormatter ?? (v => axis.scaleType === 'utc' ? (0, _utils.utcFormatter)(v) : v.toLocaleString());
+  const axisFormattedValue = axisFormatter(axisValue, {
+    location: 'tooltip',
+    scale: axis.scale
+  });
+  return {
+    axisDirection,
+    axisId: axis.id,
+    mainAxis: axis,
+    dataIndex,
+    axisValue,
+    axisFormattedValue,
+    seriesItems: []
+  };
+}
+
+/**
+ * @deprecated Use `useAxesTooltip` instead.
+ */
+
+function useAxisTooltip(params = {}) {
+  const {
+    multipleAxes,
+    directions
+  } = params;
   const defaultXAxis = (0, _useAxis.useXAxis)();
   const defaultYAxis = (0, _useAxis.useYAxis)();
-  const xAxisHasData = defaultXAxis.data !== undefined && defaultXAxis.data.length !== 0;
+  const defaultRotationAxis = (0, _useAxis.useRotationAxis)();
   const store = (0, _useStore.useStore)();
-  const axisData = (0, _useSelector.useSelector)(store, xAxisHasData ? _useChartCartesianAxis.selectorChartsInteractionXAxis : _useChartCartesianAxis.selectorChartsInteractionYAxis);
+  const tooltipXAxes = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsInteractionTooltipXAxes);
+  const tooltipYAxes = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsInteractionTooltipYAxes);
+  const tooltipRotationAxes = (0, _useSelector.useSelector)(store, _useChartPolarInteraction.selectorChartsInteractionTooltipRotationAxes);
   const series = (0, _useSeries.useSeries)();
   const {
     xAxis
@@ -32,62 +62,121 @@ function useAxisTooltip() {
     zAxis,
     zAxisIds
   } = (0, _useZAxis.useZAxes)();
+  const {
+    rotationAxis
+  } = (0, _useAxis.useRotationAxes)();
   const colorProcessors = (0, _useColorProcessor.useColorProcessor)();
-  if (axisData === null) {
+  if (tooltipXAxes.length === 0 && tooltipYAxes.length === 0 && tooltipRotationAxes.length === 0) {
     return null;
   }
-  const {
-    index: dataIndex,
-    value: axisValue
-  } = axisData;
-  const USED_AXIS_ID = xAxisHasData ? defaultXAxis.id : defaultYAxis.id;
-  const usedAxis = xAxisHasData ? defaultXAxis : defaultYAxis;
-  const relevantSeries = Object.keys(series).filter(_isCartesian.isCartesianSeriesType).flatMap(seriesType => {
+  const tooltipAxes = [];
+  if (directions === undefined || directions.includes('x')) {
+    tooltipXAxes.forEach(({
+      axisId,
+      dataIndex
+    }) => {
+      if (!multipleAxes && tooltipAxes.length > 1) {
+        return;
+      }
+      tooltipAxes.push(defaultAxisTooltipConfig(xAxis[axisId], dataIndex, 'x'));
+    });
+  }
+  if (directions === undefined || directions.includes('y')) {
+    tooltipYAxes.forEach(({
+      axisId,
+      dataIndex
+    }) => {
+      if (!multipleAxes && tooltipAxes.length > 1) {
+        return;
+      }
+      tooltipAxes.push(defaultAxisTooltipConfig(yAxis[axisId], dataIndex, 'y'));
+    });
+  }
+  if (directions === undefined || directions.includes('rotation')) {
+    tooltipRotationAxes.forEach(({
+      axisId,
+      dataIndex
+    }) => {
+      if (!multipleAxes && tooltipAxes.length > 1) {
+        return;
+      }
+      tooltipAxes.push(defaultAxisTooltipConfig(rotationAxis[axisId], dataIndex, 'rotation'));
+    });
+  }
+  Object.keys(series).filter(_isCartesian.isCartesianSeriesType).forEach(seriesType => {
     const seriesOfType = series[seriesType];
     if (!seriesOfType) {
       return [];
     }
-    return seriesOfType.seriesOrder.map(seriesId => {
+    return seriesOfType.seriesOrder.forEach(seriesId => {
       const seriesToAdd = seriesOfType.series[seriesId];
-      const providedXAxisId = seriesToAdd.xAxisId;
-      const providedYAxisId = seriesToAdd.yAxisId;
-      const axisKey = xAxisHasData ? providedXAxisId : providedYAxisId;
-
+      const providedXAxisId = seriesToAdd.xAxisId ?? defaultXAxis.id;
+      const providedYAxisId = seriesToAdd.yAxisId ?? defaultYAxis.id;
+      const tooltipItemIndex = tooltipAxes.findIndex(({
+        axisDirection,
+        axisId
+      }) => axisDirection === 'x' && axisId === providedXAxisId || axisDirection === 'y' && axisId === providedYAxisId);
       // Test if the series uses the default axis
-      if (axisKey === undefined || axisKey === USED_AXIS_ID) {
-        const xAxisId = providedXAxisId ?? defaultXAxis.id;
-        const yAxisId = providedYAxisId ?? defaultYAxis.id;
+      if (tooltipItemIndex >= 0) {
         const zAxisId = 'zAxisId' in seriesToAdd ? seriesToAdd.zAxisId : zAxisIds[0];
-        const color = colorProcessors[seriesType]?.(seriesToAdd, xAxis[xAxisId], yAxis[yAxisId], zAxisId ? zAxis[zAxisId] : undefined)(dataIndex) ?? '';
+        const {
+          dataIndex
+        } = tooltipAxes[tooltipItemIndex];
+        const color = colorProcessors[seriesType]?.(seriesToAdd, xAxis[providedXAxisId], yAxis[providedYAxisId], zAxisId ? zAxis[zAxisId] : undefined)(dataIndex) ?? '';
         const value = seriesToAdd.data[dataIndex] ?? null;
         const formattedValue = seriesToAdd.valueFormatter(value, {
           dataIndex
         });
         const formattedLabel = (0, _getLabel.getLabel)(seriesToAdd.label, 'tooltip') ?? null;
-        return {
+        tooltipAxes[tooltipItemIndex].seriesItems.push({
           seriesId,
           color,
           value,
           formattedValue,
           formattedLabel,
           markType: seriesToAdd.labelMarkType
-        };
+        });
       }
-      return undefined;
     });
-  }).filter(function truthy(item) {
-    return Boolean(item);
   });
-  const axisFormatter = usedAxis.valueFormatter ?? (v => usedAxis.scaleType === 'utc' ? (0, _utils.utcFormatter)(v) : v.toLocaleString());
-  const axisFormattedValue = axisFormatter(axisValue, {
-    location: 'tooltip',
-    scale: usedAxis.scale
+  Object.keys(series).filter(_isPolar.isPolarSeriesType).forEach(seriesType => {
+    const seriesOfType = series[seriesType];
+    if (!seriesOfType) {
+      return [];
+    }
+    return seriesOfType.seriesOrder.forEach(seriesId => {
+      const seriesToAdd = seriesOfType.series[seriesId];
+      const providedRotationAxisId =
+      // @ts-expect-error Should be fixed when we introduce a polar series with a rotationAxisId
+      seriesToAdd.rotationAxisId ?? defaultRotationAxis?.id;
+      const tooltipItemIndex = tooltipAxes.findIndex(({
+        axisDirection,
+        axisId
+      }) => axisDirection === 'rotation' && axisId === providedRotationAxisId);
+      // Test if the series uses the default axis
+      if (tooltipItemIndex >= 0) {
+        const {
+          dataIndex
+        } = tooltipAxes[tooltipItemIndex];
+        const color = colorProcessors[seriesType]?.(seriesToAdd)(dataIndex) ?? '';
+        const value = seriesToAdd.data[dataIndex] ?? null;
+        const formattedValue = seriesToAdd.valueFormatter(value, {
+          dataIndex
+        });
+        const formattedLabel = (0, _getLabel.getLabel)(seriesToAdd.label, 'tooltip') ?? null;
+        tooltipAxes[tooltipItemIndex].seriesItems.push({
+          seriesId,
+          color,
+          value,
+          formattedValue,
+          formattedLabel,
+          markType: seriesToAdd.labelMarkType
+        });
+      }
+    });
   });
-  return {
-    axisDirection: xAxisHasData ? 'x' : 'y',
-    dataIndex,
-    seriesItems: relevantSeries,
-    axisValue,
-    axisFormattedValue
-  };
+  if (!multipleAxes) {
+    return tooltipAxes.length === 0 ? tooltipAxes[0] : null;
+  }
+  return tooltipAxes;
 }

package/ChartsTooltip/useItemTooltip.d.ts

@@ -1,12 +1,16 @@
-import { ChartItemIdentifier, ChartSeriesType, ChartsSeriesConfig } from "../models/seriesType/config.js";
-import { ChartsLabelMarkProps } from "../ChartsLabel/index.js";
-export interface ItemTooltip<T extends ChartSeriesType> {
-  identifier: ChartItemIdentifier<T>;
-  color: string;
-  label: string | undefined;
-  value: ChartsSeriesConfig[T]['valueType'];
-  formattedValue: string | null;
-  markType: ChartsLabelMarkProps['type'];
-}
+import { ChartSeriesType } from "../models/seriesType/config.js";
+import { ItemTooltip, ItemTooltipWithMultipleValues } from "../internals/plugins/models/seriesConfig/tooltipGetter.types.js";
 export type UseItemTooltipReturnValue<T extends ChartSeriesType> = ItemTooltip<T>;
-export declare function useItemTooltip<T extends ChartSeriesType>(): UseItemTooltipReturnValue<T> | null;
+export type UseRadarItemTooltipReturnValue = ItemTooltipWithMultipleValues<'radar'>;
+export declare function useInternalItemTooltip<T extends ChartSeriesType>(): (T extends 'radar' ? ItemTooltipWithMultipleValues<T> : ItemTooltip<T>) | null;
+/**
+ * Returns a config object when the tooltip contains a single item to display.
+ * Some specific charts like radar need more complex structure. Use specific hook like `useRadarItemTooltip` for them.
+ * @returns The tooltip item config
+ */
+export declare const useItemTooltip: <T extends Exclude<ChartSeriesType, "radar">>() => UseItemTooltipReturnValue<T> | null;
+/**
+ * Contains an object per value with their content and the label of the associated metric.
+ * @returns The tooltip item configs
+ */
+export declare const useRadarItemTooltip: () => UseRadarItemTooltipReturnValue | null;

package/ChartsTooltip/useItemTooltip.js

@@ -4,7 +4,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useItemTooltip = useItemTooltip;
+exports.useInternalItemTooltip = useInternalItemTooltip;
+exports.useRadarItemTooltip = exports.useItemTooltip = void 0;
 var _useSeries = require("../hooks/useSeries");
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _useSelector = require("../internals/store/useSelector");
@@ -12,7 +13,7 @@ var _useStore = require("../internals/store/useStore");
 var _useAxis = require("../hooks/useAxis");
 var _useZAxis = require("../hooks/useZAxis");
 var _useChartSeries = require("../internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors");
-function useItemTooltip() {
+function useInternalItemTooltip() {
   const store = (0, _useStore.useStore)();
   const identifier = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionItem);
   const seriesConfig = (0, _useSelector.useSelector)(store, _useChartSeries.selectorChartSeriesConfig);
@@ -29,17 +30,63 @@ function useItemTooltip() {
     zAxis,
     zAxisIds
   } = (0, _useZAxis.useZAxes)();
+  const {
+    rotationAxis,
+    rotationAxisIds
+  } = (0, _useAxis.useRotationAxes)();
+  const {
+    radiusAxis,
+    radiusAxisIds
+  } = (0, _useAxis.useRadiusAxes)();
   const xAxisId = series.xAxisId ?? xAxisIds[0];
   const yAxisId = series.yAxisId ?? yAxisIds[0];
   const zAxisId = series.zAxisId ?? zAxisIds[0];
-  if (!identifier || identifier.dataIndex === undefined) {
+  const rotationAxisId = series.rotationAxisId ?? rotationAxisIds[0];
+  const radiusAxisId = series.radiusAxisId ?? radiusAxisIds[0];
+  if (!identifier) {
+    return null;
+  }
+  const itemSeries = series[identifier.type]?.series[identifier.seriesId];
+  if (!itemSeries) {
     return null;
   }
-  const itemSeries = series[identifier.type].series[identifier.seriesId];
   const getColor = seriesConfig[itemSeries.type].colorProcessor?.(itemSeries, xAxisId && xAxis[xAxisId], yAxisId && yAxis[yAxisId], zAxisId && zAxis[zAxisId]) ?? (() => '');
+  const axesConfig = {};
+  if (xAxisId !== undefined) {
+    axesConfig.x = xAxis[xAxisId];
+  }
+  if (yAxisId !== undefined) {
+    axesConfig.y = yAxis[yAxisId];
+  }
+  if (rotationAxisId !== undefined) {
+    axesConfig.rotation = rotationAxis[rotationAxisId];
+  }
+  if (radiusAxisId !== undefined) {
+    axesConfig.radius = radiusAxis[radiusAxisId];
+  }
   return seriesConfig[itemSeries.type].tooltipGetter({
     series: itemSeries,
+    axesConfig,
     getColor,
     identifier
   });
-}
+}
+
+/**
+ * Returns a config object when the tooltip contains a single item to display.
+ * Some specific charts like radar need more complex structure. Use specific hook like `useRadarItemTooltip` for them.
+ * @returns The tooltip item config
+ */
+const useItemTooltip = () => {
+  return useInternalItemTooltip();
+};
+
+/**
+ * Contains an object per value with their content and the label of the associated metric.
+ * @returns The tooltip item configs
+ */
+exports.useItemTooltip = useItemTooltip;
+const useRadarItemTooltip = () => {
+  return useInternalItemTooltip();
+};
+exports.useRadarItemTooltip = useRadarItemTooltip;

package/ChartsXAxis/ChartsXAxis.js

@@ -118,7 +118,7 @@ function getVisibleLabels(xTicks, {
     return true;
   }));
 }
-function shortenLabels(visibleLabels, drawingArea, maxHeight, tickLabelStyle) {
+function shortenLabels(visibleLabels, drawingArea, maxHeight, isRtl, tickLabelStyle) {
   const shortenedLabels = new Map();
   const angle = (0, _clampAngle.clampAngle)(tickLabelStyle?.angle ?? 0);
 
@@ -139,6 +139,9 @@ function shortenLabels(visibleLabels, drawingArea, maxHeight, tickLabelStyle) {
   if (angle > 90 && angle < 270) {
     [leftBoundFactor, rightBoundFactor] = [rightBoundFactor, leftBoundFactor];
   }
+  if (isRtl) {
+    [leftBoundFactor, rightBoundFactor] = [rightBoundFactor, leftBoundFactor];
+  }
   for (const item of visibleLabels) {
     if (item.formattedValue) {
       // That maximum width of the tick depends on its proximity to the axis bounds.
@@ -300,7 +303,7 @@ function ChartsXAxis(inProps) {
 
   /* If there's an axis title, the tick labels have less space to render  */
   const tickLabelsMaxHeight = Math.max(0, axisHeight - (label ? labelHeight + AXIS_LABEL_TICK_LABEL_GAP : 0) - tickSize - TICK_LABEL_GAP);
-  const tickLabels = isHydrated ? shortenLabels(visibleLabels, drawingArea, tickLabelsMaxHeight, axisTickLabelProps.style) : new Map(Array.from(visibleLabels).map(item => [item, item.formattedValue]));
+  const tickLabels = isHydrated ? shortenLabels(visibleLabels, drawingArea, tickLabelsMaxHeight, isRtl, axisTickLabelProps.style) : new Map(Array.from(visibleLabels).map(item => [item, item.formattedValue]));
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(XAxisRoot, {
     transform: `translate(0, ${position === 'bottom' ? top + height + offset : top - offset})`,
     className: classes.root,