@mui/x-charts 6.0.0-alpha.9 → 6.18.1

package/modern/ChartsReferenceLine/ChartsReferenceLine.js

@@ -0,0 +1,70 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { ChartsXReferenceLine } from './ChartsXReferenceLine';
+import { ChartsYReferenceLine } from './ChartsYReferenceLine';
+import { jsx as _jsx } from "react/jsx-runtime";
+function ChartsReferenceLine(props) {
+  if (props.x !== undefined && props.y !== undefined) {
+    throw new Error('MUI-X: The ChartsReferenceLine can not have both `x` and `y` props set.');
+  }
+  if (props.x === undefined && props.y === undefined) {
+    throw new Error('MUI-X: The ChartsReferenceLine should have a value in `x` or `y` prop.');
+  }
+  if (props.x !== undefined) {
+    return /*#__PURE__*/_jsx(ChartsXReferenceLine, _extends({}, props));
+  }
+  return /*#__PURE__*/_jsx(ChartsYReferenceLine, _extends({}, props));
+}
+process.env.NODE_ENV !== "production" ? ChartsReferenceLine.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The id of the axis used for the reference value.
+   * @default The `id` of the first defined axis.
+   */
+  axisId: PropTypes.string,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * The label to display along the reference line.
+   */
+  label: PropTypes.string,
+  /**
+   * The alignment if the label is in the chart drawing area.
+   * @default 'middle'
+   */
+  labelAlign: PropTypes.oneOf(['end', 'middle', 'start']),
+  /**
+   * The style applied to the label.
+   */
+  labelStyle: PropTypes.object,
+  /**
+   * The style applied to the line.
+   */
+  lineStyle: PropTypes.object,
+  /**
+   * Additional space arround the label in px.
+   * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes.
+   * @default 5
+   */
+  spacing: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    x: PropTypes.number,
+    y: PropTypes.number
+  })]),
+  /**
+   * The x value associated with the reference line.
+   * If defined the reference line will be vertical.
+   */
+  x: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]),
+  /**
+   * The y value associated with the reference line.
+   * If defined the reference line will be horizontal.
+   */
+  y: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string])
+} : void 0;
+export { ChartsReferenceLine };

package/modern/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -0,0 +1,104 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import composeClasses from '@mui/utils/composeClasses';
+import { useDrawingArea, useXScale } from '../hooks';
+import { ReferenceLineRoot } from './common';
+import { ChartsText } from '../internals/components/ChartsText';
+import { getReferenceLineUtilityClass } from './chartsReferenceLineClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const getTextParams = ({
+  top,
+  height,
+  spacingY,
+  labelAlign = 'middle'
+}) => {
+  switch (labelAlign) {
+    case 'start':
+      return {
+        y: top + spacingY,
+        style: {
+          dominantBaseline: 'hanging',
+          textAnchor: 'start'
+        }
+      };
+    case 'end':
+      return {
+        y: top + height - spacingY,
+        style: {
+          dominantBaseline: 'auto',
+          textAnchor: 'start'
+        }
+      };
+    default:
+      return {
+        y: top + height / 2,
+        style: {
+          dominantBaseline: 'central',
+          textAnchor: 'start'
+        }
+      };
+  }
+};
+export function getXReferenceLineClasses(classes) {
+  return composeClasses({
+    root: ['root', 'vertical'],
+    line: ['line'],
+    label: ['label']
+  }, getReferenceLineUtilityClass, classes);
+}
+let warnedOnce = false;
+function ChartsXReferenceLine(props) {
+  const {
+    x,
+    label = '',
+    spacing = 5,
+    classes: inClasses,
+    labelAlign,
+    lineStyle,
+    labelStyle,
+    axisId
+  } = props;
+  const {
+    top,
+    height
+  } = useDrawingArea();
+  const xAxisScale = useXScale(axisId);
+  const xPosition = xAxisScale(x);
+  if (xPosition === undefined) {
+    if (process.env.NODE_ENV !== 'production') {
+      if (!warnedOnce) {
+        warnedOnce = true;
+        console.error(`MUI X: the value ${x} does not exist in the data of x axis with id ${axisId}.`);
+      }
+    }
+    return null;
+  }
+  const d = `M ${xPosition} ${top} l 0 ${height}`;
+  const classes = getXReferenceLineClasses(inClasses);
+  const spacingX = typeof spacing === 'object' ? spacing.x ?? 0 : spacing;
+  const spacingY = typeof spacing === 'object' ? spacing.y ?? 0 : spacing;
+  const textParams = _extends({
+    x: xPosition + spacingX,
+    text: label,
+    fontSize: 12
+  }, getTextParams({
+    top,
+    height,
+    spacingY,
+    labelAlign
+  }), {
+    className: classes.label
+  });
+  return /*#__PURE__*/_jsxs(ReferenceLineRoot, {
+    className: classes.root,
+    children: [/*#__PURE__*/_jsx("path", {
+      d: d,
+      className: classes.line,
+      style: lineStyle
+    }), /*#__PURE__*/_jsx(ChartsText, _extends({}, textParams, {
+      style: _extends({}, textParams.style, labelStyle)
+    }))]
+  });
+}
+export { ChartsXReferenceLine };

