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

package/esm/PieChart/PieChart.js

@@ -44,7 +44,9 @@ function PieChart(props) {
     leftAxis = null,
     rightAxis = null,
     bottomAxis = null,
-    children
+    children,
+    slots,
+    slotProps
   } = props;
   const margin = _extends({}, defaultMargin, marginProps);
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
@@ -67,8 +69,16 @@ function PieChart(props) {
       topAxis: topAxis,
       leftAxis: leftAxis,
       rightAxis: rightAxis,
-      bottomAxis: bottomAxis
-    }), /*#__PURE__*/_jsx(PiePlot, {}), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), children]
+      bottomAxis: bottomAxis,
+      slots: slots,
+      slotProps: slotProps
+    }), /*#__PURE__*/_jsx(PiePlot, {
+      slots: slots,
+      slotProps: slotProps
+    }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
+      slots: slots,
+      slotProps: slotProps
+    })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), children]
   });
 }
 process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
@@ -94,8 +104,13 @@ process.env.NODE_ENV !== "production" ? PieChart.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]),
   children: PropTypes.node,
@@ -122,8 +137,13 @@ process.env.NODE_ENV !== "production" ? PieChart.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]),
   legend: PropTypes.shape({
@@ -140,6 +160,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
       horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
     }),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     spacing: PropTypes.number
   }),
   margin: PropTypes.shape({
@@ -162,8 +184,13 @@ process.env.NODE_ENV !== "production" ? PieChart.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]),
   series: PropTypes.arrayOf(PropTypes.shape({
@@ -205,6 +232,12 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     type: PropTypes.oneOf(['pie']),
     valueFormatter: PropTypes.func
   })).isRequired,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
   tooltip: PropTypes.shape({
@@ -227,8 +260,13 @@ process.env.NODE_ENV !== "production" ? PieChart.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]),
   viewBox: PropTypes.shape({
@@ -251,15 +289,17 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    maxTicks: PropTypes.number,
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    minTicks: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number,
-    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   })),
   yAxis: PropTypes.arrayOf(PropTypes.shape({
@@ -275,15 +315,17 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    maxTicks: PropTypes.number,
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    minTicks: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number,
-    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }))
 } : void 0;

package/esm/PieChart/PiePlot.js

@@ -1,5 +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 PieArc from './PieArc';
 import PieArcLabel from './PieArcLabel';
@@ -22,7 +23,12 @@ function getItemLabel(arcLabel, arcLabelMinAngle, item) {
   }
   return arcLabel(item);
 }
