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

package/esm/ScatterChart/ScatterChart.js

@@ -9,6 +9,16 @@ import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Demos:
+ *
+ * - [Scatter](https://mui.com/x/react-charts/scatter/)
+ * - [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+ *
+ * API:
+ *
+ * - [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/)
+ */
 const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props, ref) {
   const {
     xAxis,
@@ -85,11 +95,15 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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,
@@ -118,33 +132,33 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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,
     tickSize: PropTypes.number
   }), PropTypes.string]),
+  /**
+   * @deprecated Consider using `slotProps.legend` instead.
+   */
   legend: PropTypes.shape({
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
     hidden: PropTypes.bool,
-    itemWidth: PropTypes.number,
-    markSize: PropTypes.number,
-    offset: PropTypes.shape({
-      x: PropTypes.number,
-      y: PropTypes.number
-    }),
     position: PropTypes.shape({
       horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
     }),
     slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    spacing: PropTypes.number
+    slots: PropTypes.object
   }),
   margin: PropTypes.shape({
     bottom: PropTypes.number,
@@ -165,11 +179,15 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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,
@@ -210,6 +228,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     axisContent: PropTypes.elementType,
     classes: PropTypes.object,
     itemContent: PropTypes.elementType,
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     trigger: PropTypes.oneOf(['axis', 'item', 'none'])
   }),
   /**
@@ -225,11 +245,15 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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,
@@ -254,6 +278,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -262,6 +287,9 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     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,
@@ -280,6 +308,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -288,6 +317,9 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     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/esm/ScatterChart/ScatterPlot.js

@@ -5,6 +5,16 @@ import { Scatter } from './Scatter';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Demos:
+ *
+ * - [Scatter](https://mui.com/x/react-charts/scatter/)
+ * - [Scatter demonstration](https://mui.com/x/react-charts/scatter-demo/)
+ *
+ * API:
+ *
+ * - [ScatterPlot API](https://mui.com/x/api/charts/scatter-plot/)
+ */
 function ScatterPlot(props) {
   var _slots$scatter;
   const {

package/esm/SparkLineChart/SparkLineChart.js

@@ -1,29 +1,30 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
 import { BarPlot } from '../BarChart';
-import { LinePlot, MarkPlot, AreaPlot, markElementClasses } from '../LineChart';
+import { LinePlot, AreaPlot, LineHighlightPlot } from '../LineChart';
 import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { ChartsTooltip } from '../ChartsTooltip';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const SparkLineMarkPlot = styled(MarkPlot)({
-  [`& .${markElementClasses.root}`]: {
-    display: 'none',
-    [`&.${markElementClasses.highlighted}`]: {
-      display: 'inherit'
-    }
-  }
-});
 const SPARKLINE_DEFAULT_MARGIN = {
   top: 5,
   bottom: 5,
   left: 5,
   right: 5
 };
+
+/**
+ * Demos:
+ *
+ * - [SparkLine](https://mui.com/x/react-charts/sparkline/)
+ *
+ * API:
+ *
+ * - [SparkLineChart API](https://mui.com/x/api/charts/spark-line-chart/)
+ */
 const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props, ref) {
   const {
     xAxis,
@@ -59,14 +60,15 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
       valueFormatter
     }, plotType === 'bar' ? {} : {
       area,
-      curve
+      curve,
+      disableHighlight: !showHighlight
     })],
     width: width,
     height: height,
     margin: margin,
     xAxis: [_extends({
       id: DEFAULT_X_AXIS_KEY,
-      scaleType: plotType === 'bar' ? 'band' : 'linear',
+      scaleType: plotType === 'bar' ? 'band' : 'point',
       data: Array.from({
         length: data.length
       }, (_, index) => index),
@@ -77,7 +79,10 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     disableAxisListener: (!showTooltip || (tooltip == null ? void 0 : tooltip.trigger) !== 'axis') && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none',
     children: [plotType === 'bar' && /*#__PURE__*/_jsx(BarPlot, {
       slots: slots,
-      slotProps: slotProps
+      slotProps: slotProps,
+      sx: {
+        shapeRendering: 'auto'
+      }
     }), plotType === 'line' && /*#__PURE__*/_jsxs(React.Fragment, {
       children: [/*#__PURE__*/_jsx(AreaPlot, {
         slots: slots,
@@ -85,8 +90,14 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
       }), /*#__PURE__*/_jsx(LinePlot, {
         slots: slots,
         slotProps: slotProps
-      }), showHighlight && /*#__PURE__*/_jsx(SparkLineMarkPlot, {})]
-    }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), showTooltip && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), children]
+      }), /*#__PURE__*/_jsx(LineHighlightPlot, {
+        slots: slots,
+        slotProps: slotProps
+      })]
+    }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), showTooltip && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
+      slotProps: slotProps,
+      slots: slots
+    })), children]
   });
 });
 process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