package/modern/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -0,0 +1,104 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import composeClasses from '@mui/utils/composeClasses';
+import { useDrawingArea, useYScale } from '../hooks';
+import { ReferenceLineRoot } from './common';
+import { ChartsText } from '../internals/components/ChartsText';
+import { getReferenceLineUtilityClass } from './chartsReferenceLineClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const getTextParams = ({
+  left,
+  width,
+  spacingX,
+  labelAlign = 'middle'
+}) => {
+  switch (labelAlign) {
+    case 'start':
+      return {
+        x: left + spacingX,
+        style: {
+          dominantBaseline: 'auto',
+          textAnchor: 'start'
+        }
+      };
+    case 'end':
+      return {
+        x: left + width - spacingX,
+        style: {
+          dominantBaseline: 'auto',
+          textAnchor: 'end'
+        }
+      };
+    default:
+      return {
+        x: left + width / 2,
+        style: {
+          dominantBaseline: 'auto',
+          textAnchor: 'middle'
+        }
+      };
+  }
+};
+let warnedOnce = false;
+export function getYReferenceLineClasses(classes) {
+  return composeClasses({
+    root: ['root', 'horizontal'],
+    line: ['line'],
+    label: ['label']
+  }, getReferenceLineUtilityClass, classes);
+}
+function ChartsYReferenceLine(props) {
+  const {
+    y,
+    label = '',
+    spacing = 5,
+    classes: inClasses,
+    labelAlign,
+    lineStyle,
+    labelStyle,
+    axisId
+  } = props;
+  const {
+    left,
+    width
+  } = useDrawingArea();
+  const yAxisScale = useYScale(axisId);
+  const yPosition = yAxisScale(y);
+  if (yPosition === undefined) {
+    if (process.env.NODE_ENV !== 'production') {
+      if (!warnedOnce) {
+        warnedOnce = true;
+        console.error(`MUI X: the value ${y} does not exist in the data of y axis with id ${axisId}.`);
+      }
+    }
+    return null;
+  }
+  const d = `M ${left} ${yPosition} l ${width} 0`;
+  const classes = getYReferenceLineClasses(inClasses);
+  const spacingX = typeof spacing === 'object' ? spacing.x ?? 0 : spacing;
+  const spacingY = typeof spacing === 'object' ? spacing.y ?? 0 : spacing;
+  const textParams = _extends({
+    y: yPosition - spacingY,
+    text: label,
+    fontSize: 12
+  }, getTextParams({
+    left,
+    width,
+    spacingX,
+    labelAlign
+  }), {
+    className: classes.label
+  });
+  return /*#__PURE__*/_jsxs(ReferenceLineRoot, {
+    className: classes.root,
+    children: [/*#__PURE__*/_jsx("path", {
+      d: d,
+      className: classes.line,
+      style: lineStyle
+    }), /*#__PURE__*/_jsx(ChartsText, _extends({}, textParams, {
+      style: _extends({}, textParams.style, labelStyle)
+    }))]
+  });
+}
+export { ChartsYReferenceLine };

package/modern/ChartsReferenceLine/chartsReferenceLineClasses.js