-export function PiePlot() {
+function PiePlot(props) {
+  var _slots$pieArc, _slots$pieArcLabel;
+  const {
+    slots,
+    slotProps
+  } = props;
   const seriesData = React.useContext(SeriesContext).pie;
   const {
     left,
@@ -42,6 +48,8 @@ export function PiePlot() {
     series,
     seriesOrder
   } = seriesData;
+  const Arc = (_slots$pieArc = slots == null ? void 0 : slots.pieArc) != null ? _slots$pieArc : PieArc;
+  const ArcLabel = (_slots$pieArcLabel = slots == null ? void 0 : slots.pieArcLabel) != null ? _slots$pieArcLabel : PieArcLabel;
   return /*#__PURE__*/_jsx("g", {
     children: seriesOrder.map(seriesId => {
       const {
@@ -60,7 +68,7 @@ export function PiePlot() {
         transform: `translate(${cx === undefined ? center.x : left + cx}, ${cy === undefined ? center.y : top + cy})`,
         children: /*#__PURE__*/_jsxs("g", {
           children: [data.map((item, index) => {
-            return /*#__PURE__*/_createElement(PieArc, _extends({}, item, {
+            return /*#__PURE__*/_createElement(Arc, _extends({}, item, {
               key: item.id,
               innerRadius: innerRadius,
               outerRadius: outerRadius != null ? outerRadius : availableRadius,
@@ -71,9 +79,9 @@ export function PiePlot() {
               highlightScope: series[seriesId].highlightScope,
               highlighted: highlighted,
               faded: faded
-            }));
+            }, slotProps == null ? void 0 : slotProps.pieArc));
           }), data.map((item, index) => {
-            return /*#__PURE__*/_createElement(PieArcLabel, _extends({}, item, {
+            return /*#__PURE__*/_createElement(ArcLabel, _extends({}, item, {
               key: item.id,
               innerRadius: innerRadius,
               outerRadius: outerRadius != null ? outerRadius : availableRadius,
@@ -83,10 +91,27 @@ export function PiePlot() {
               dataIndex: index,
               highlightScope: series[seriesId].highlightScope,
               formattedArcLabel: getItemLabel(arcLabel, arcLabelMinAngle, item)
-            }));
+            }, slotProps == null ? void 0 : slotProps.pieArcLabel));
           })]
         })
       }, seriesId);
     })
   });
-}
+}
+process.env.NODE_ENV !== "production" ? PiePlot.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 { PiePlot };

package/esm/ScatterChart/ScatterChart.js

@@ -26,7 +26,9 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props,
     leftAxis,
     rightAxis,
     bottomAxis,
-    children
+    children,
+    slots,
+    slotProps
   } = props;
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
     ref: ref,
@@ -44,8 +46,16 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props,
       topAxis: topAxis,
       leftAxis: leftAxis,
       rightAxis: rightAxis,
-      bottomAxis: bottomAxis
-    }), /*#__PURE__*/_jsx(ScatterPlot, {}), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({
+      bottomAxis: bottomAxis,
+      slots: slots,
+      slotProps: slotProps
+    }), /*#__PURE__*/_jsx(ScatterPlot, {
+      slots: slots,
+      slotProps: slotProps
+    }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
+      slots: slots,
+      slotProps: slotProps
+    })), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({
       x: "none",
       y: "none"
     }, axisHighlight)), /*#__PURE__*/_jsx(ChartsTooltip, _extends({
@@ -76,8 +86,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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]),
   children: PropTypes.node,
@@ -104,8 +119,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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]),
   legend: PropTypes.shape({
@@ -122,6 +142,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
       horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
     }),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     spacing: PropTypes.number
   }),
   margin: PropTypes.shape({
@@ -144,8 +166,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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]),
   series: PropTypes.arrayOf(PropTypes.shape({
@@ -167,6 +194,16 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     xAxisKey: PropTypes.string,
     yAxisKey: PropTypes.string
   })).isRequired,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
   tooltip: PropTypes.shape({
@@ -189,8 +226,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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]),
   viewBox: PropTypes.shape({
@@ -213,15 +255,17 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    maxTicks: PropTypes.number,
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    minTicks: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number,
-    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   })),
   yAxis: PropTypes.arrayOf(PropTypes.shape({
@@ -237,15 +281,17 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    maxTicks: PropTypes.number,
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    minTicks: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number,
-    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }))
 } : void 0;

package/esm/ScatterChart/ScatterPlot.js

@@ -1,9 +1,16 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { Scatter } from './Scatter';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
-export function ScatterPlot() {
+function ScatterPlot(props) {
+  var _slots$scatter;
+  const {
+    slots,
+    slotProps
+  } = props;
   const seriesData = React.useContext(SeriesContext).scatter;
   const axisData = React.useContext(CartesianContext);
   if (seriesData === undefined) {
@@ -21,6 +28,7 @@ export function ScatterPlot() {
   } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
+  const ScatterItems = (_slots$scatter = slots == null ? void 0 : slots.scatter) != null ? _slots$scatter : Scatter;
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: seriesOrder.map(seriesId => {
       const {
@@ -32,13 +40,30 @@ export function ScatterPlot() {
       } = series[seriesId];
       const xScale = xAxis[xAxisKey != null ? xAxisKey : defaultXAxisId].scale;
       const yScale = yAxis[yAxisKey != null ? yAxisKey : defaultYAxisId].scale;
-      return /*#__PURE__*/_jsx(Scatter, {
+      return /*#__PURE__*/_jsx(ScatterItems, _extends({
         xScale: xScale,
         yScale: yScale,
         color: color,
         markerSize: markerSize != null ? markerSize : 4,
         series: series[seriesId]
-      }, id);
+      }, slotProps == null ? void 0 : slotProps.scatter), id);
     })
   });
-}
+}
+process.env.NODE_ENV !== "production" ? ScatterPlot.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 { ScatterPlot };

package/esm/SparkLineChart/SparkLineChart.js

@@ -37,6 +37,8 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     showHighlight,
     axisHighlight: inAxisHighlight,
     children,
+    slots,
+    slotProps,
     data,
     plotType = 'line',
     valueFormatter = v => v.toString(),
@@ -73,8 +75,17 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     colors: colors,
     sx: sx,
     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, {}), plotType === 'line' && /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [/*#__PURE__*/_jsx(AreaPlot, {}), /*#__PURE__*/_jsx(LinePlot, {}), showHighlight && /*#__PURE__*/_jsx(SparkLineMarkPlot, {})]
