[charts] Replace tooltip mark with style

docs/data/charts/styling/GradientTooltip.js

@@ -4,34 +4,40 @@ import { BarChart } from '@mui/x-charts/BarChart';
 export default function GradientTooltip() {
   return (
     <BarChart
-      sx={{
-        '--my-custom-gradient': 'url(#GlobalGradient)',
-      }}
-      slotProps={{
-        tooltip: {
-          sx: {
-            '--my-custom-gradient': 'linear-gradient(0deg, #123456, #81b2e4);',
-          },
-        },
-      }}
       series={[
         {
           label: 'series A',
           data: [50],
+          color: 'url(#Pattern)',
         },
         {
           label: 'series B',
           data: [100],
-          color: 'var(--my-custom-gradient, #123456)',
+          color: 'url(#Gradient)',
         },
       ]}
       width={400}
       height={200}
     >
-      <linearGradient id="GlobalGradient" x1="0%" y1="100%" x2="0%" y2="0%">
+      <linearGradient id="Gradient" x1="0%" y1="100%" x2="0%" y2="0%">
         <stop offset="0" stopColor="#123456" />
         <stop offset="1" stopColor="#81b2e4" />
       </linearGradient>
+      <pattern
+        id="Pattern"
+        patternUnits="userSpaceOnUse"
+        width="20"
+        height="40"
+        patternTransform="scale(0.5)"
+      >
+        <rect x="0" y="0" width="100%" height="100%" fill="#123456" />
+        <path
+          d="M0 30h20L10 50zm-10-20h20L0 30zm20 0h20L20 30zM0-10h20L10 10z"
+          strokeWidth="1"
+          stroke="#81b2e4"
+          fill="none"
+        />
+      </pattern>
     </BarChart>
   );
 }

docs/data/charts/styling/GradientTooltip.tsx

@@ -4,34 +4,40 @@ import { BarChart } from '@mui/x-charts/BarChart';
 export default function GradientTooltip() {
   return (
     <BarChart
-      sx={{
-        '--my-custom-gradient': 'url(#GlobalGradient)',
-      }}
-      slotProps={{
-        tooltip: {
-          sx: {
-            '--my-custom-gradient': 'linear-gradient(0deg, #123456, #81b2e4);',
-          },
-        },
-      }}
       series={[
         {
           label: 'series A',
           data: [50],
+          color: 'url(#Pattern)',
         },
         {
           label: 'series B',
           data: [100],
-          color: 'var(--my-custom-gradient, #123456)',
+          color: 'url(#Gradient)',
         },
       ]}
       width={400}
       height={200}
     >
-      <linearGradient id="GlobalGradient" x1="0%" y1="100%" x2="0%" y2="0%">
+      <linearGradient id="Gradient" x1="0%" y1="100%" x2="0%" y2="0%">
         <stop offset="0" stopColor="#123456" />
         <stop offset="1" stopColor="#81b2e4" />
       </linearGradient>
+      <pattern
+        id="Pattern"
+        patternUnits="userSpaceOnUse"
+        width="20"
+        height="40"
+        patternTransform="scale(0.5)"
+      >
+        <rect x="0" y="0" width="100%" height="100%" fill="#123456" />
+        <path
+          d="M0 30h20L10 50zm-10-20h20L0 30zm20 0h20L20 30zM0-10h20L10 10z"
+          strokeWidth="1"
+          stroke="#81b2e4"
+          fill="none"
+        />
+      </pattern>
     </BarChart>
   );
 }

docs/data/charts/styling/styling.md

@@ -171,15 +171,6 @@ It is possible to use gradients and patterns to fill the charts.
 This can be done by passing your gradient or pattern definition as children of the chart component.
 
 Note that the gradient or pattern defined that way is only usable for SVG.