@@ -0,0 +1,6 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getReferenceLineUtilityClass(slot) {
+  return generateUtilityClass('MuiChartsReferenceLine', slot);
+}
+export const referenceLineClasses = generateUtilityClasses('MuiChartsReferenceLine', ['root', 'vertical', 'horizontal', 'line', 'label']);

package/modern/ChartsReferenceLine/common.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { styled } from '@mui/material/styles';
+import { referenceLineClasses } from './chartsReferenceLineClasses';
+export const ReferenceLineRoot = styled('g')(({
+  theme
+}) => ({
+  [`& .${referenceLineClasses.line}`]: {
+    fill: 'none',
+    stroke: (theme.vars || theme).palette.text.primary,
+    shapeRendering: 'crispEdges',
+    strokeWidth: 1,
+    pointerEvents: 'none'
+  },
+  [`& .${referenceLineClasses.label}`]: _extends({
+    fill: (theme.vars || theme).palette.text.primary,
+    stroke: 'none',
+    pointerEvents: 'none',
+    fontSize: 12
+  }, theme.typography.body1)
+}));

package/modern/ChartsReferenceLine/index.js

@@ -0,0 +1,2 @@
+export * from './ChartsReferenceLine';
+export * from './chartsReferenceLineClasses';

package/modern/ChartsSurface.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className", "sx"];
-import { styled } from '@mui/system';
+const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className"];
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { useAxisEvents } from './hooks/useAxisEvents';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -16,8 +16,7 @@ export const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurfac
       width,
       height,
       viewBox,
-      disableAxisListener = false,
-      sx
+      disableAxisListener = false
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const svgView = _extends({
@@ -31,14 +30,7 @@ export const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurfac
     width: width,
     height: height,
     viewBox: `${svgView.x} ${svgView.y} ${svgView.width} ${svgView.height}`,
-    ref: ref,
-    sx: [{
-      '--ChartsLegend-itemWidth': '100px',
-      '--ChartsLegend-itemMarkSize': '20px',
-      '--ChartsLegend-rootSpacing': '5px',
-      '--ChartsLegend-labelSpacing': '5px',
-      '--ChartsLegend-rootOffsetY': '-20px'
-    }, ...(Array.isArray(sx) ? sx : [sx])]
+    ref: ref
   }, other, {
     children: [/*#__PURE__*/_jsx("title", {
       children: props.title

package/modern/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -1,5 +1,7 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
+import { useSlotProps } from '@mui/base/utils';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipMark, ChartsTooltipRow } from './ChartsTooltipTable';
@@ -20,7 +22,6 @@ export function DefaultChartsAxisContent(props) {
   const axisFormatter = axis.valueFormatter ?? (v => v.toLocaleString());
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
-    variant: "outlined",
     className: classes.root,
     children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
       children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/_jsx("thead", {
@@ -39,27 +40,33 @@ export function DefaultChartsAxisContent(props) {
           label,
           valueFormatter,
           data
-        }) => /*#__PURE__*/_jsxs(ChartsTooltipRow, {
-          children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: classes.markCell,
-            children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
-              ownerState: {
-                color
-              },
-              boxShadow: 1
-            })
-          }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: classes.labelCell,
-            children: label ? /*#__PURE__*/_jsx(Typography, {
-              children: label
-            }) : null
-          }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: classes.valueCell,
-            children: /*#__PURE__*/_jsx(Typography, {
-              children: valueFormatter(data[dataIndex])
-            })
-          })]
-        }, id))
+        }) => {
+          const formattedValue = valueFormatter(data[dataIndex]);
+          if (formattedValue == null) {
+            return null;
+          }
+          return /*#__PURE__*/_jsxs(ChartsTooltipRow, {
+            children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
+              className: classes.markCell,
+              children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
+                ownerState: {
+                  color
+                },
+                boxShadow: 1
+              })
+            }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
+              className: classes.labelCell,
+              children: label ? /*#__PURE__*/_jsx(Typography, {
+                children: label
+              }) : null
+            }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
+              className: classes.valueCell,
+              children: /*#__PURE__*/_jsx(Typography, {
+                children: formattedValue
+              })
+            })]
+          }, id);
+        })
       })]
     })
   });
