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

package/ChartsLegend/DefaultChartsLegend.js

@@ -59,6 +59,7 @@ function DefaultChartsLegend(props) {
     labelStyle: inLabelStyle
   } = props;
   const theme = (0, _styles.useTheme)();
+  const isRTL = theme.direction === 'rtl';
   const labelStyle = React.useMemo(() => (0, _extends2.default)({}, theme.typography.subtitle1, {
     color: 'inherit',
     dominantBaseline: 'central',
@@ -89,7 +90,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;
@@ -153,40 +154,31 @@ function DefaultChartsLegend(props) {
       }
       return rep;
     });
-
-    // Move the legend according to padding and position
-    let gapX = 0;
-    let gapY = 0;
+    return [seriesWithRawPosition.map(item => (0, _extends2.default)({}, 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 => (0, _extends2.default)({}, 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;
   }
@@ -201,9 +193,10 @@ function DefaultChartsLegend(props) {
         positionY
       }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
         className: classes.series,
-        transform: `translate(${positionX} ${positionY})`,
+        transform: `translate(${gapX + (isRTL ? legendWidth - positionX : positionX)} ${gapY + positionY})`,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
           className: classes.mark,
+          x: isRTL ? -itemMarkWidth : 0,
           y: -itemMarkHeight / 2,
           width: itemMarkWidth,
           height: itemMarkHeight,
@@ -211,7 +204,7 @@ function DefaultChartsLegend(props) {
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsText.ChartsText, {
           style: labelStyle,
           text: label,
-          x: itemMarkWidth + markGap,
+          x: (isRTL ? -1 : 1) * (itemMarkWidth + markGap),
           y: 0
         })]
       }, id))

package/ChartsTooltip/DefaultChartsAxisTooltipContent.js

@@ -37,7 +37,9 @@ function DefaultChartsAxisTooltipContent(props) {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
             colSpan: 3,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-              children: axisFormatter(axisValue)
+              children: axisFormatter(axisValue, {
+                location: 'tooltip'
+              })
             })
           })
         })

package/ChartsXAxis/ChartsXAxis.js

