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

package/esm/ScatterChart/ScatterChart.js

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

package/esm/SparkLineChart/SparkLineChart.js

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

package/esm/hooks/useAxisEvents.js

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

package/esm/hooks/useTicks.js

@@ -13,12 +13,20 @@ export function getTickNumber(params) {
   const defaultizedTickNumber = tickNumber != null ? tickNumber : Math.floor(Math.abs(range[1] - range[0]) / 50);
   return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber));
 }
+const offsetRatio = {
+  start: 0,
+  extremities: 0,
+  end: 1,
+  middle: 0.5
+};
 export function useTicks(options) {
   const {
     scale,
     tickNumber,
     valueFormatter,
-    tickInterval
+    tickInterval,
+    tickPlacement = 'extremities',
+    tickLabelPlacement = 'middle'
   } = options;
   return React.useMemo(() => {
     // band scale
@@ -30,15 +38,17 @@ export function useTicks(options) {
           var _valueFormatter;
           return {
             value,
-            formattedValue: (_valueFormatter = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter : `${value}`,
-            offset: scale(value) - (scale.step() - scale.bandwidth()) / 2,
-            labelOffset: scale.step() / 2
+            formattedValue: (_valueFormatter = valueFormatter == null ? void 0 : valueFormatter(value, {
+              location: 'tick'
+            })) != null ? _valueFormatter : `${value}`,
+            offset: scale(value) - (scale.step() - scale.bandwidth()) / 2 + offsetRatio[tickPlacement] * scale.step(),
+            labelOffset: tickLabelPlacement === 'tick' ? 0 : scale.step() * (offsetRatio[tickLabelPlacement] - offsetRatio[tickPlacement])
           };
-        }), {
+        }), ...(tickPlacement === 'extremities' ? [{
           formattedValue: undefined,
           offset: scale.range()[1],
           labelOffset: 0
-        }];
+        }] : [])];
       }
 
       // scale type = 'point'
@@ -47,7 +57,9 @@ export function useTicks(options) {
         var _valueFormatter2;
         return {
           value,
-          formattedValue: (_valueFormatter2 = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter2 : `${value}`,
+          formattedValue: (_valueFormatter2 = valueFormatter == null ? void 0 : valueFormatter(value, {
+            location: 'tick'
+          })) != null ? _valueFormatter2 : `${value}`,
           offset: scale(value),
           labelOffset: 0
         };
@@ -58,10 +70,12 @@ export function useTicks(options) {
       var _valueFormatter3;
       return {
         value,
-        formattedValue: (_valueFormatter3 = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter3 : scale.tickFormat(tickNumber)(value),
+        formattedValue: (_valueFormatter3 = valueFormatter == null ? void 0 : valueFormatter(value, {
+          location: 'tick'
+        })) != null ? _valueFormatter3 : scale.tickFormat(tickNumber)(value),
         offset: scale(value),
         labelOffset: 0
       };
     });
-  }, [tickNumber, scale, valueFormatter, tickInterval]);
+  }, [scale, tickInterval, tickNumber, valueFormatter, tickPlacement, tickLabelPlacement]);
 }

package/esm/internals/useIsRTL.js

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

package/hooks/useAxisEvents.js

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

package/hooks/useTicks.d.ts