-So a direct definition like `color: "url(#Pattern)'` would cause undefined colors in HTML elements such as the tooltip.
-The demo solves this issue by using a CSS variable `'--my-custom-pattern': 'url(#Pattern)'` to specify fallback color with `color: 'var(--my-custom-pattern, #123456)'`.
-
-{{"demo": "PatternPie.js"}}
-
-#### Using gradients on tooltips
-
-Gradients defined as SVG elements are not directly supported in HTML.
-However you can use the [gradient functions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions#gradient_functions) to define a gradient in CSS.
-This gradient can be used in the tooltip by setting the `sx` prop on the tooltip component, instead of the fallback color used in the previous examples.
+So a direct definition like `color: "url(#Pattern)'` would cause undefined colors in HTML elements.
 
 {{"demo": "GradientTooltip.js"}}

docs/data/charts/tooltip/CustomAxisTooltip.js

@@ -28,11 +28,11 @@ export function CustomAxisTooltip() {
           },
         },
         tbody: {
-          'tr:first-child': { td: { paddingTop: 1.5 } },
-          'tr:last-child': { td: { paddingBottom: 1.5 } },
+          'tr:first-of-type': { td: { paddingTop: 1.5 } },
+          'tr:last-of-type': { td: { paddingBottom: 1.5 } },
           tr: {
-            'td:first-child': { paddingLeft: 1.5 },
-            'td:last-child': { paddingRight: 1.5 },
+            'td:first-of-type': { paddingLeft: 1.5 },
+            'td:last-of-type': { paddingRight: 1.5 },
             td: {
               paddingRight: '7px',
               paddingBottom: '10px',

docs/data/charts/tooltip/CustomAxisTooltip.tsx

@@ -28,11 +28,11 @@ export function CustomAxisTooltip() {
           },
         },
         tbody: {
-          'tr:first-child': { td: { paddingTop: 1.5 } },
-          'tr:last-child': { td: { paddingBottom: 1.5 } },
+          'tr:first-of-type': { td: { paddingTop: 1.5 } },
+          'tr:last-of-type': { td: { paddingBottom: 1.5 } },
           tr: {
-            'td:first-child': { paddingLeft: 1.5 },
-            'td:last-child': { paddingRight: 1.5 },
+            'td:first-of-type': { paddingLeft: 1.5 },
+            'td:last-of-type': { paddingRight: 1.5 },
             td: {
               paddingRight: '7px',
               paddingBottom: '10px',

docs/data/charts/tooltip/ItemTooltipFixedY.js

@@ -67,7 +67,7 @@ export function ItemTooltipFixedY({ children }) {
     const handleMove = (event) => {
       positionRef.current = {
         x: event.clientX,
-        y: event.clientY,
+        y: (svgRef.current?.getBoundingClientRect().top ?? 0) + drawingArea.top,
       };
       popperRef.current?.update();
     };
@@ -99,8 +99,8 @@ export function ItemTooltipFixedY({ children }) {
             y: positionRef.current.y,
             top: positionRef.current.y,
             left: positionRef.current.x,
-            right: positionRef.current.x,
-            bottom: positionRef.current.y,
+            right: 0,
+            bottom: 0,
             width: 0,
             height: 0,
             toJSON: () => '',

docs/data/charts/tooltip/ItemTooltipFixedY.tsx

@@ -73,7 +73,7 @@ export function ItemTooltipFixedY({ children }: React.PropsWithChildren) {
     const handleMove = (event: PointerEvent) => {
       positionRef.current = {
         x: event.clientX,
-        y: event.clientY,
+        y: (svgRef.current?.getBoundingClientRect().top ?? 0) + drawingArea.top,
       };
       popperRef.current?.update();
     };
@@ -105,8 +105,8 @@ export function ItemTooltipFixedY({ children }: React.PropsWithChildren) {
             y: positionRef.current.y,
             top: positionRef.current.y,
             left: positionRef.current.x,
-            right: positionRef.current.x,
-            bottom: positionRef.current.y,
+            right: 0,
+            bottom: 0,
             width: 0,
             height: 0,
             toJSON: () => '',

packages/x-charts/src/BarChart/formatter.ts

@@ -57,6 +57,7 @@ const formatter: SeriesFormatter<'bar'> = (params, dataset) => {
       const dataKey = series[id].dataKey;
       completedSeries[id] = {
         layout: 'vertical',
+        labelMarkType: 'square',
         ...series[id],
         data: dataKey
           ? dataset!.map((data) => {

packages/x-charts/src/BarChart/legend.ts

@@ -12,7 +12,7 @@ const legendGetter: LegendGetter<'bar'> = (params) => {
     }
 
     acc.push({
-      markType: series[seriesId].labelMarkType ?? 'square',
+      markType: series[seriesId].labelMarkType,
       id: seriesId,
       seriesId,
       color: series[seriesId].color,

packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx

@@ -7,13 +7,13 @@ import clsx from 'clsx';
 import { ChartsTooltipClasses, useUtilityClasses } from './chartsTooltipClasses';
 import {
   ChartsTooltipCell,
-  ChartsTooltipMark,
   ChartsTooltipPaper,
   ChartsTooltipRow,
   ChartsTooltipTable,
 } from './ChartsTooltipTable';
 import { useAxisTooltip } from './useAxisTooltip';
 import { useXAxis, useYAxis } from '../hooks';
+import { ChartsLabelMark } from '../ChartsLabel/ChartsLabelMark';
 
 export interface ChartsAxisTooltipContentProps {
   /**
@@ -53,14 +53,16 @@ function ChartsAxisTooltipContent(props: ChartsAxisTooltipContentProps) {
         )}
 
         <tbody>
-          {seriesItems.map(({ seriesId, color, formattedValue, formattedLabel }) => {
+          {seriesItems.map(({ seriesId, color, formattedValue, formattedLabel, markType }) => {
             if (formattedValue == null) {
               return null;
             }
             return (
               <ChartsTooltipRow key={seriesId} className={classes.row}>
                 <ChartsTooltipCell className={clsx(classes.markCell, classes.cell)}>
-                  {color && <ChartsTooltipMark color={color} className={classes.mark} />}
+                  {color && (
+                    <ChartsLabelMark type={markType} color={color} className={classes.mark} />
+                  )}
                 </ChartsTooltipCell>
                 <ChartsTooltipCell className={clsx(classes.labelCell, classes.cell)}>
                   {formattedLabel ? <Typography>{formattedLabel}</Typography> : null}

packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx

@@ -7,11 +7,11 @@ import { ChartsTooltipClasses, useUtilityClasses } from './chartsTooltipClasses'
 import { useItemTooltip } from './useItemTooltip';
 import {
   ChartsTooltipCell,
-  ChartsTooltipMark,
   ChartsTooltipPaper,
   ChartsTooltipRow,
   ChartsTooltipTable,
 } from './ChartsTooltipTable';
+import { ChartsLabelMark } from '../ChartsLabel/ChartsLabelMark';
 
 export interface ChartsItemTooltipContentProps {
   /**
@@ -30,15 +30,15 @@ function ChartsItemTooltipContent(props: ChartsItemTooltipContentProps) {
   if (!tooltipData) {
     return null;
   }
-  const { color, label, formattedValue } = tooltipData;
+  const { color, label, formattedValue, markType } = tooltipData;
 
   return (
     <ChartsTooltipPaper sx={sx} className={classes.paper}>
       <ChartsTooltipTable className={classes.table}>
         <tbody>
           <ChartsTooltipRow className={classes.row}>
             <ChartsTooltipCell className={clsx(classes.markCell, classes.cell)}>
-              <ChartsTooltipMark color={color} className={classes.mark} />
+              <ChartsLabelMark type={markType} color={color} className={classes.mark} />
             </ChartsTooltipCell>
             <ChartsTooltipCell className={clsx(classes.labelCell, classes.cell)}>
               {label}

packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.ts

@@ -1,5 +1,4 @@
 import { styled } from '@mui/material/styles';
-import { shouldForwardProp } from '@mui/system/createStyled';
 import { chartsTooltipClasses } from './chartsTooltipClasses';
 
 /**
@@ -77,19 +76,3 @@ export const ChartsTooltipCell = styled('td', {
     paddingRight: theme.spacing(1.5),
   },
 }));
-
-/**
- * @ignore - internal component.
- */
-export const ChartsTooltipMark = styled('div', {
-  name: 'MuiChartsTooltip',
-  slot: 'Mark',
-  overridesResolver: (props, styles) => styles.mark,
-  shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'color',
-})<{ color: string }>(({ theme, color }) => ({
-  width: theme.spacing(1),
-  height: theme.spacing(1),
-  borderRadius: '50%',
-  background: color,
-  boxSizing: 'content-box',
-}));