@mui/x-charts 6.0.0-alpha.15 → 6.0.0-alpha.16

package/modern/BarChart/BarPlot.js

@@ -1,11 +1,14 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useTransition } from '@react-spring/web';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { BarElement } from './BarElement';
 import { isBandScaleConfig } from '../models/axis';
-
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Solution of the equations
  * W = barWidth * N + offset * (N-1)
@@ -15,7 +18,6 @@ import { isBandScaleConfig } from '../models/axis';
  * @param gapRatio The ratio of the gap between bars over the bar width.
  * @returns The bar width and the offset between bars.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 function getBandSize({
   bandWidth: W,
   numberOfGroups: N,
@@ -34,12 +36,13 @@ function getBandSize({
     offset
   };
 }
-function BarPlot(props) {
-  const seriesData = React.useContext(SeriesContext).bar;
+const useCompletedData = () => {
+  const seriesData = React.useContext(SeriesContext).bar ?? {
+    series: {},
+    stackingGroups: [],
+    seriesOrder: []
+  };
   const axisData = React.useContext(CartesianContext);
-  if (seriesData === undefined) {
-    return null;
-  }
   const {
     series,
     stackingGroups
@@ -52,66 +55,142 @@ function BarPlot(props) {
   } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
-  return /*#__PURE__*/_jsx(React.Fragment, {
-    children: stackingGroups.flatMap(({
-      ids: groupIds
-    }, groupIndex) => {
-      return groupIds.flatMap(seriesId => {
-        const xAxisKey = series[seriesId].xAxisKey ?? defaultXAxisId;
-        const yAxisKey = series[seriesId].yAxisKey ?? defaultYAxisId;
-        const xAxisConfig = xAxis[xAxisKey];
-        const yAxisConfig = yAxis[yAxisKey];
-        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 data = stackingGroups.flatMap(({
+    ids: groupIds
+  }, groupIndex) => {
+    return groupIds.flatMap(seriesId => {
+      const xAxisKey = series[seriesId].xAxisKey ?? defaultXAxisId;
+      const yAxisKey = series[seriesId].yAxisKey ?? defaultYAxisId;
+      const xAxisConfig = xAxis[xAxisKey];
+      const yAxisConfig = yAxis[yAxisKey];
+      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}"`);
         }
-        const xScale = xAxisConfig.scale;
-        const yScale = yAxisConfig.scale;
-        const bandWidth = baseScaleConfig.scale.bandwidth();
-        const {
-          barWidth,
-          offset
-        } = getBandSize({
-          bandWidth,
-          numberOfGroups: stackingGroups.length,
-          gapRatio: baseScaleConfig.barGapRatio
-        });
-        const barOffset = groupIndex * (barWidth + offset);
-        const {
-          stackedData,
-          color
-        } = series[seriesId];
-        return stackedData.map((values, dataIndex) => {
-          const baseline = Math.min(...values);
-          const value = Math.max(...values);
-          return /*#__PURE__*/_jsx(BarElement, _extends({
-            id: seriesId,
-            dataIndex: dataIndex,
-            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}`);
-        });
+        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;
+      const bandWidth = baseScaleConfig.scale.bandwidth();
+      const {
+        barWidth,
+        offset
+      } = getBandSize({
+        bandWidth,
+        numberOfGroups: stackingGroups.length,
+        gapRatio: baseScaleConfig.barGapRatio
+      });
+      const barOffset = groupIndex * (barWidth + offset);
+      const {
+        stackedData,
+        color
+      } = series[seriesId];
+      return stackedData.map((values, dataIndex) => {
+        const bottom = Math.min(...values);
+        const top = Math.max(...values);
+        return {
+          bottom,
+          top,
+          seriesId,
+          dataIndex,
+          layout: series[seriesId].layout,
+          x: verticalLayout ? xScale(xAxis[xAxisKey].data?.[dataIndex]) + barOffset : xScale(bottom),
+          y: verticalLayout ? yScale(top) : yScale(yAxis[yAxisKey].data?.[dataIndex]) + barOffset,
+          xOrigin: xScale(0),
+          yOrigin: yScale(0),
+          height: verticalLayout ? Math.abs(yScale(bottom) - yScale(top)) : barWidth,
+          width: verticalLayout ? barWidth : Math.abs(xScale(bottom) - xScale(top)),
+          color,
+          highlightScope: series[seriesId].highlightScope
+        };
       });
-    })
+    });
+  });
+  return data;
+};
+const getOutStyle = ({
+  layout,
+  yOrigin,
+  x,
+  width,
+  y,
+  xOrigin,
+  height
+}) => _extends({}, layout === 'vertical' ? {
+  y: yOrigin,
+  x,
+  height: 0,
+  width
+} : {
+  y,
+  x: xOrigin,
+  height,
+  width: 0
+});
+const getInStyle = ({
+  x,
+  width,
+  y,
+  height
+}) => ({
+  y,
+  x,
+  height,
+  width
+});
+
+/**
+ * Demos:
+ *
+ * - [Bars](https://mui.com/x/react-charts/bars/)
+ * - [Bar demonstration](https://mui.com/x/react-charts/bar-demo/)
+ * - [Stacking](https://mui.com/x/react-charts/stacking/)
+ *
+ * API:
+ *
+ * - [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
+ */
+function BarPlot(props) {
+  const completedData = useCompletedData();
+  const {
+      skipAnimation
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const transition = useTransition(completedData, {
+    keys: bar => `${bar.seriesId}-${bar.dataIndex}`,
+    from: getOutStyle,
+    leave: getOutStyle,
+    enter: getInStyle,
+    update: getInStyle,
+    immediate: skipAnimation
+  });
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: transition((style, {
+      seriesId,
+      dataIndex,
+      color,
+      highlightScope
+    }) => /*#__PURE__*/_jsx(BarElement, _extends({
+      id: seriesId,
+      dataIndex: dataIndex,
+      highlightScope: highlightScope,
+      color: color
+    }, other, {
+      style: style
+    })))
   });
 }
 process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
@@ -119,6 +198,11 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * If `true`, animations are skiped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/modern/ChartContainer/index.js

@@ -3,6 +3,7 @@ import useForkRef from '@mui/utils/useForkRef';
 import { DrawingProvider } from '../context/DrawingProvider';
 import { SeriesContextProvider } from '../context/SeriesContextProvider';
 import { InteractionProvider } from '../context/InteractionProvider';
+import { useReducedMotion } from '../hooks/useReducedMotion';
 import { ChartsSurface } from '../ChartsSurface';
 import { CartesianContextProvider } from '../context/CartesianContextProvider';
 import { HighlightProvider } from '../context/HighlightProvider';
@@ -25,6 +26,8 @@ export const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContai
   } = props;
   const svgRef = React.useRef(null);
   const handleRef = useForkRef(ref, svgRef);
+  useReducedMotion(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion)
+
   return /*#__PURE__*/_jsx(DrawingProvider, {
     width: width,
     height: height,

package/modern/ChartsAxis/ChartsAxis.js

@@ -97,11 +97,15 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['bottom', 'top']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -120,11 +124,15 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['left', 'right']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -143,11 +151,15 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['left', 'right']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,
@@ -176,11 +188,15 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     fill: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     position: PropTypes.oneOf(['bottom', 'top']),
     slotProps: PropTypes.object,
     slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelStyle: PropTypes.object,
     tickMaxStep: PropTypes.number,
     tickMinStep: PropTypes.number,
     tickNumber: PropTypes.number,

package/modern/ChartsLegend/ChartsLegend.js

@@ -1,6 +1,7 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["label"];
+const _excluded = ["rotate", "dominantBaseline"],
+  _excluded2 = ["label"];
 import * as React from 'react';
 import { useSlotProps } from '@mui/base/utils';
 import { NoSsr } from '@mui/base/NoSsr';
@@ -75,11 +76,16 @@ function DefaultChartsLegend(props) {
   const theme = useTheme();
   const labelStyle = React.useMemo(() => _extends({}, theme.typography.subtitle1, {
     color: 'inherit',
+    dominantBaseline: 'central',
+    textAnchor: 'start',
     fill: (theme.vars || theme).palette.text.primary,
     lineHeight: 1
-  }, inLabelStyle), [inLabelStyle, theme]);
+  }, inLabelStyle),
+  // To say to TS that the dominantBaseline and textAnchor are correct
+  [inLabelStyle, theme]);
   const padding = React.useMemo(() => getStandardizedPadding(paddingProps), [paddingProps]);
-  const getItemSpace = React.useCallback((label, style) => {
+  const getItemSpace = React.useCallback((label, inStyle = {}) => {
+    const style = _objectWithoutPropertiesLoose(inStyle, _excluded);
     const linesSize = getWordsByLines({
       style,
       needsComputation: true,
@@ -112,7 +118,7 @@ function DefaultChartsLegend(props) {
       let {
           label
         } = _ref,
-        other = _objectWithoutPropertiesLoose(_ref, _excluded);
+        other = _objectWithoutPropertiesLoose(_ref, _excluded2);
       const itemSpace = getItemSpace(label, labelStyle);
       const rep = _extends({}, other, {
         label,
@@ -219,8 +225,6 @@ function DefaultChartsLegend(props) {
           fill: color
         }), /*#__PURE__*/_jsx(ChartsText, {
           style: labelStyle,
-          dominantBaseline: "central",
-          textAnchor: "start",
           text: label,
           x: itemMarkWidth + markGap,
           y: 0

package/modern/ChartsXAxis/ChartsXAxis.js

@@ -11,7 +11,9 @@ import { DrawingContext } from '../context/DrawingProvider';
 import useTicks from '../hooks/useTicks';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
 import { AxisRoot } from '../internals/components/AxisSharedComponents';
-import { ChartsText } from '../internals/components/ChartsText';
+import { ChartsText, getWordsByLines } from '../internals/components/ChartsText';
+import { getMinXTranslation } from '../internals/geometry';
+import { useMounted } from '../hooks/useMounted';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -29,12 +31,64 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getAxisUtilityClass, classes);
 };
+function addLabelDimension(xTicks, {
+  tickLabelStyle: style,
+  tickLabelInterval,
+  isMounted
+}) {
+  const withDimension = xTicks.map(tick => {
+    if (!isMounted || tick.formattedValue === undefined) {
+      return _extends({}, tick, {
+        width: 0,
+        height: 0
+      });
+    }
+    const tickSizes = getWordsByLines({
+      style,
+      needsComputation: true,
+      text: tick.formattedValue
+    });
+    return _extends({}, tick, {
+      width: Math.max(...tickSizes.map(size => size.width)),
+      height: Math.max(tickSizes.length * tickSizes[0].height)
+    });
+  });
+  if (typeof tickLabelInterval === 'function') {
+    return withDimension.map((item, index) => _extends({}, item, {
+      skipLabel: !tickLabelInterval(item.value, index)
+    }));
+  }
+
+  // Filter label to avoid overlap
+  let textStart = 0;
+  let textEnd = 0;
+  return withDimension.map((item, labelIndex) => {
+    const {
+      width,
+      offset,
+      labelOffset,
+      height
+    } = item;
+    const distance = getMinXTranslation(width, height, style?.angle);
+    const textPosition = offset + labelOffset;
+    const gapRatio = 1.2; // Ratio applied to the minimal distance to add some margin.
+
+    textStart = textPosition - gapRatio * distance / 2;
+    if (labelIndex > 0 && textStart < textEnd) {
+      // Except for the first label, we skip all label that overlap with the last accepted.
+      // Notice that the early return prevents `textEnd` from being updated.
+      return _extends({}, item, {
+        skipLabel: true
+      });
+    }
+    textEnd = textPosition + gapRatio * distance / 2;
+    return item;
+  });
+}
 const defaultProps = {
   position: 'bottom',
   disableLine: false,
   disableTicks: false,
-  tickFontSize: 12,
-  labelFontSize: 14,
   tickSize: 6
 };
 function ChartsXAxis(inProps) {
@@ -53,18 +107,23 @@ function ChartsXAxis(inProps) {
       }
     } = _React$useContext,
     settings = _objectWithoutPropertiesLoose(_React$useContext.xAxis[_props$axisId], _excluded);
+  const isMounted = useMounted();
   const defaultizedProps = _extends({}, defaultProps, settings, props);
   const {
     position,
     disableLine,
     disableTicks,
-    tickFontSize,
+    tickLabelStyle,
     label,
+    labelStyle,
+    tickFontSize,
     labelFontSize,
     tickSize: tickSizeProp,
     valueFormatter,
     slots,
-    slotProps
+    slotProps,
+    tickInterval,
+    tickLabelInterval
   } = defaultizedProps;
   const theme = useTheme();
   const classes = useUtilityClasses(_extends({}, defaultizedProps, {
@@ -77,16 +136,7 @@ function ChartsXAxis(inProps) {
     height
   } = React.useContext(DrawingContext);
   const tickSize = disableTicks ? 4 : tickSizeProp;
-  const xTicks = useTicks({
-    scale: xScale,
-    tickNumber,
-    valueFormatter
-  });
-  const positionSigne = position === 'bottom' ? 1 : -1;
-  const labelRefPoint = {
-    x: left + width / 2,
-    y: positionSigne * (tickFontSize + tickSize + 10)
-  };
+  const positionSign = position === 'bottom' ? 1 : -1;
   const Line = slots?.axisLine ?? 'line';
   const Tick = slots?.axisTick ?? 'line';
   const TickLabel = slots?.axisTickLabel ?? ChartsText;
@@ -95,27 +145,40 @@ function ChartsXAxis(inProps) {
     elementType: TickLabel,
     externalSlotProps: slotProps?.axisTickLabel,
     additionalProps: {
-      textAnchor: 'middle',
-      dominantBaseline: position === 'bottom' ? 'hanging' : 'auto',
-      style: {
-        fontSize: tickFontSize
-      },
+      style: _extends({
+        textAnchor: 'middle',
+        dominantBaseline: position === 'bottom' ? 'hanging' : 'auto',
+        fontSize: tickFontSize ?? 12
+      }, tickLabelStyle),
       className: classes.tickLabel
     },
     className: classes.tickLabel,
     ownerState: {}
   });
+  const xTicks = useTicks({
+    scale: xScale,
+    tickNumber,
+    valueFormatter,
+    tickInterval
+  });
+  const xTicksWithDimension = addLabelDimension(xTicks, {
+    tickLabelStyle: axisTickLabelProps.style,
+    tickLabelInterval,
+    isMounted
+  });
+  const labelRefPoint = {
+    x: left + width / 2,
+    y: positionSign * (tickSize + 22)
+  };
   const axisLabelProps = useSlotProps({
     elementType: Label,
     externalSlotProps: slotProps?.axisLabel,
     additionalProps: {
-      textAnchor: 'middle',
-      dominantBaseline: position === 'bottom' ? 'hanging' : 'auto',
-      style: {
-        fontSize: labelFontSize,
-        transformOrigin: `${labelRefPoint.x}px ${labelRefPoint.y}px`
-      },
-      className: classes.label
+      style: _extends({
+        fontSize: labelFontSize ?? 14,
+        textAnchor: 'middle',
+        dominantBaseline: position === 'bottom' ? 'hanging' : 'auto'
+      }, labelStyle)
     },
     ownerState: {}
   });
@@ -126,23 +189,23 @@ function ChartsXAxis(inProps) {
       x1: xScale.range()[0],
       x2: xScale.range()[1],
       className: classes.line
-    }, slotProps?.axisLine)), xTicks.map(({
+    }, slotProps?.axisLine)), xTicksWithDimension.map(({
       formattedValue,
       offset,
-      labelOffset
+      labelOffset,
+      skipLabel
     }, index) => {
       const xTickLabel = labelOffset ?? 0;
-      const yTickLabel = positionSigne * (tickSize + 3);
+      const yTickLabel = positionSign * (tickSize + 3);
       return /*#__PURE__*/_jsxs("g", {
         transform: `translate(${offset}, 0)`,
         className: classes.tickContainer,
         children: [!disableTicks && /*#__PURE__*/_jsx(Tick, _extends({
-          y2: positionSigne * tickSize,
+          y2: positionSign * tickSize,
           className: classes.tick
-        }, slotProps?.axisTick)), formattedValue !== undefined && /*#__PURE__*/_jsx(TickLabel, _extends({
+        }, slotProps?.axisTick)), formattedValue !== undefined && !skipLabel && /*#__PURE__*/_jsx(TickLabel, _extends({
           x: xTickLabel,
-          y: yTickLabel,
-          "transform-origin": `${xTickLabel}px ${yTickLabel}px`
+          y: yTickLabel
         }, axisTickLabelProps, {
           text: formattedValue.toString()
         }))]
@@ -190,8 +253,13 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
   /**
    * The font size of the axis label.
    * @default 14
+   * @deprecated Consider using `labelStyle.fontSize` instead.
    */
   labelFontSize: PropTypes.number,
+  /**
+   * The style applied to the axis label.
+   */
+  labelStyle: PropTypes.object,
   /**
    * Position of the axis.
    */
@@ -214,8 +282,28 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
   /**
    * The font size of the axis ticks text.
    * @default 12
+   * @deprecated Consider using `tickLabelStyle.fontSize` instead.
    */
   tickFontSize: PropTypes.number,
+  /**
+   * Defines which ticks are displayed. Its value can be:
+   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
+   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has a data property.
+   * - an array containing the values where ticks should be displayed.
+   * @default 'auto'
+   */
+  tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+  /**
+   * Defines which ticks get its label displayed. Its value can be:
+   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
+   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
+   * @default 'auto'
+   */
+  tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+  /**
+   * The style applied to ticks text.
+   */
+  tickLabelStyle: PropTypes.object,
   /**
    * Maximal step between two ticks.
    * When using time data, the value is assumed to be in ms.