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

package/modern/BarChart/BarPlot.js

@@ -1,4 +1,6 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { BarElement } from './BarElement';
@@ -32,7 +34,7 @@ function getBandSize({
     offset
   };
 }
-export function BarPlot() {
+function BarPlot(props) {
   const seriesData = React.useContext(SeriesContext).bar;
   const axisData = React.useContext(CartesianContext);
   if (seriesData === undefined) {
@@ -59,27 +61,37 @@ export function BarPlot() {
         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
@@ -87,18 +99,35 @@ export function BarPlot() {
         return stackedData.map((values, dataIndex) => {
           const baseline = Math.min(...values);
           const value = Math.max(...values);
-          return /*#__PURE__*/_jsx(BarElement, {
+          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
-          }, `${seriesId}-${dataIndex}`);
+          }, props), `${seriesId}-${dataIndex}`);
         });
       });
     })
   });
-}
+}
+process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
+} : void 0;
+export { BarPlot };

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/ChartsAxis/ChartsAxis.js

@@ -15,12 +15,23 @@ const getAxisId = propsValue => {
   }
   return propsValue;
 };
+const mergeProps = (axisConfig, slots, slotProps) => {
+  return typeof axisConfig === 'object' ? _extends({}, axisConfig, {
+    slots: _extends({}, slots, axisConfig?.slots),
+    slotProps: _extends({}, slotProps, axisConfig?.slotProps)
+  }) : {
+    slots,
+    slotProps
+  };
+};
 function ChartsAxis(props) {
   const {
     topAxis,
     leftAxis,
     rightAxis,
-    bottomAxis
+    bottomAxis,
+    slots,
+    slotProps
   } = props;
   const {
     xAxis,
@@ -48,20 +59,24 @@ function ChartsAxis(props) {
   if (bottomId !== null && !xAxis[bottomId]) {
     throw Error(`MUI: id used for bottom axis "${bottomId}" is not defined`);
   }
+  const topAxisProps = mergeProps(topAxis, slots, slotProps);
+  const bottomAxisProps = mergeProps(bottomAxis, slots, slotProps);
+  const leftAxisProps = mergeProps(leftAxis, slots, slotProps);
+  const rightAxisProps = mergeProps(rightAxis, slots, slotProps);
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [topId && /*#__PURE__*/_jsx(ChartsXAxis, _extends({
+    children: [topId && /*#__PURE__*/_jsx(ChartsXAxis, _extends({}, topAxisProps, {
       position: "top",
       axisId: topId
-    }, typeof topAxis === 'object' ? topAxis : {})), bottomId && /*#__PURE__*/_jsx(ChartsXAxis, _extends({
+    })), bottomId && /*#__PURE__*/_jsx(ChartsXAxis, _extends({}, bottomAxisProps, {
       position: "bottom",
       axisId: bottomId
-    }, typeof bottomAxis === 'object' ? bottomAxis : {})), leftId && /*#__PURE__*/_jsx(ChartsYAxis, _extends({
+    })), leftId && /*#__PURE__*/_jsx(ChartsYAxis, _extends({}, leftAxisProps, {
       position: "left",
       axisId: leftId
-    }, typeof leftAxis === 'object' ? leftAxis : {})), rightId && /*#__PURE__*/_jsx(ChartsYAxis, _extends({
+    })), rightId && /*#__PURE__*/_jsx(ChartsYAxis, _extends({}, rightAxisProps, {
       position: "right",
       axisId: rightId
-    }, typeof rightAxis === 'object' ? rightAxis : {}))]
+    }))]
   });
 }
 process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
@@ -83,8 +98,13 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'top']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
   /**
@@ -101,8 +121,13 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     position: PropTypes.oneOf(['left', 'right']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
   /**
@@ -119,10 +144,25 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     position: PropTypes.oneOf(['left', 'right']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
   /**
    * Indicate which axis to display the top of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
@@ -137,8 +177,13 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'top']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string])
 } : void 0;

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/ChartsLegend/ChartsLegend.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { useSlotProps } from '@mui/base/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useThemeProps, useTheme, styled } from '@mui/material/styles';
 import { DrawingContext } from '../context/DrawingProvider';
@@ -126,7 +127,7 @@ export const ChartsLegendLabel = styled('text', {
       calc(0.5 * var(--ChartsLegend-itemMarkSize))
       )`,
   fill: theme.palette.text.primary,
-  alignmentBaseline: 'central'
+  dominantBaseline: 'central'
 }));
 const defaultProps = {
   position: {
@@ -138,27 +139,20 @@ const defaultProps = {
   itemWidth: 100,
   spacing: 2
 };
-export function ChartsLegend(inProps) {
-  const props = useThemeProps({
-    props: _extends({}, defaultProps, inProps),
-    name: 'MuiChartsLegend'
-  });
+function DefaultChartsLegend(props) {
   const {
+    hidden,
     position,
     direction,
     offset,
-    hidden
+    series,
+    seriesToDisplay,
+    drawingArea,
+    classes
   } = props;
-  const theme = useTheme();
-  const classes = useUtilityClasses(_extends({}, props, {
-    theme
-  }));
-  const drawingArea = React.useContext(DrawingContext);
-  const series = React.useContext(SeriesContext);
   if (hidden) {
     return null;
   }
-  const seriesToDisplay = getSeriesToDisplay(series);
   return /*#__PURE__*/_jsx(ChartsLegendRoot, {
     ownerState: {
       direction,
@@ -190,4 +184,42 @@ export function ChartsLegend(inProps) {
       })]
     }, id))
   });
