@mui/x-charts 7.3.2 → 7.5.0

package/models/seriesType/pie.d.ts

@@ -8,7 +8,10 @@ export type PieValueType = {
      */
     id: PieItemId;
     value: number;
-    label?: string;
+    /**
+     * The label to display on the tooltip, arc, or the legend. It can be a string or a function.
+     */
+    label?: string | ((location: 'tooltip' | 'legend' | 'arc') => string);
     color?: string;
 };
 export type DefaultizedPieValueType = PieValueType & Omit<D3PieArcDatum<any>, 'data'> & {
@@ -16,9 +19,9 @@ export type DefaultizedPieValueType = PieValueType & Omit<D3PieArcDatum<any>, 'd
     formattedValue: string;
 };
 export type ChartsPieSorting = 'none' | 'asc' | 'desc' | ((a: number, b: number) => number);
-export interface PieSeriesType<Tdata = PieValueType> extends CommonSeriesType<Tdata> {
+export interface PieSeriesType<TData = PieValueType> extends CommonSeriesType<TData> {
     type: 'pie';
-    data: Tdata[];
+    data: TData[];
     /**
      * The radius between circle center and the beginning of the arc.
      * Can be a number (in px) or a string with a percentage such as '50%'.
@@ -69,7 +72,9 @@ export interface PieSeriesType<Tdata = PieValueType> extends CommonSeriesType<Td
     /**
      * The label displayed into the arc.
      */
-    arcLabel?: 'formattedValue' | 'label' | 'value' | ((item: DefaultizedPieValueType) => string);
+    arcLabel?: 'formattedValue' | 'label' | 'value' | ((item: Omit<DefaultizedPieValueType, 'label'> & {
+        label?: string;
+    }) => string);
     /**
      * The minimal angle required to display the arc label.
      * @default 0

package/models/seriesType/scatter.d.ts

@@ -13,7 +13,10 @@ export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType>, C
     type: 'scatter';
     data: ScatterValueType[];
     markerSize?: number;
-    label?: string;
+    /**
+     * The label to display on the tooltip or the legend. It can be a string or a function.
+     */
+    label?: string | ((location: 'tooltip' | 'legend') => string);
     /**
      * If true, the interaction will not use element hover for this series.
      * @default false

package/modern/BarChart/BarChart.js

@@ -46,6 +46,7 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     rightAxis,
     bottomAxis,
     skipAnimation,
+    borderRadius,
     onItemClick,
     onAxisClick,
     children,
@@ -98,7 +99,8 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
         slots: slots,
         slotProps: slotProps,
         skipAnimation: skipAnimation,
-        onItemClick: onItemClick
+        onItemClick: onItemClick,
+        borderRadius: borderRadius
       }), /*#__PURE__*/_jsx(ChartsOverlay, {
         loading: loading,
         slots: slots,
@@ -137,6 +139,10 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     x: PropTypes.oneOf(['band', 'line', 'none']),
     y: PropTypes.oneOf(['band', 'line', 'none'])
   }),
+  /**
+   * Defines the border radius of the bar element.
+   */
+  borderRadius: PropTypes.number,
   /**
    * Indicate which axis to display the bottom of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
@@ -199,6 +205,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   }),
   /**
    * If `true`, a loading overlay is displayed.
+   * @default false
    */
   loading: PropTypes.bool,
   /**
@@ -291,6 +298,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    }), PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
       min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -299,11 +311,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
       type: PropTypes.oneOf(['piecewise']).isRequired
-    }), PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
     })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,
@@ -344,6 +351,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    }), PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
       min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -352,11 +364,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
       type: PropTypes.oneOf(['piecewise']).isRequired
-    }), PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
     })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,

package/modern/BarChart/BarClipPath.js

@@ -0,0 +1,42 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["style", "maskId"];
+import * as React from 'react';
+import { animated } from '@react-spring/web';
+import { getRadius } from './getRadius';
+import { jsx as _jsx } from "react/jsx-runtime";
+const buildInset = corners => `inset(0px round ${corners.topLeft}px ${corners.topRight}px ${corners.bottomRight}px ${corners.bottomLeft}px)`;
+function BarClipRect(props) {
+  const radiusData = props.ownerState;
+  return /*#__PURE__*/_jsx(animated.rect, {
+    style: _extends({}, props.style, {
+      clipPath: (props.ownerState.layout === 'vertical' ? props.style?.height : props.style?.width).to(value => buildInset({
+        topLeft: Math.min(value, getRadius('top-left', radiusData)),
+        topRight: Math.min(value, getRadius('top-right', radiusData)),
+        bottomRight: Math.min(value, getRadius('bottom-right', radiusData)),
+        bottomLeft: Math.min(value, getRadius('bottom-left', radiusData))
+      }))
+    })
+  });
+}
+/**
+ * @ignore - internal component.
+ */
+function BarClipPath(props) {
+  const {
+      style,
+      maskId
+    } = props,
+    rest = _objectWithoutPropertiesLoose(props, _excluded);
+  if (!props.borderRadius || props.borderRadius <= 0) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("clipPath", {
+    id: maskId,
+    children: /*#__PURE__*/_jsx(BarClipRect, {
+      ownerState: rest,
+      style: style
+    })
+  });
+}
+export { BarClipPath };

package/modern/BarChart/BarElement.js

@@ -79,16 +79,17 @@ function BarElement(props) {
   const barProps = useSlotProps({
     elementType: Bar,
     externalSlotProps: slotProps?.bar,
-    additionalProps: _extends({}, other, getInteractionItemProps({
+    externalForwardedProps: other,
+    additionalProps: _extends({}, getInteractionItemProps({
       type: 'bar',
       seriesId: id,
       dataIndex
     }), {
       style,
-      className: classes.root,
       onClick,
       cursor: onClick ? 'pointer' : 'unset'
     }),
+    className: classes.root,
     ownerState
   });
   return /*#__PURE__*/_jsx(Bar, _extends({}, barProps));

package/modern/BarChart/BarPlot.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["skipAnimation", "onItemClick"];
+const _excluded = ["skipAnimation", "onItemClick", "borderRadius"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTransition } from '@react-spring/web';
@@ -10,6 +10,8 @@ import { BarElement } from './BarElement';
 import { isBandScaleConfig, isPointScaleConfig } from '../models/axis';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
 import getColor from './getColor';
+import { useChartId } from '../hooks';
+import { BarClipPath } from './BarClipPath';
 
 /**
  * Solution of the equations
@@ -20,7 +22,7 @@ import getColor from './getColor';
  * @param gapRatio The ratio of the gap between bars over the bar width.
  * @returns The bar width and the offset between bars.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function getBandSize({
   bandWidth: W,
   numberOfGroups: N,
@@ -46,6 +48,7 @@ const useAggregatedData = () => {
     seriesOrder: []
   };
   const axisData = React.useContext(CartesianContext);
+  const chartId = useChartId();
   const {
     series,
     stackingGroups
@@ -58,6 +61,7 @@ const useAggregatedData = () => {
   } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
+  const masks = {};
   const data = stackingGroups.flatMap(({
     ids: groupIds
   }, groupIndex) => {
@@ -111,7 +115,8 @@ const useAggregatedData = () => {
         const valueCoordinates = values.map(v => verticalLayout ? yScale(v) : xScale(v));
         const minValueCoord = Math.round(Math.min(...valueCoordinates));
         const maxValueCoord = Math.round(Math.max(...valueCoordinates));
-        return {
+        const stackId = series[seriesId].stack;
+        const result = {
           seriesId,
           dataIndex,
           layout: series[seriesId].layout,
@@ -122,14 +127,41 @@ const useAggregatedData = () => {
           height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,
           width: verticalLayout ? barWidth : maxValueCoord - minValueCoord,
           color: colorGetter(dataIndex),
-          highlightScope: series[seriesId].highlightScope
+          highlightScope: series[seriesId].highlightScope,
+          value: series[seriesId].data[dataIndex],
+          maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
         };
+        if (!masks[result.maskId]) {
+          masks[result.maskId] = {
+            id: result.maskId,
+            width: 0,
+            height: 0,
+            hasNegative: false,
+            hasPositive: false,
+            layout: result.layout,
+            xOrigin: xScale(0),
+            yOrigin: yScale(0),
+            x: 0,
+            y: 0
+          };
+        }
+        const mask = masks[result.maskId];
+        mask.width = result.layout === 'vertical' ? result.width : mask.width + result.width;
+        mask.height = result.layout === 'vertical' ? mask.height + result.height : result.height;
+        mask.x = Math.min(mask.x === 0 ? Infinity : mask.x, result.x);
+        mask.y = Math.min(mask.y === 0 ? Infinity : mask.y, result.y);
+        mask.hasNegative = mask.hasNegative || (result.value ?? 0) < 0;
+        mask.hasPositive = mask.hasPositive || (result.value ?? 0) > 0;
+        return result;
       });
     });
   });
-  return data;
+  return {
+    completedData: data,
+    masksData: Object.values(masks)
+  };
 };
-const getOutStyle = ({
+const leaveStyle = ({
   layout,
   yOrigin,
   x,
@@ -148,7 +180,7 @@ const getOutStyle = ({
   height,
   width: 0
 });
-const getInStyle = ({
+const enterStyle = ({
   x,
   width,
   y,
@@ -172,41 +204,77 @@ const getInStyle = ({
  * - [BarPlot API](https://mui.com/x/api/charts/bar-plot/)
  */
 function BarPlot(props) {
-  const completedData = useAggregatedData();
+  const {
+    completedData,
+    masksData
+  } = useAggregatedData();
   const {
       skipAnimation,
-      onItemClick
+      onItemClick,
+      borderRadius
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const transition = useTransition(completedData, {
     keys: bar => `${bar.seriesId}-${bar.dataIndex}`,
-    from: getOutStyle,
-    leave: getOutStyle,
-    enter: getInStyle,
-    update: getInStyle,
+    from: leaveStyle,
+    leave: leaveStyle,
+    enter: enterStyle,
+    update: enterStyle,
+    immediate: skipAnimation
+  });
+  const maskTransition = useTransition(masksData, {
+    keys: v => v.id,
+    from: leaveStyle,
+    leave: leaveStyle,
+    enter: enterStyle,
+    update: enterStyle,
     immediate: skipAnimation
   });
-  return /*#__PURE__*/_jsx(React.Fragment, {
-    children: transition((style, {
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [maskTransition((style, {
+      id,
+      hasPositive,
+      hasNegative,
+      layout
+    }) => {
+      return /*#__PURE__*/_jsx(BarClipPath, {
+        maskId: id,
+        borderRadius: borderRadius,
+        hasNegative: hasNegative,
+        hasPositive: hasPositive,
+        layout: layout,
+        style: style
+      });
+    }), transition((style, {
       seriesId,
       dataIndex,
       color,
-      highlightScope
-    }) => /*#__PURE__*/_jsx(BarElement, _extends({
-      id: seriesId,
-      dataIndex: dataIndex,
-      highlightScope: highlightScope,
-      color: color
-    }, other, {
-      onClick: onItemClick && (event => {
-        onItemClick(event, {
-          type: 'bar',
-          seriesId,
-          dataIndex
-        });
-      }),
-      style: style
-    })))
+      highlightScope,
+      maskId
+    }) => {
+      const barElement = /*#__PURE__*/_jsx(BarElement, _extends({
+        id: seriesId,
+        dataIndex: dataIndex,
+        color: color,
+        highlightScope: highlightScope
+      }, other, {
+        onClick: onItemClick && (event => {
+          onItemClick(event, {
+            type: 'bar',
+            seriesId,
+            dataIndex
+          });
+        }),
+        style: style
+      }));
+      if (!borderRadius || borderRadius <= 0) {
+        return barElement;
+      }
+      return /*#__PURE__*/_jsx("g", {
+        clipPath: `url(#${maskId})`,
+        children: barElement
+      });
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
@@ -214,6 +282,10 @@ process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Defines the border radius of the bar element.
+   */
+  borderRadius: PropTypes.number,
   /**
    * Callback fired when a bar item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/modern/BarChart/getRadius.js

@@ -0,0 +1,30 @@
+/**
+ * Returns if the corner should have a radius or not based on the layout and the data.
+ * @param {GetRadiusCorner} corner The corner to check.
+ * @param {GetRadiusData} cornerData The data for the corner.
+ * @returns {number} The radius for the corner.
+ */
+export const getRadius = (corner, {
+  hasNegative,
+  hasPositive,
+  borderRadius,
+  layout
+}) => {
+  if (!borderRadius) {
+    return 0;
+  }
+  const isVertical = layout === 'vertical';
+  if (corner === 'top-left' && (isVertical && hasPositive || !isVertical && hasNegative)) {
+    return borderRadius;
+  }
+  if (corner === 'top-right' && (isVertical && hasPositive || !isVertical && hasPositive)) {
+    return borderRadius;
+  }
+  if (corner === 'bottom-right' && (isVertical && hasNegative || !isVertical && hasPositive)) {
+    return borderRadius;
+  }
+  if (corner === 'bottom-left' && (isVertical && hasNegative || !isVertical && hasNegative)) {
+    return borderRadius;
+  }
+  return 0;
+};

package/modern/BarChart/legend.js

@@ -1,13 +1,20 @@
+import { getLabel } from '../internals/getLabel';
 const legendGetter = params => {
   const {
     seriesOrder,
     series
   } = params;
-  const data = seriesOrder.map(seriesId => ({
-    color: series[seriesId].color,
-    label: series[seriesId].label,
-    id: seriesId
-  }));
-  return data.filter(item => item.label !== undefined);
+  return seriesOrder.reduce((acc, seriesId) => {
+    const formattedLabel = getLabel(series[seriesId].label, 'legend');
+    if (formattedLabel === undefined) {
+      return acc;
+    }
+    acc.push({
+      color: series[seriesId].color,
+      label: formattedLabel,
+      id: seriesId
+    });
+    return acc;
+  }, []);
 };
 export default legendGetter;

package/modern/BarChart/types.js

@@ -0,0 +1 @@
+export {};

package/modern/ChartContainer/ChartContainer.js

@@ -127,6 +127,11 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    }), PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
       min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -135,11 +140,6 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
       type: PropTypes.oneOf(['piecewise']).isRequired
-    }), PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
     })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,
@@ -180,6 +180,11 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    }), PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
       min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -188,11 +193,6 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
       type: PropTypes.oneOf(['piecewise']).isRequired
-    }), PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
     })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,