@@ -67,6 +74,7 @@ export function DefaultChartsAxisContent(props) {
 export function ChartsAxisTooltipContent(props) {
   const {
     content,
+    contentProps,
     axisData,
     sx,
     classes
@@ -99,13 +107,19 @@ export function ChartsAxisTooltipContent(props) {
     return isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
   }, [USED_AXIS_ID, isXaxis, xAxis, yAxis]);
   const Content = content ?? DefaultChartsAxisContent;
-  return /*#__PURE__*/_jsx(Content, {
-    axisData: axisData,
-    series: relevantSeries,
-    axis: relevantAxis,
-    dataIndex: dataIndex,
-    axisValue: axisValue,
-    sx: sx,
-    classes: classes
+  const chartTooltipContentProps = useSlotProps({
+    elementType: Content,
+    externalSlotProps: contentProps,
+    additionalProps: {
+      axisData,
+      series: relevantSeries,
+      axis: relevantAxis,
+      dataIndex,
+      axisValue,
+      sx,
+      classes
+    },
+    ownerState: {}
   });
+  return /*#__PURE__*/_jsx(Content, _extends({}, chartTooltipContentProps));
 }

package/modern/ChartsTooltip/ChartsItemTooltipContent.js

@@ -1,4 +1,6 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { useSlotProps } from '@mui/base/utils';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { ChartsTooltipTable, ChartsTooltipCell, ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow } from './ChartsTooltipTable';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -29,7 +31,6 @@ export function DefaultChartsItemContent(props) {
   const formattedValue = series.valueFormatter(series.data[itemData.dataIndex]);
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
-    variant: "outlined",
     className: classes.root,
     children: /*#__PURE__*/_jsx(ChartsTooltipTable, {
       children: /*#__PURE__*/_jsx("tbody", {
@@ -58,14 +59,21 @@ export function ChartsItemTooltipContent(props) {
     content,
     itemData,
     sx,
-    classes
+    classes,
+    contentProps
   } = props;
   const series = React.useContext(SeriesContext)[itemData.type].series[itemData.seriesId];
   const Content = content ?? DefaultChartsItemContent;
-  return /*#__PURE__*/_jsx(Content, {
-    itemData: itemData,
-    series: series,
-    sx: sx,
-    classes: classes
+  const chartTooltipContentProps = useSlotProps({
+    elementType: Content,
+    externalSlotProps: contentProps,
+    additionalProps: {
+      itemData,
+      series,
+      sx,
+      classes
+    },
+    ownerState: {}
   });
+  return /*#__PURE__*/_jsx(Content, _extends({}, chartTooltipContentProps));
 }

package/modern/ChartsTooltip/ChartsTooltip.js

@@ -1,8 +1,11 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import Popper from '@mui/material/Popper';
-import NoSsr from '@mui/material/NoSsr';
+import composeClasses from '@mui/utils/composeClasses';
+import { styled } from '@mui/material/styles';
+import { Popper } from '@mui/base/Popper';
+import { NoSsr } from '@mui/base/NoSsr';
+import { useSlotProps } from '@mui/base/utils';
 import { InteractionContext } from '../context/InteractionProvider';
 import { generateVirtualElement, useMouseTracker, getTootipHasData } from './utils';
 import { ChartsItemTooltipContent } from './ChartsItemTooltipContent';
@@ -21,11 +24,33 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getTooltipUtilityClass, classes);
 };
+const ChartsTooltipRoot = styled(Popper, {
+  name: 'MuiChartsTooltip',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  theme
+}) => ({
+  pointerEvents: 'none',
+  zIndex: theme.zIndex.modal
+}));
+
+/**
+ * Demos:
+ *
+ * - [ChartsTooltip](https://mui.com/x/react-charts/tooltip/)
+ *
+ * API:
+ *
+ * - [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
+ */
 function ChartsTooltip(props) {
   const {
     trigger = 'axis',
     itemContent,
-    axisContent
+    axisContent,
+    slots,
+    slotProps
   } = props;
   const mousePosition = useMouseTracker();
   const {
@@ -38,33 +63,40 @@ function ChartsTooltip(props) {
   const classes = useUtilityClasses({
     classes: props.classes
   });
+  const PopperComponent = slots?.popper ?? ChartsTooltipRoot;
+  const popperProps = useSlotProps({
+    elementType: PopperComponent,
+    externalSlotProps: slotProps?.popper,
+    additionalProps: {
+      open: popperOpen,
+      placement: 'right-start',
+      anchorEl: generateVirtualElement(mousePosition)
+    },
+    ownerState: {}
+  });
   if (trigger === 'none') {
     return null;
   }
   return /*#__PURE__*/_jsx(NoSsr, {
-    children: popperOpen && /*#__PURE__*/_jsx(Popper, {
-      open: popperOpen,
-      placement: "right-start",
-      anchorEl: generateVirtualElement(mousePosition),
-      style: {
-        pointerEvents: 'none'
-      },
+    children: popperOpen && /*#__PURE__*/_jsx(PopperComponent, _extends({}, popperProps, {
       children: trigger === 'item' ? /*#__PURE__*/_jsx(ChartsItemTooltipContent, {
         itemData: displayedData,
-        content: itemContent,
+        content: slots?.itemContent ?? itemContent,
+        contentProps: slotProps?.itemContent,
         sx: {
           mx: 2
         },
         classes: classes
       }) : /*#__PURE__*/_jsx(ChartsAxisTooltipContent, {
         axisData: displayedData,
-        content: axisContent,
+        content: slots?.axisContent ?? axisContent,
+        contentProps: slotProps?.axisContent,
         sx: {
           mx: 2
         },
         classes: classes
       })
-    })
+    }))
   });
 }
 process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
@@ -74,6 +106,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * Component to override the tooltip content when triger is set to 'axis'.
+   * @deprecated Use slots.axisContent instead
    */
   axisContent: PropTypes.elementType,
   /**
@@ -82,8 +115,19 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
   classes: PropTypes.object,
   /**
    * Component to override the tooltip content when triger is set to 'item'.
+   * @deprecated Use slots.itemContent instead
    */
   itemContent: PropTypes.elementType,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
   /**
    * Select the kind of tooltip to display
    * - 'item': Shows data about the item below the mouse.

package/modern/ChartsTooltip/ChartsTooltipTable.js

@@ -1,11 +1,18 @@
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
+import Box from '@mui/system/Box';
 import { styled } from '@mui/material/styles';
 import { tooltipClasses } from './tooltipClasses';
-export const ChartsTooltipPaper = styled(Paper, {
+export const ChartsTooltipPaper = styled('div', {
   name: 'MuiChartsTooltip',
-  slot: 'Table'
-})({});
+  slot: 'Container'
+})(({
+  theme
+}) => ({
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  color: (theme.vars || theme).palette.text.primary,
+  transition: theme.transitions.create('box-shadow'),
+  border: `1px solid ${(theme.vars || theme).palette.divider}`,
+  borderRadius: theme.shape.borderRadius
+}));
 export const ChartsTooltipTable = styled('table', {
   name: 'MuiChartsTooltip',
   slot: 'Table'
@@ -14,7 +21,7 @@ export const ChartsTooltipTable = styled('table', {
 }) => ({
   borderSpacing: 0,
   '& thead td': {
-    borderBottom: `solid ${theme.palette.divider} 1px`
+    borderBottom: `solid ${(theme.vars || theme).palette.divider} 1px`
   }
 }));
 export const ChartsTooltipRow = styled('tr', {
@@ -37,13 +44,13 @@ export const ChartsTooltipCell = styled('td', {
   theme
 }) => ({
   verticalAlign: 'middle',
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   [`&.${tooltipClasses.labelCell}`]: {
     paddingLeft: theme.spacing(1)
   },
   [`&.${tooltipClasses.valueCell}`]: {
     paddingLeft: theme.spacing(4),
-    color: theme.palette.text.primary
+    color: (theme.vars || theme).palette.text.primary
   },
   'td:first-of-type&': {
     paddingLeft: theme.spacing(2)
@@ -63,7 +70,7 @@ export const ChartsTooltipMark = styled(Box, {
   height: theme.spacing(1),
   borderRadius: '50%',
   backgroundColor: ownerState.color,
-  borderColor: theme.palette.background.paper,
-  border: `solid ${theme.palette.background.paper} ${theme.spacing(0.25)}`,
+  borderColor: (theme.vars || theme).palette.background.paper,
+  border: `solid ${(theme.vars || theme).palette.background.paper} ${theme.spacing(0.25)}`,
   boxSizing: 'content-box'
 }));