+}
+export function ChartsLegend(inProps) {
+  const props = useThemeProps({
+    props: _extends({}, defaultProps, inProps),
+    name: 'MuiChartsLegend'
+  });
+  const {
+    position,
+    direction,
+    offset,
+    hidden,
+    slots,
+    slotProps
+  } = props;
+  const theme = useTheme();
+  const classes = useUtilityClasses(_extends({}, props, {
+    theme
+  }));
+  const drawingArea = React.useContext(DrawingContext);
+  const series = React.useContext(SeriesContext);
+  const seriesToDisplay = getSeriesToDisplay(series);
+  const ChartLegendRender = slots?.legend ?? DefaultChartsLegend;
+  const chartLegendRenderProps = useSlotProps({
+    elementType: ChartLegendRender,
+    externalSlotProps: slotProps?.legend,
+    additionalProps: {
+      position,
+      direction,
+      offset,
+      classes,
+      drawingArea,
+      series,
+      hidden,
+      seriesToDisplay
+    },
+    ownerState: {}
+  });
+  return /*#__PURE__*/_jsx(ChartLegendRender, _extends({}, chartLegendRenderProps));
 }

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/ChartsXAxis/ChartsXAxis.js

@@ -9,7 +9,7 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { DrawingContext } from '../context/DrawingProvider';
 import useTicks from '../hooks/useTicks';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
-import { Line, Tick, TickLabel, Label, AxisRoot } from '../internals/components/AxisSharedComponents';
+import { ChartsLine, ChartsTick, ChartsTickLabel, ChartsLabel, AxisRoot } from '../internals/components/AxisSharedComponents';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -60,7 +60,9 @@ function ChartsXAxis(inProps) {
     label,
     labelFontSize,
     tickSize: tickSizeProp,
-    valueFormatter
+    valueFormatter,
+    slots,
+    slotProps
   } = defaultizedProps;
   const theme = useTheme();
   const classes = useUtilityClasses(_extends({}, defaultizedProps, {
@@ -83,14 +85,18 @@ function ChartsXAxis(inProps) {
     x: left + width / 2,
     y: positionSigne * (tickFontSize + tickSize + 10)
   };
+  const Line = slots?.axisLine ?? ChartsLine;
+  const Tick = slots?.axisTick ?? ChartsTick;
+  const TickLabel = slots?.axisTickLabel ?? ChartsTickLabel;
+  const Label = slots?.axisLabel ?? ChartsLabel;
   return /*#__PURE__*/_jsxs(AxisRoot, {
     transform: `translate(0, ${position === 'bottom' ? top + height : top})`,
     className: classes.root,
-    children: [!disableLine && /*#__PURE__*/_jsx(Line, {
+    children: [!disableLine && /*#__PURE__*/_jsx(Line, _extends({
       x1: xScale.range()[0],
       x2: xScale.range()[1],
       className: classes.line
-    }), xTicks.map(({
+    }, slotProps?.axisLine)), xTicks.map(({
       formattedValue,
       offset,
       labelOffset
@@ -100,26 +106,28 @@ function ChartsXAxis(inProps) {
       return /*#__PURE__*/_jsxs("g", {
         transform: `translate(${offset}, 0)`,
         className: classes.tickContainer,
-        children: [!disableTicks && /*#__PURE__*/_jsx(Tick, {
+        children: [!disableTicks && /*#__PURE__*/_jsx(Tick, _extends({
           y2: positionSigne * tickSize,
           className: classes.tick
-        }), formattedValue !== undefined && /*#__PURE__*/_jsx(TickLabel, {
+        }, slotProps?.axisTick)), formattedValue !== undefined && /*#__PURE__*/_jsx(TickLabel, _extends({
           x: xTickLabel,
           y: yTickLabel,
           "transform-origin": `${xTickLabel}px ${yTickLabel}px`,
           sx: {
             fontSize: tickFontSize
           },
-          className: classes.tickLabel,
+          className: classes.tickLabel
+        }, slotProps?.axisTickLabel, {
           children: formattedValue
-        })]
+        }))]
       }, index);
     }), label && /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, {
       sx: {
         fontSize: labelFontSize,
         transformOrigin: `${labelRefPoint.x}px ${labelRefPoint.y}px`
       },
-      className: classes.label,
+      className: classes.label
+    }, slotProps?.axisLabel, {
       children: label
     }))]
   });
@@ -165,6 +173,16 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * Position of the axis.
    */
   position: PropTypes.oneOf(['bottom', 'top']),
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
   /**
    * The stroke color of the axis line.
    * @default 'currentColor'
@@ -175,6 +193,23 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * @default 12
    */
   tickFontSize: PropTypes.number,
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMaxStep: PropTypes.number,
+  /**
+   * Maximal step between two ticks.
+   * When using time data, the value is assumed to be in ms.
+   * Not supported by categorical axis (band, points).
+   */
+  tickMinStep: PropTypes.number,
+  /**
+   * The number of ticks. This number is not guaranted.
+   * Not supported by categorical axis (band, points).
+   */
+  tickNumber: PropTypes.number,
   /**
    * The size of the ticks.
    * @default 6