@mui/x-charts 6.0.0-alpha.14 → 6.0.0-alpha.16

package/modern/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,
@@ -227,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,
@@ -256,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']),
@@ -264,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,
@@ -282,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']),
@@ -290,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/modern/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) {
   const {
     slots,

package/modern/SparkLineChart/SparkLineChart.js

@@ -15,6 +15,16 @@ const SPARKLINE_DEFAULT_MARGIN = {
   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,
@@ -195,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']),
@@ -203,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/modern/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/modern/context/CartesianContextProvider.js

@@ -10,7 +10,7 @@ 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.2;
 const DEFAULT_BAR_GAP_RATIO = 0.1;
@@ -109,13 +109,13 @@ function CartesianContextProvider({
           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') {
@@ -124,17 +124,17 @@ function CartesianContextProvider({
       }
       const scaleType = axis.scaleType ?? 'linear';
       const extremums = [axis.min ?? minData, 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.min ?? niceDomain[0], axis.max ?? niceDomain[1]];
       completedXAxis[axis.id] = _extends({}, axis, {
         scaleType,
         scale: niceScale.domain(domain),
-        ticksNumber
+        tickNumber
       });
     });
     const allYAxis = [...(yAxis?.map((axis, index) => _extends({
@@ -157,13 +157,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') {
@@ -172,17 +172,17 @@ function CartesianContextProvider({
       }
       const scaleType = axis.scaleType ?? 'linear';
       const extremums = [axis.min ?? minData, 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.min ?? niceDomain[0], axis.max ?? niceDomain[1]];
       completedYAxis[axis.id] = _extends({}, axis, {
         scaleType,
         scale: niceScale.domain(domain),
-        ticksNumber
+        tickNumber
       });
     });
     return {
@@ -222,6 +222,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']),
@@ -230,6 +231,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,
@@ -248,6 +252,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']),
@@ -256,6 +261,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/modern/context/DrawingProvider.js

@@ -9,6 +9,8 @@ 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
 });

package/modern/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/modern/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/modern/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/modern/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
@@ -26,7 +27,8 @@ function useTicks(options) {
       if (scale.bandwidth() > 0) {
         // scale type = 'band'
         return [...domain.map(value => ({
-          formattedValue: valueFormatter?.(value) ?? value,
+          value,
+          formattedValue: valueFormatter?.(value) ?? `${value}`,
           offset: scale(value) - (scale.step() - scale.bandwidth()) / 2,
           labelOffset: scale.step() / 2
         })), {
@@ -37,17 +39,21 @@ function useTicks(options) {
       }
 
       // scale type = 'point'
-      return domain.map(value => ({
-        formattedValue: valueFormatter?.(value) ?? value,
+      const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
+      return filteredDomain.map(value => ({
+        value,
+        formattedValue: valueFormatter?.(value) ?? `${value}`,
         offset: scale(value),
         labelOffset: 0
       }));
     }
-    return scale.ticks(ticksNumber).map(value => ({
-      formattedValue: valueFormatter?.(value) ?? scale.tickFormat(ticksNumber)(value),
+    const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);
+    return ticks.map(value => ({
+      value,
+      formattedValue: valueFormatter?.(value) ?? scale.tickFormat(tickNumber)(value),
       offset: scale(value),
       labelOffset: 0
     }));
-  }, [ticksNumber, scale, valueFormatter]);
+  }, [tickNumber, scale, valueFormatter, tickInterval]);
 }
 export default useTicks;

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v6.0.0-alpha.14
+ * @mui/x-charts v6.0.0-alpha.16
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/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.vars || 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.vars || 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.vars || 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.vars || 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'
+  }
 }));

package/modern/internals/components/ChartsText.js

@@ -0,0 +1,75 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["x", "y", "style", "text", "ownerState"],
+  _excluded2 = ["angle", "textAnchor", "dominantBaseline"];
+import * as React from 'react';
+import { getStringSize } from '../domUtils';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function getWordsByLines({
+  style,
+  needsComputation,
+  text
+}) {
+  return text.split('\n').map(subText => _extends({
+    text: subText
+  }, needsComputation ? getStringSize(subText, style) : {
+    width: 0,
+    height: 0
+  }));
+}
+export function ChartsText(props) {
+  const {
+      x,
+      y,
+      style: styleProps,
+      text
+    } = props,
+    textProps = _objectWithoutPropertiesLoose(props, _excluded);
+  const _ref = styleProps ?? {},
+    {
+      angle,
+      textAnchor,
+      dominantBaseline
+    } = _ref,
+    style = _objectWithoutPropertiesLoose(_ref, _excluded2);
+  const wordsByLines = React.useMemo(() => getWordsByLines({
+    style,
+    needsComputation: text.includes('\n'),
+    text
+  }), [style, text]);
+  let startDy;
+  switch (dominantBaseline) {
+    case 'hanging':
+      startDy = 0;
+      break;
+    case 'central':
+      startDy = (wordsByLines.length - 1) / 2 * -wordsByLines[0].height;
+      break;
+    default:
+      startDy = (wordsByLines.length - 1) * -wordsByLines[0].height;
+      break;
+  }
+  const transforms = [];
+  // if (scaleToFit) {
+  //   const lineWidth = wordsByLines[0].width;
+  //   transforms.push(`scale(${(isNumber(width as number) ? (width as number) / lineWidth : 1) / lineWidth})`);
+  // }
+  if (angle) {
+    transforms.push(`rotate(${angle}, ${x}, ${y})`);
+  }
+  if (transforms.length) {
+    textProps.transform = transforms.join(' ');
+  }
+  return /*#__PURE__*/_jsx("text", _extends({}, textProps, {
+    x: x,
+    y: y,
+    textAnchor: textAnchor,
+    dominantBaseline: dominantBaseline,
+    style: style,
+    children: wordsByLines.map((line, index) => /*#__PURE__*/_jsx("tspan", {
+      x: x,
+      dy: `${index === 0 ? startDy : wordsByLines[0].height}px`,
+      children: line.text
+    }, index))
+  }));
+}