package/modern/ChartsGrid/ChartsGrid.js

@@ -4,7 +4,7 @@ const _excluded = ["vertical", "horizontal"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled } from '@mui/material/styles';
+import { styled, useThemeProps } from '@mui/material/styles';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { useTicks } from '../hooks/useTicks';
 import { getChartsGridUtilityClass, chartsGridClasses } from './chartsGridClasses';
@@ -12,15 +12,22 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridRoot = styled('g', {
   name: 'MuiChartsGrid',
   slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  overridesResolver: (props, styles) => [{
+    [`&.${chartsGridClasses.verticalLine}`]: styles.verticalLine
+  }, {
+    [`&.${chartsGridClasses.horizontalLine}`]: styles.horizontalLine
+  }, styles.root]
+})({});
+const GridLine = styled('line', {
+  name: 'MuiChartsGrid',
+  slot: 'Line',
+  overridesResolver: (props, styles) => styles.line
 })(({
   theme
 }) => ({
-  [`& .${chartsGridClasses.line}`]: {
-    stroke: (theme.vars || theme).palette.divider,
-    shapeRendering: 'crispEdges',
-    strokeWidth: 1
-  }
+  stroke: (theme.vars || theme).palette.divider,
+  shapeRendering: 'crispEdges',
+  strokeWidth: 1
 }));
 const useUtilityClasses = ({
   classes
@@ -42,18 +49,22 @@ const useUtilityClasses = ({
  * - [ChartsGrid API](https://mui.com/x/api/charts/charts-axis/)
  */
 function ChartsGrid(props) {
+  const themeProps = useThemeProps({
+    props,
+    name: 'MuiChartsGrid'
+  });
   const {
       vertical,
       horizontal
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    } = themeProps,
+    other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const {
     xAxis,
     xAxisIds,
     yAxis,
     yAxisIds
   } = React.useContext(CartesianContext);
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(themeProps);
   const horizontalAxisId = yAxisIds[0];
   const verticalAxisId = xAxisIds[0];
   const {
@@ -81,7 +92,7 @@ function ChartsGrid(props) {
     children: [vertical && xTicks.map(({
       formattedValue,
       offset
-    }) => /*#__PURE__*/_jsx("line", {
+    }) => /*#__PURE__*/_jsx(GridLine, {
       y1: yScale.range()[0],
       y2: yScale.range()[1],
       x1: offset,
@@ -90,7 +101,7 @@ function ChartsGrid(props) {
     }, `vertical-${formattedValue}`)), horizontal && yTicks.map(({
       formattedValue,
       offset
-    }) => /*#__PURE__*/_jsx("line", {
+    }) => /*#__PURE__*/_jsx(GridLine, {
       y1: offset,
       y2: offset,
       x1: xScale.range()[0],

package/modern/ChartsOverlay/ChartsLoadingOverlay.js

@@ -1,5 +1,5 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["message"];
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
@@ -7,7 +7,7 @@ import { useDrawingArea } from '../hooks/useDrawingArea';
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledText = styled('text')(({
   theme
-}) => ({
+}) => _extends({}, theme.typography.body2, {
   stroke: 'none',
   fill: theme.palette.text.primary,
   shapeRendering: 'crispEdges',
@@ -29,6 +29,6 @@ export function ChartsLoadingOverlay(props) {
     x: left + width / 2,
     y: top + height / 2
   }, other, {
-    children: message ?? 'Loading data ...'
+    children: message ?? 'Loading data…'
   }));
 }

package/modern/ChartsOverlay/ChartsNoDataOverlay.js

@@ -1,5 +1,5 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["message"];
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
@@ -7,7 +7,7 @@ import { useDrawingArea } from '../hooks/useDrawingArea';
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledText = styled('text')(({
   theme
-}) => ({
+}) => _extends({}, theme.typography.body2, {
   stroke: 'none',
   fill: theme.palette.text.primary,
   shapeRendering: 'crispEdges',

package/modern/ChartsTooltip/DefaultChartsAxisTooltipContent.js

@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipMark, ChartsTooltipRow } from './ChartsTooltipTable';
 import { isCartesianSeries, utcFormatter } from './utils';
+import { getLabel } from '../internals/getLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function DefaultChartsAxisTooltipContent(props) {
   const {
@@ -50,6 +51,7 @@ function DefaultChartsAxisTooltipContent(props) {
           if (formattedValue == null) {
             return null;
           }
+          const formattedLabel = getLabel(label, 'tooltip');
           return /*#__PURE__*/_jsxs(ChartsTooltipRow, {
             className: classes.row,
             children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
@@ -60,8 +62,8 @@ function DefaultChartsAxisTooltipContent(props) {
               })
             }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
               className: clsx(classes.labelCell, classes.cell),
-              children: label ? /*#__PURE__*/_jsx(Typography, {
-                children: label
+              children: formattedLabel ? /*#__PURE__*/_jsx(Typography, {
+                children: formattedLabel
               }) : null
             }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
               className: clsx(classes.valueCell, classes.cell),