@@ -148,7 +148,9 @@ function ChartsXAxis(inProps) {
     slots,
     slotProps,
     tickInterval,
-    tickLabelInterval
+    tickLabelInterval,
+    tickPlacement,
+    tickLabelPlacement
   } = defaultizedProps;
   const theme = (0, _styles.useTheme)();
   const classes = useUtilityClasses((0, _extends2.default)({}, defaultizedProps, {
@@ -184,7 +186,9 @@ function ChartsXAxis(inProps) {
     scale: xScale,
     tickNumber,
     valueFormatter,
-    tickInterval
+    tickInterval,
+    tickPlacement,
+    tickLabelPlacement
   });
   const xTicksWithDimension = addLabelDimension(xTicks, {
     tickLabelStyle: axisTickLabelProps.style,
@@ -327,6 +331,12 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * @default 'auto'
    */
   tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.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.default.oneOf(['middle', 'tick']),
   /**
    * The style applied to ticks text.
    */
@@ -348,6 +358,12 @@ process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
    * Not supported by categorical axis (band, points).
    */
   tickNumber: _propTypes.default.number,
+  /**
+   * The placement of ticks in regard to the band interval.
+   * Only used if scale is 'band'.
+   * @default 'extremities'
+   */
+  tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
   /**
    * The size of the ticks.
    * @default 6

package/ChartsYAxis/ChartsYAxis.js

@@ -87,7 +87,9 @@ function ChartsYAxis(inProps) {
     tickSize: tickSizeProp,
     valueFormatter,
     slots,
-    slotProps
+    slotProps,
+    tickPlacement,
+    tickLabelPlacement
   } = defaultizedProps;
   const theme = (0, _styles.useTheme)();
   const classes = useUtilityClasses((0, _extends2.default)({}, defaultizedProps, {
@@ -103,7 +105,9 @@ function ChartsYAxis(inProps) {
   const yTicks = (0, _useTicks.useTicks)({
     scale: yScale,
     tickNumber,
-    valueFormatter
+    valueFormatter,
+    tickPlacement,
+    tickLabelPlacement
   });
   const positionSign = position === 'right' ? 1 : -1;
   const labelRefPoint = {
@@ -257,6 +261,12 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    * @default 'auto'
    */
   tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.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.default.oneOf(['middle', 'tick']),
   /**
    * The style applied to ticks text.
    */
@@ -278,6 +288,12 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    * Not supported by categorical axis (band, points).
    */
   tickNumber: _propTypes.default.number,
+  /**
+   * The placement of ticks in regard to the band interval.
+   * Only used if scale is 'band'.
+   * @default 'extremities'
+   */
+  tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
   /**
    * The size of the ticks.
    * @default 6

package/LineChart/LineChart.js

@@ -168,10 +168,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
     tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
+    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
   children: _propTypes.default.node,
@@ -228,10 +230,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
     tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
+    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
   /**
@@ -300,10 +304,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
     tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
+    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
   /**
@@ -361,10 +367,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
     tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
+    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
   viewBox: _propTypes.default.shape({
@@ -405,10 +413,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
     tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
+    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   })),
@@ -440,10 +450,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
     tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
+    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   }))

package/PieChart/PieChart.js

@@ -15,6 +15,7 @@ var _ChartsTooltip = require("../ChartsTooltip");
 var _ChartsLegend = require("../ChartsLegend");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
 var _PiePlot = require("./PiePlot");
+var _useIsRTL = require("../internals/useIsRTL");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -24,6 +25,12 @@ const defaultMargin = {
   left: 5,
   right: 100
 };
+const defaultRTLMargin = {
+  top: 5,
+  bottom: 5,
+  left: 100,
+  right: 5
+};
 
 /**
  * Demos:
@@ -53,13 +60,7 @@ function PieChart(props) {
       y: 'none'
     },
     skipAnimation,
-    legend = {
-      direction: 'column',
-      position: {
-        vertical: 'middle',
-        horizontal: 'right'
-      }
-    },
+    legend: legendProps,
     topAxis = null,
     leftAxis = null,
     rightAxis = null,
@@ -69,7 +70,15 @@ function PieChart(props) {
     slotProps,
     onItemClick
   } = props;
-  const margin = (0, _extends2.default)({}, defaultMargin, marginProps);
+  const isRTL = (0, _useIsRTL.useIsRTL)();
+  const margin = (0, _extends2.default)({}, isRTL ? defaultRTLMargin : defaultMargin, marginProps);
+  const legend = (0, _extends2.default)({
+    direction: 'column',
+    position: {
+      vertical: 'middle',
+      horizontal: isRTL ? 'left' : 'right'
+    }
+  }, legendProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, {
     series: series.map(s => (0, _extends2.default)({
       type: 'pie'
@@ -139,10 +148,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
     tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
+    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
   children: _propTypes.default.node,
@@ -188,10 +199,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
     tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
+    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
   /**
@@ -247,10 +260,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
     tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
+    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
   /**
@@ -308,10 +323,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
     tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
+    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
   viewBox: _propTypes.default.shape({
@@ -352,10 +369,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
     tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
+    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   })),
@@ -387,10 +406,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
     tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
+    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   }))

package/ResponsiveChartContainer/ResponsiveChartContainer.js

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

package/ScatterChart/ScatterChart.js

@@ -129,10 +129,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
     tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
+    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
   children: _propTypes.default.node,
@@ -190,10 +192,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
     tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
+    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
   /**
@@ -249,10 +253,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
     tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
+    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
   /**
@@ -305,10 +311,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
     tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
+    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
   viewBox: _propTypes.default.shape({
@@ -354,10 +362,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
     tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
+    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   })),
@@ -389,10 +399,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
     tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
+    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
     tickSize: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   }))

package/SparkLineChart/SparkLineChart.js

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

package/esm/BarChart/BarChart.js

@@ -156,10 +156,12 @@ process.env.NODE_ENV !== "production" ? BarChart.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,
@@ -217,10 +219,12 @@ process.env.NODE_ENV !== "production" ? BarChart.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]),
   /**
@@ -283,10 +287,12 @@ process.env.NODE_ENV !== "production" ? BarChart.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]),
   /**
@@ -343,10 +349,12 @@ process.env.NODE_ENV !== "production" ? BarChart.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({
@@ -387,10 +395,12 @@ process.env.NODE_ENV !== "production" ? BarChart.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
   })),
@@ -422,10 +432,12 @@ process.env.NODE_ENV !== "production" ? BarChart.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/esm/ChartContainer/ChartContainer.js

@@ -145,10 +145,12 @@ process.env.NODE_ENV !== "production" ? ChartContainer.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
   })),
@@ -180,10 +182,12 @@ process.env.NODE_ENV !== "production" ? ChartContainer.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
   }))