@@ -1,4 +1,4 @@
-import { D3Scale } from '../models/axis';
+import { AxisConfig, D3Scale } from '../models/axis';
 export interface TickParams {
     /**
      * Maximal step between two ticks.
@@ -25,6 +25,18 @@ export interface TickParams {
      * @default 'auto'
      */
     tickInterval?: 'auto' | ((value: any, index: number) => boolean) | any[];
+    /**
+     * The placement of ticks in regard to the band interval.
+     * Only used if scale is 'band'.
+     * @default 'extremities'
+     */
+    tickPlacement?: 'start' | 'end' | 'middle' | 'extremities';
+    /**
+     * 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?: 'middle' | 'tick';
 }
 export declare function getTickNumber(params: TickParams & {
     range: any[];
@@ -41,5 +53,5 @@ export type TickItemType = {
 };
 export declare function useTicks(options: {
     scale: D3Scale;
-    valueFormatter?: (value: any) => string;
-} & Pick<TickParams, 'tickNumber' | 'tickInterval'>): TickItemType[];
+    valueFormatter?: AxisConfig['valueFormatter'];
+} & Pick<TickParams, 'tickNumber' | 'tickInterval' | 'tickPlacement' | 'tickLabelPlacement'>): TickItemType[];

package/hooks/useTicks.js

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

package/index.js

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

package/internals/useIsRTL.d.ts

@@ -0,0 +1 @@
+export declare const useIsRTL: () => boolean;

package/internals/useIsRTL.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsRTL = void 0;
+var _styles = require("@mui/material/styles");
+const useIsRTL = () => {
+  const theme = (0, _styles.useTheme)();
+  return theme.direction === 'rtl';
+};
+exports.useIsRTL = useIsRTL;

package/models/axis.d.ts

@@ -9,9 +9,25 @@ export type D3Scale<Domain extends {
 } = number | Date | string, Range = number, Output = number> = ScaleBand<Domain> | ScaleLogarithmic<Range, Output> | ScalePoint<Domain> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;
 export type D3ContinuouseScale<Range = number, Output = number> = ScaleLogarithmic<Range, Output> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;
 export interface ChartsAxisSlots {
+    /**
+     * Custom component for the axis main line.
+     * @default 'line'
+     */
     axisLine?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+    /**
+     * Custom component for the axis tick.
+     * @default 'line'
+     */
     axisTick?: React.JSXElementConstructor<React.SVGAttributes<SVGPathElement>>;
+    /**
+     * Custom component for tick label.
+     * @default ChartsText
+     */
     axisTickLabel?: React.JSXElementConstructor<ChartsTextProps>;
+    /**
+     * Custom component for axis label.
+     * @default ChartsText
+     */
     axisLabel?: React.JSXElementConstructor<ChartsTextProps>;
 }
 export interface ChartsAxisSlotProps {
@@ -127,7 +143,7 @@ interface AxisScaleConfig {
          * @default 0.1
          */
         barGapRatio: number;
-    };
+    } & Pick<TickParams, 'tickPlacement' | 'tickLabelPlacement'>;
     point: {
         scaleType: 'point';
         scale: ScalePoint<number | Date | string>;
@@ -157,6 +173,9 @@ interface AxisScaleConfig {
         scale: ScaleLinear<number, number>;
     };
 }
+export type AxisValueFormatterContext = {
+    location: 'tick' | 'tooltip';
+};
 export type AxisConfig<S extends ScaleName = ScaleName, V = any> = {
     /**
      * Id used to identify the axis.
@@ -180,7 +199,13 @@ export type AxisConfig<S extends ScaleName = ScaleName, V = any> = {
      * The key used to retrieve `data` from the `dataset` prop.
      */
     dataKey?: string;
-    valueFormatter?: (value: V) => string;
+    /**
+     * Formats the axis value.
+     * @param {V} value The value to format.
+     * @param {AxisValueFormatterContext} context The rendering context of the value.
+     * @returns {string} The string to display.
+     */
+    valueFormatter?: (value: V, context: AxisValueFormatterContext) => string;
     /**
      * If `true`, hide this value in the tooltip
      */

package/modern/BarChart/BarChart.js

@@ -153,10 +153,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,
@@ -214,10 +216,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]),
   /**
@@ -280,10 +284,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]),
   /**
@@ -340,10 +346,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({
@@ -384,10 +392,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
   })),
@@ -419,10 +429,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/modern/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
   }))

package/modern/ChartsAxis/ChartsAxis.js

@@ -115,10 +115,12 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.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]),
   /**
@@ -142,10 +144,12 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.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]),
   /**
@@ -169,10 +173,12 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.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]),
   /**
@@ -206,10 +212,12 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.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])
 } : void 0;

package/modern/ChartsLegend/ChartsLegend.js

@@ -85,6 +85,9 @@ process.env.NODE_ENV !== "production" ? ChartsLegend.propTypes = {
    * @default false
    */
   hidden: PropTypes.bool,
+  /**
+   * The position of the legend.
+   */
   position: PropTypes.shape({
     horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
     vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired