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

package/legacy/SparkLineChart/SparkLineChart.js

@@ -1,27 +1,30 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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";
-var SparkLineMarkPlot = styled(MarkPlot)(_defineProperty({}, "& .".concat(markElementClasses.root), _defineProperty({
-  display: 'none'
-}, "&.".concat(markElementClasses.highlighted), {
-  display: 'inherit'
-})));
 var 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/)
+ */
 var SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props, ref) {
   var xAxis = props.xAxis,
     width = props.width,
@@ -61,14 +64,15 @@ var SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props
       valueFormatter: valueFormatter
     }, plotType === 'bar' ? {} : {
       area: area,
-      curve: curve
+      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
       }, function (_, index) {
@@ -81,7 +85,10 @@ var SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props
     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,
@@ -89,8 +96,14 @@ var SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props
       }), /*#__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 = {
@@ -165,6 +178,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'])
   }),
   /**
@@ -196,6 +211,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']),
@@ -204,6 +220,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/legacy/constants.js

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

package/legacy/context/CartesianContextProvider.js

@@ -12,9 +12,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";
-var DEFAULT_CATEGORY_GAP_RATIO = 0.1;
+var DEFAULT_CATEGORY_GAP_RATIO = 0.2;
+var DEFAULT_BAR_GAP_RATIO = 0.1;
 
 // TODO: those might be better placed in a distinct file
 var xExtremumGetters = {
@@ -33,6 +34,12 @@ export var CartesianContext = /*#__PURE__*/React.createContext({
   xAxisIds: [],
   yAxisIds: []
 });