@@ -161,6 +172,8 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     axisContent: PropTypes.elementType,
     classes: PropTypes.object,
     itemContent: PropTypes.elementType,
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     trigger: PropTypes.oneOf(['axis', 'item', 'none'])
   }),
   /**
@@ -192,6 +205,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -200,6 +214,9 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     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/esm/constants.js

@@ -1,7 +1,7 @@
 export const DEFAULT_X_AXIS_KEY = 'DEFAULT_X_AXIS_KEY';
 export const DEFAULT_Y_AXIS_KEY = 'DEFAULT_Y_AXIS_KEY';
 export const DEFAULT_MARGINS = {
-  top: 100,
+  top: 50,
   bottom: 50,
   left: 50,
   right: 50

package/esm/context/CartesianContextProvider.js

@@ -10,9 +10,10 @@ import { getScale } from '../internals/getScale';
 import { DrawingContext } from './DrawingProvider';
 import { SeriesContext } from './SeriesContextProvider';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
-import { getTicksNumber } from '../hooks/useTicks';
+import { getTickNumber } from '../hooks/useTicks';
 import { jsx as _jsx } from "react/jsx-runtime";
-const DEFAULT_CATEGORY_GAP_RATIO = 0.1;
+const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
+const DEFAULT_BAR_GAP_RATIO = 0.1;
 
 // TODO: those might be better placed in a distinct file
 const xExtremumGetters = {
@@ -31,6 +32,12 @@ export const CartesianContext = /*#__PURE__*/React.createContext({
   xAxisIds: [],
   yAxisIds: []
 });