+    children: [plotType === 'bar' && /*#__PURE__*/_jsx(BarPlot, {
+      slots: slots,
+      slotProps: slotProps
+    }), plotType === 'line' && /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx(AreaPlot, {
+        slots: slots,
+        slotProps: slotProps
+      }), /*#__PURE__*/_jsx(LinePlot, {
+        slots: slots,
+        slotProps: slotProps
+      }), showHighlight && /*#__PURE__*/_jsx(SparkLineMarkPlot, {})]
     }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), showTooltip && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), children]
   });
 });
@@ -134,6 +145,16 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @default false
    */
   showTooltip: PropTypes.bool,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
   tooltip: PropTypes.shape({
@@ -172,15 +193,17 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    maxTicks: PropTypes.number,
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    minTicks: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number,
-    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   })
 } : void 0;

package/esm/colorPalettes/colorPalettes.js

@@ -4,6 +4,6 @@ export const blueberryTwilightPalette = mode => mode === 'dark' ? blueberryTwili
 export const mangoFusionPaletteLight = ['#173A5E', '#00A3A0', '#C91B63', '#EF5350', '#FFA726', '#B800D8', '#60009B', '#2E96FF', '#2731C8', '#03008D'];
 export const mangoFusionPaletteDark = ['#41698F', '#19D0CD', '#DE196B', '#FC5F5C', '#FFD771', '#DA00FF', '#9001CB', '#72CCFF', '#2E96FF', '#3B48E0'];
 export const mangoFusionPalette = mode => mode === 'dark' ? mangoFusionPaletteDark : mangoFusionPaletteLight;
-export const cheerfulFiestaPaletteDark = ['#0072E6', '#66B2FF', '#FFB017', '#1F94AD', '#FF3143', '#FF6C63'];
-export const cheerfulFiestaPaletteLight = ['#0059B2', '#2E96FF', '#EA8C00', '#1F94AD', '#C82634', '#FF3143'];
+export const cheerfulFiestaPaletteDark = ['#0059B2', '#2E96FF', '#FFC24C', '#FF9F0E', '#F38200', '#2ABFDE', '#1F94AD', '#BD2C38', '#FF3143', '#FF8282'];
+export const cheerfulFiestaPaletteLight = ['#003A75', '#007FFF', '#FFC24C', '#FF9D09', '#CA6C00', '#127D94', '#1F94AD', '#C82634', '#FF3143', '#FF7E7E'];
 export const cheerfulFiestaPalette = mode => mode === 'dark' ? cheerfulFiestaPaletteDark : cheerfulFiestaPaletteLight;

package/esm/context/CartesianContextProvider.js

@@ -127,7 +127,8 @@ 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, {
-        range
+        range,
+        domain: extremums
       }));
       const niceScale = getScale(scaleType, extremums, range).nice(ticksNumber);
       const niceDomain = niceScale.domain();
@@ -176,7 +177,8 @@ 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, {
-        range
+        range,
+        domain: extremums
       }));
       const niceScale = getScale(scaleType, extremums, range).nice(ticksNumber);
       const niceDomain = niceScale.domain();
@@ -225,15 +227,17 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    maxTicks: PropTypes.number,
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    minTicks: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number,
-    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   })),
   yAxis: PropTypes.arrayOf(PropTypes.shape({
@@ -249,15 +253,17 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    maxTicks: PropTypes.number,
     min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-    minTicks: PropTypes.number,
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number,
-    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }))
 } : void 0;

package/esm/hooks/useTicks.js

@@ -2,13 +2,16 @@ import * as React from 'react';
 import { isBandScale } from '../internals/isBandScale';
 export function getTicksNumber(params) {
   const {
-    maxTicks = 999,
-    minTicks = 2,
-    tickSpacing = 50,
-    range
+    tickMaxStep,
+    tickMinStep,
+    tickNumber,
+    range,
+    domain
   } = params;
-  const estimatedTickNumber = Math.floor(Math.abs(range[1] - range[0]) / tickSpacing);
-  return Math.min(maxTicks, Math.max(minTicks, estimatedTickNumber));
+  const maxTicks = tickMinStep === undefined ? 999 : Math.floor(Math.abs(domain[1] - domain[0]) / tickMinStep);
+  const minTicks = tickMaxStep === undefined ? 2 : Math.ceil(Math.abs(domain[1] - domain[0]) / tickMaxStep);
+  const defaultizedTickNumber = tickNumber != null ? tickNumber : Math.floor(Math.abs(range[1] - range[0]) / 50);
+  return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber));
 }
 function useTicks(options) {
   const {

package/esm/internals/components/AxisSharedComponents.js

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