+
+/**
+ * API:
+ *
+ * - [CartesianContextProvider API](https://mui.com/x/api/charts/cartesian-context-provider/)
+ */
 function CartesianContextProvider(_ref) {
   var inXAxis = _ref.xAxis,
     inYAxis = _ref.yAxis,
@@ -124,20 +131,21 @@ function CartesianContextProvider(_ref) {
         maxData = _getAxisExtremum2[1];
       var range = [drawingArea.left, drawingArea.left + drawingArea.width];
       if (isBandScaleConfig(axis)) {
-        var _axis$categoryGapRati;
+        var _axis$categoryGapRati, _axis$barGapRatio;
         var categoryGapRatio = (_axis$categoryGapRati = axis.categoryGapRatio) != null ? _axis$categoryGapRati : DEFAULT_CATEGORY_GAP_RATIO;
+        var barGapRatio = (_axis$barGapRatio = axis.barGapRatio) != null ? _axis$barGapRatio : DEFAULT_BAR_GAP_RATIO;
         completedXAxis[axis.id] = _extends({
           categoryGapRatio: categoryGapRatio,
-          barGapRatio: 0
+          barGapRatio: 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') {
@@ -146,17 +154,17 @@ function CartesianContextProvider(_ref) {
       }
       var scaleType = (_axis$scaleType = axis.scaleType) != null ? _axis$scaleType : 'linear';
       var extremums = [(_axis$min = axis.min) != null ? _axis$min : minData, (_axis$max = axis.max) != null ? _axis$max : maxData];
-      var ticksNumber = getTicksNumber(_extends({}, axis, {
+      var tickNumber = getTickNumber(_extends({}, axis, {
         range: range,
         domain: extremums
       }));
-      var niceScale = getScale(scaleType, extremums, range).nice(ticksNumber);
+      var niceScale = getScale(scaleType, extremums, range).nice(tickNumber);
       var niceDomain = niceScale.domain();
       var 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: scaleType,
         scale: niceScale.domain(domain),
-        ticksNumber: ticksNumber
+        tickNumber: tickNumber
       });
     });
     var allYAxis = [].concat(_toConsumableArray((_yAxis$map = yAxis == null ? void 0 : yAxis.map(function (axis, index) {
@@ -187,13 +195,13 @@ function CartesianContextProvider(_ref) {
           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') {
@@ -202,17 +210,17 @@ function CartesianContextProvider(_ref) {
       }
       var scaleType = (_axis$scaleType2 = axis.scaleType) != null ? _axis$scaleType2 : 'linear';
       var extremums = [(_axis$min3 = axis.min) != null ? _axis$min3 : minData, (_axis$max3 = axis.max) != null ? _axis$max3 : maxData];
-      var ticksNumber = getTicksNumber(_extends({}, axis, {
+      var tickNumber = getTickNumber(_extends({}, axis, {
         range: range,
         domain: extremums
       }));
-      var niceScale = getScale(scaleType, extremums, range).nice(ticksNumber);
+      var niceScale = getScale(scaleType, extremums, range).nice(tickNumber);
       var niceDomain = niceScale.domain();
       var 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: scaleType,
         scale: niceScale.domain(domain),
-        ticksNumber: ticksNumber
+        tickNumber: tickNumber
       });
     });
     return {
@@ -254,6 +262,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']),
@@ -262,6 +271,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,
@@ -280,6 +292,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']),
@@ -288,6 +301,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/legacy/context/DrawingProvider.js

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

package/legacy/hooks/useChartDimensions.js

@@ -7,6 +7,8 @@ var useChartDimensions = function useChartDimensions(width, height, margin) {
     return {
       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)
     };

package/legacy/hooks/useMounted.js

@@ -0,0 +1,21 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+export function useMounted() {
+  var defer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    mountedState = _React$useState2[0],
+    setMountedState = _React$useState2[1];
+  useEnhancedEffect(function () {
+    if (!defer) {
+      setMountedState(true);
+    }
+  }, [defer]);
+  React.useEffect(function () {
+    if (defer) {
+      setMountedState(true);
+    }
+  }, [defer]);
+  return mountedState;
+}

package/legacy/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 var useReducedMotion = function useReducedMotion() {
+  // Taken from: https://github.com/pmndrs/react-spring/blob/02ec877bbfab0df46da0e4a47d5f68d3e731206a/packages/shared/src/hooks/useReducedMotion.ts#L13
+
+  useIsomorphicLayoutEffect(function () {
+    var mql = window.matchMedia('(prefers-reduced-motion)');
+    var handleMediaChange = function 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 function () {
+      mql.removeEventListener('change', handleMediaChange);
+    };
+  }, []);
+};

package/legacy/hooks/useTicks.js

@@ -1,7 +1,8 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
 import { isBandScale } from '../internals/isBandScale';
-export function getTicksNumber(params) {
+export function getTickNumber(params) {
   var tickMaxStep = params.tickMaxStep,
     tickMinStep = params.tickMinStep,
     tickNumber = params.tickNumber,
@@ -14,8 +15,9 @@ export function getTicksNumber(params) {
 }
 function useTicks(options) {
   var scale = options.scale,
-    ticksNumber = options.ticksNumber,
-    valueFormatter = options.valueFormatter;
+    tickNumber = options.tickNumber,
+    valueFormatter = options.valueFormatter,
+    tickInterval = options.tickInterval;
   return React.useMemo(function () {
     // band scale
     if (isBandScale(scale)) {
@@ -25,7 +27,8 @@ function useTicks(options) {
         return [].concat(_toConsumableArray(domain.map(function (value) {
           var _valueFormatter;
           return {
-            formattedValue: (_valueFormatter = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter : value,
+            value: value,
+            formattedValue: (_valueFormatter = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter : "".concat(value),
             offset: scale(value) - (scale.step() - scale.bandwidth()) / 2,
             labelOffset: scale.step() / 2
           };
@@ -37,23 +40,27 @@ function useTicks(options) {
       }
 
       // scale type = 'point'
-      return domain.map(function (value) {
+      var filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || _typeof(tickInterval) === 'object' && tickInterval || domain;
+      return filteredDomain.map(function (value) {
         var _valueFormatter2;
         return {
-          formattedValue: (_valueFormatter2 = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter2 : value,
+          value: value,
+          formattedValue: (_valueFormatter2 = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter2 : "".concat(value),
           offset: scale(value),
           labelOffset: 0
         };
       });
     }
-    return scale.ticks(ticksNumber).map(function (value) {
+    var ticks = _typeof(tickInterval) === 'object' ? tickInterval : scale.ticks(tickNumber);
+    return ticks.map(function (value) {
       var _valueFormatter3;
       return {
-        formattedValue: (_valueFormatter3 = valueFormatter == null ? void 0 : valueFormatter(value)) != null ? _valueFormatter3 : scale.tickFormat(ticksNumber)(value),
+        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/legacy/index.js

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

package/legacy/internals/components/AxisSharedComponents.js

@@ -1,6 +1,5 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _$concat, _styled;
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { styled } from '@mui/material/styles';
 import { axisClasses } from '../../ChartsAxis/axisClasses';
 export var AxisRoot = styled('g', {
@@ -9,72 +8,19 @@ export var AxisRoot = styled('g', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.root;
   }
-})((_styled = {}, _defineProperty(_styled, "&.".concat(axisClasses.directionY), (_$concat = {}, _defineProperty(_$concat, ".".concat(axisClasses.tickLabel), {
-  dominantBaseline: 'middle'
-}), _defineProperty(_$concat, ".".concat(axisClasses.label), {
-  dominantBaseline: 'auto',
-  textAnchor: 'middle'
-}), _$concat)), _defineProperty(_styled, "&.".concat(axisClasses.left), _defineProperty({}, ".".concat(axisClasses.tickLabel), {
-  dominantBaseline: 'central',
-  textAnchor: 'end'
-})), _defineProperty(_styled, "&.".concat(axisClasses.right), _defineProperty({}, ".".concat(axisClasses.tickLabel), {
-  dominantBaseline: 'central',
-  textAnchor: 'start'
-})), _defineProperty(_styled, "&.".concat(axisClasses.bottom), _defineProperty({}, ".".concat(axisClasses.tickLabel, ", .").concat(axisClasses.label), {
-  dominantBaseline: 'hanging',
-  textAnchor: 'middle'
-})), _defineProperty(_styled, "&.".concat(axisClasses.top), _defineProperty({}, ".".concat(axisClasses.tickLabel, ", .").concat(axisClasses.label), {
-  dominantBaseline: 'baseline',
-  textAnchor: 'middle'
-})), _styled));
-export var ChartsLine = styled('line', {
-  name: 'MuiChartsAxis',
-  slot: 'Line',
-  overridesResolver: function overridesResolver(props, styles) {
-    return styles.line;
-  }
 })(function (_ref) {
+  var _ref2;
   var theme = _ref.theme;
-  return {
-    stroke: theme.palette.text.primary,
+  return _ref2 = {}, _defineProperty(_ref2, "& .".concat(axisClasses.tickLabel), _extends({}, theme.typography.caption, {
+    fill: (theme.vars || theme).palette.text.primary
+  })), _defineProperty(_ref2, "& .".concat(axisClasses.label), _extends({}, theme.typography.body1, {
+    fill: (theme.vars || theme).palette.text.primary
+  })), _defineProperty(_ref2, "& .".concat(axisClasses.line), {
+    stroke: (theme.vars || theme).palette.text.primary,
     shapeRendering: 'crispEdges',
     strokeWidth: 1
-  };
-});
-export var ChartsTick = styled('line', {
-  name: 'MuiChartsAxis',
-  slot: 'Tick',
-  overridesResolver: function overridesResolver(props, styles) {
-    return styles.tick;
-  }
-})(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    stroke: theme.palette.text.primary,
+  }), _defineProperty(_ref2, "& .".concat(axisClasses.tick), {
+    stroke: (theme.vars || theme).palette.text.primary,
     shapeRendering: 'crispEdges'
-  };
-});
-export var ChartsTickLabel = styled('text', {
-  name: 'MuiChartsAxis',
-  slot: 'TickLabel',
-  overridesResolver: function overridesResolver(props, styles) {
-    return styles.tickLabel;
-  }
-})(function (_ref3) {
-  var theme = _ref3.theme;
-  return _extends({}, theme.typography.caption, {
-    fill: theme.palette.text.primary
-  });
-});
-export var ChartsLabel = styled('text', {
-  name: 'MuiChartsAxis',
-  slot: 'Label',
-  overridesResolver: function overridesResolver(props, styles) {
-    return styles.label;
-  }
-})(function (_ref4) {
-  var theme = _ref4.theme;
-  return _extends({}, theme.typography.body1, {
-    fill: theme.palette.text.primary
-  });
+  }), _ref2;
 });

package/legacy/internals/components/ChartsText.js

@@ -0,0 +1,79 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/esm/extends";
+var _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(_ref) {
+  var style = _ref.style,
+    needsComputation = _ref.needsComputation,
+    text = _ref.text;
+  return text.split('\n').map(function (subText) {
+    return _extends({
+      text: subText
+    }, needsComputation ? getStringSize(subText, style) : {
+      width: 0,
+      height: 0
+    });
+  });
+}
+export function ChartsText(props) {
+  var x = props.x,
+    y = props.y,
+    styleProps = props.style,
+    text = props.text,
+    ownerState = props.ownerState,
+    textProps = _objectWithoutProperties(props, _excluded);
+  var _ref2 = styleProps != null ? styleProps : {},
+    angle = _ref2.angle,
+    textAnchor = _ref2.textAnchor,
+    dominantBaseline = _ref2.dominantBaseline,
+    style = _objectWithoutProperties(_ref2, _excluded2);
+  var wordsByLines = React.useMemo(function () {
+    return getWordsByLines({
+      style: style,
+      needsComputation: text.includes('\n'),
+      text: text
+    });
+  }, [style, text]);
+  var 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;
+  }
+  var 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(".concat(angle, ", ").concat(x, ", ").concat(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(function (line, index) {
+      return /*#__PURE__*/_jsx("tspan", {
+        x: x,
+        dy: "".concat(index === 0 ? startDy : wordsByLines[0].height, "px"),
+        dominantBaseline: dominantBaseline // Propagated to fix Safari issue: https://github.com/mui/mui-x/issues/10808
+        ,
+        children: line.text
+      }, index);
+    })
+  }));
+}