+
+/**
+ * API:
+ *
+ * - [CartesianContextProvider API](https://mui.com/x/api/charts/cartesian-context-provider/)
+ */
 function CartesianContextProvider({
   xAxis: inXAxis,
   yAxis: inYAxis,
@@ -104,20 +111,21 @@ function CartesianContextProvider({
       const [minData, maxData] = getAxisExtremum(axis, xExtremumGetters, isDefaultAxis);
       const range = [drawingArea.left, drawingArea.left + drawingArea.width];
       if (isBandScaleConfig(axis)) {
-        var _axis$categoryGapRati;
+        var _axis$categoryGapRati, _axis$barGapRatio;
         const categoryGapRatio = (_axis$categoryGapRati = axis.categoryGapRatio) != null ? _axis$categoryGapRati : DEFAULT_CATEGORY_GAP_RATIO;
+        const barGapRatio = (_axis$barGapRatio = axis.barGapRatio) != null ? _axis$barGapRatio : DEFAULT_BAR_GAP_RATIO;
         completedXAxis[axis.id] = _extends({
           categoryGapRatio,
-          barGapRatio: 0
+          barGapRatio
         }, axis, {
           scale: scaleBand(axis.data, range).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
-          ticksNumber: axis.data.length
+          tickNumber: axis.data.length
         });
       }
       if (isPointScaleConfig(axis)) {
         completedXAxis[axis.id] = _extends({}, axis, {
           scale: scalePoint(axis.data, range),
-          ticksNumber: axis.data.length
+          tickNumber: axis.data.length
         });
       }
       if (axis.scaleType === 'band' || axis.scaleType === 'point') {
@@ -126,17 +134,17 @@ function CartesianContextProvider({
       }
       const scaleType = (_axis$scaleType = axis.scaleType) != null ? _axis$scaleType : 'linear';
       const extremums = [(_axis$min = axis.min) != null ? _axis$min : minData, (_axis$max = axis.max) != null ? _axis$max : maxData];
-      const ticksNumber = getTicksNumber(_extends({}, axis, {
+      const tickNumber = getTickNumber(_extends({}, axis, {
         range,
         domain: extremums
       }));
-      const niceScale = getScale(scaleType, extremums, range).nice(ticksNumber);
+      const niceScale = getScale(scaleType, extremums, range).nice(tickNumber);
       const niceDomain = niceScale.domain();
       const domain = [(_axis$min2 = axis.min) != null ? _axis$min2 : niceDomain[0], (_axis$max2 = axis.max) != null ? _axis$max2 : niceDomain[1]];
       completedXAxis[axis.id] = _extends({}, axis, {
         scaleType,
         scale: niceScale.domain(domain),
-        ticksNumber
+        tickNumber
       });
     });
     const allYAxis = [...((_yAxis$map = yAxis == null ? void 0 : yAxis.map((axis, index) => _extends({
@@ -161,13 +169,13 @@ function CartesianContextProvider({
           barGapRatio: 0
         }, axis, {
           scale: scaleBand(axis.data, [range[1], range[0]]).paddingInner(categoryGapRatio).paddingOuter(categoryGapRatio / 2),
-          ticksNumber: axis.data.length
+          tickNumber: axis.data.length
         });
       }
       if (isPointScaleConfig(axis)) {
         completedYAxis[axis.id] = _extends({}, axis, {
           scale: scalePoint(axis.data, [range[1], range[0]]),
-          ticksNumber: axis.data.length
+          tickNumber: axis.data.length
         });
       }
       if (axis.scaleType === 'band' || axis.scaleType === 'point') {
@@ -176,17 +184,17 @@ function CartesianContextProvider({
       }
       const scaleType = (_axis$scaleType2 = axis.scaleType) != null ? _axis$scaleType2 : 'linear';
       const extremums = [(_axis$min3 = axis.min) != null ? _axis$min3 : minData, (_axis$max3 = axis.max) != null ? _axis$max3 : maxData];
-      const ticksNumber = getTicksNumber(_extends({}, axis, {
+      const tickNumber = getTickNumber(_extends({}, axis, {
         range,
         domain: extremums
       }));
-      const niceScale = getScale(scaleType, extremums, range).nice(ticksNumber);
+      const niceScale = getScale(scaleType, extremums, range).nice(tickNumber);
       const niceDomain = niceScale.domain();
       const domain = [(_axis$min4 = axis.min) != null ? _axis$min4 : niceDomain[0], (_axis$max4 = axis.max) != null ? _axis$max4 : niceDomain[1]];
       completedYAxis[axis.id] = _extends({}, axis, {
         scaleType,
         scale: niceScale.domain(domain),
-        ticksNumber
+        tickNumber
       });
     });
     return {
@@ -226,6 +234,7 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -234,6 +243,9 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
     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,
@@ -252,6 +264,7 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
@@ -260,6 +273,9 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
     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/esm/context/DrawingProvider.js

@@ -9,12 +9,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const DrawingContext = /*#__PURE__*/React.createContext({
   top: 0,
   left: 0,
+  bottom: 0,
+  right: 0,
   height: 300,
   width: 400
 });
 export const SVGContext = /*#__PURE__*/React.createContext({
   current: null
 });
+
+/**
+ * API:
+ *
+ * - [DrawingProvider API](https://mui.com/x/api/charts/drawing-provider/)
+ */
 function DrawingProvider({
   width,
   height,

package/esm/hooks/useChartDimensions.js

@@ -6,6 +6,8 @@ const useChartDimensions = (width, height, margin) => {
   const drawingArea = React.useMemo(() => ({
     left: defaultizedMargin.left,
     top: defaultizedMargin.top,
+    right: defaultizedMargin.right,
+    bottom: defaultizedMargin.bottom,
     width: Math.max(0, width - defaultizedMargin.left - defaultizedMargin.right),
     height: Math.max(0, height - defaultizedMargin.top - defaultizedMargin.bottom)
   }), [width, height, defaultizedMargin.top, defaultizedMargin.bottom, defaultizedMargin.left, defaultizedMargin.right]);

package/esm/hooks/useMounted.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+export function useMounted(defer = false) {
+  const [mountedState, setMountedState] = React.useState(false);
+  useEnhancedEffect(() => {
+    if (!defer) {
+      setMountedState(true);
+    }
+  }, [defer]);
+  React.useEffect(() => {
+    if (defer) {
+      setMountedState(true);
+    }
+  }, [defer]);
+  return mountedState;
+}

package/esm/hooks/useReducedMotion.js

@@ -0,0 +1,27 @@
+import { useIsomorphicLayoutEffect, Globals } from '@react-spring/web';
+
+/**
+ * Returns `boolean` or `null`, used to automatically
+ * set skipAnimations to the value of the user's
+ * `prefers-reduced-motion` query.
+ *
+ * The return value, post-effect, is the value of their prefered setting
+ */
+export const useReducedMotion = () => {
+  // Taken from: https://github.com/pmndrs/react-spring/blob/02ec877bbfab0df46da0e4a47d5f68d3e731206a/packages/shared/src/hooks/useReducedMotion.ts#L13
+
+  useIsomorphicLayoutEffect(() => {
+    const mql = window.matchMedia('(prefers-reduced-motion)');
+    const handleMediaChange = e => {
+      Globals.assign({
+        // Modification such the react-spring implementation such that this hook can remove animation but never activate animation.
+        skipAnimation: e.matches || undefined
+      });
+    };
+    handleMediaChange(mql);
+    mql.addEventListener('change', handleMediaChange);
+    return () => {
+      mql.removeEventListener('change', handleMediaChange);
+    };
+  }, []);
+};

package/esm/hooks/useTicks.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { isBandScale } from '../internals/isBandScale';
-export function getTicksNumber(params) {
+export function getTickNumber(params) {
   const {
     tickMaxStep,
     tickMinStep,
@@ -16,8 +16,9 @@ export function getTicksNumber(params) {
 function useTicks(options) {
   const {
     scale,
-    ticksNumber,
-    valueFormatter
+    tickNumber,
+    valueFormatter,
+    tickInterval
   } = options;
   return React.useMemo(() => {
     // band scale
@@ -28,7 +29,8 @@ function useTicks(options) {
         return [...domain.map(value => {
           var _valueFormatter;
           return {
-            formattedValue: (_valueFormatter = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter : value,
+            value,
+            formattedValue: (_valueFormatter = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter : `${value}`,
             offset: scale(value) - (scale.step() - scale.bandwidth()) / 2,
             labelOffset: scale.step() / 2
           };
@@ -40,23 +42,27 @@ function useTicks(options) {
       }
 
       // scale type = 'point'
-      return domain.map(value => {
+      const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
+      return filteredDomain.map(value => {
         var _valueFormatter2;
         return {
-          formattedValue: (_valueFormatter2 = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter2 : value,
+          value,
+          formattedValue: (_valueFormatter2 = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter2 : `${value}`,
           offset: scale(value),
           labelOffset: 0
         };
       });
     }
-    return scale.ticks(ticksNumber).map(value => {
+    const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);
+    return ticks.map(value => {
       var _valueFormatter3;
       return {
-        formattedValue: (_valueFormatter3 = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter3 : scale.tickFormat(ticksNumber)(value),
+        value,
+        formattedValue: (_valueFormatter3 = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter3 : scale.tickFormat(tickNumber)(value),
         offset: scale(value),
         labelOffset: 0
       };
     });
-  }, [ticksNumber, scale, valueFormatter]);
+  }, [tickNumber, scale, valueFormatter, tickInterval]);
 }
 export default useTicks;

package/esm/internals/components/AxisSharedComponents.js

@@ -5,77 +5,22 @@ export const AxisRoot = styled('g', {
   name: 'MuiChartsAxis',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
-})({
-  [`&.${axisClasses.directionY}`]: {
-    [`.${axisClasses.tickLabel}`]: {
-      dominantBaseline: 'middle'
-    },
-    [`.${axisClasses.label}`]: {
-      dominantBaseline: 'auto',
-      textAnchor: 'middle'
-    }
-  },
-  [`&.${axisClasses.left}`]: {
-    [`.${axisClasses.tickLabel}`]: {
-      dominantBaseline: 'central',
-      textAnchor: 'end'
-    }
-  },
-  [`&.${axisClasses.right}`]: {
-    [`.${axisClasses.tickLabel}`]: {
-      dominantBaseline: 'central',
-      textAnchor: 'start'
-    }
-  },
-  [`&.${axisClasses.bottom}`]: {
-    [`.${axisClasses.tickLabel}, .${axisClasses.label}`]: {
-      dominantBaseline: 'hanging',
-      textAnchor: 'middle'
-    }
-  },
-  [`&.${axisClasses.top}`]: {
-    [`.${axisClasses.tickLabel}, .${axisClasses.label}`]: {
-      dominantBaseline: 'baseline',
-      textAnchor: 'middle'
-    }
-  }
-});
-export const ChartsLine = styled('line', {
-  name: 'MuiChartsAxis',
-  slot: 'Line',
-  overridesResolver: (props, styles) => styles.line
-})(({
-  theme
-}) => ({
-  stroke: theme.palette.text.primary,
-  shapeRendering: 'crispEdges',
-  strokeWidth: 1
-}));
-export const ChartsTick = styled('line', {
-  name: 'MuiChartsAxis',
-  slot: 'Tick',
-  overridesResolver: (props, styles) => styles.tick
 })(({
   theme
 }) => ({
-  stroke: theme.palette.text.primary,
-  shapeRendering: 'crispEdges'
-}));
-export const ChartsTickLabel = styled('text', {
-  name: 'MuiChartsAxis',
-  slot: 'TickLabel',
-  overridesResolver: (props, styles) => styles.tickLabel
-})(({
-  theme
-}) => _extends({}, theme.typography.caption, {
-  fill: theme.palette.text.primary
-}));
-export const ChartsLabel = styled('text', {
-  name: 'MuiChartsAxis',
-  slot: 'Label',
-  overridesResolver: (props, styles) => styles.label
-})(({
-  theme
-}) => _extends({}, theme.typography.body1, {
-  fill: theme.palette.text.primary
+  [`& .${axisClasses.tickLabel}`]: _extends({}, theme.typography.caption, {
+    fill: (theme.vars || theme).palette.text.primary
+  }),
+  [`& .${axisClasses.label}`]: _extends({}, theme.typography.body1, {
+    fill: (theme.vars || theme).palette.text.primary
+  }),
+  [`& .${axisClasses.line}`]: {
+    stroke: (theme.vars || theme).palette.text.primary,
+    shapeRendering: 'crispEdges',
+    strokeWidth: 1
+  },
+  [`& .${axisClasses.tick}`]: {
+    stroke: (theme.vars || theme).palette.text.primary,
+    shapeRendering: 'crispEdges'
+  }
 }));