[charts] Allow setting a custom marker in legends and tooltips

docs/data/charts/legend/LegendCustomLabelMark.js

@@ -0,0 +1,38 @@
+import { BarChart } from '@mui/x-charts/BarChart';
+import * as React from 'react';
+
+const seriesConfig = [
+  { id: 0, data: [10], label: 'Series A' },
+  { id: 1, data: [15], label: 'Series B' },
+  { id: 2, data: [20], label: 'Series C' },
+  { id: 3, data: [10], label: 'Series D' },
+];
+
+const cross =
+  'M-5.35,-1.783L-1.783,-1.783L-1.783,-5.35L1.783,-5.35L1.783,-1.783L5.35,-1.783L5.35,1.783L1.783,1.783L1.783,5.35L-1.783,5.35L-1.783,1.783L-5.35,1.783Z';
+const diamond = 'M0,-7.423L4.285,0L0,7.423L-4.285,0Z';
+const star =
+  'M0,-7.528L1.69,-2.326L7.16,-2.326L2.735,0.889L4.425,6.09L0,2.875L-4.425,6.09L-2.735,0.889L-7.16,-2.326L-1.69,-2.326Z';
+const wye =
+  'M2.152,1.243L2.152,5.547L-2.152,5.547L-2.152,1.243L-5.88,-0.91L-3.728,-4.638L0,-2.485L3.728,-4.638L5.88,-0.91Z';
+const symbols = [cross, diamond, star, wye];
+
+function CustomLabelMark({ className, seriesId, color }) {
+  const symbol = symbols[seriesId];
+  return (
+    <svg className={className} viewBox="-8 -8 16 16" width={14} height={14}>
+      <path d={symbol} fill={color} />
+    </svg>
+  );
+}
+
+export default function LegendCustomLabelMark() {
+  return (
+    <BarChart
+      series={seriesConfig}
+      xAxis={[{ scaleType: 'band', data: ['A'] }]}
+      height={200}
+      slots={{ labelMark: CustomLabelMark }}
+    />
+  );
+}

docs/data/charts/legend/LegendCustomLabelMark.tsx

@@ -0,0 +1,39 @@
+import { BarChart } from '@mui/x-charts/BarChart';
+import * as React from 'react';
+import { ChartsLabelMarkProps } from '@mui/x-charts/ChartsLabel';
+
+const seriesConfig = [
+  { id: 0, data: [10], label: 'Series A' },
+  { id: 1, data: [15], label: 'Series B' },
+  { id: 2, data: [20], label: 'Series C' },
+  { id: 3, data: [10], label: 'Series D' },
+];
+
+const cross =
+  'M-5.35,-1.783L-1.783,-1.783L-1.783,-5.35L1.783,-5.35L1.783,-1.783L5.35,-1.783L5.35,1.783L1.783,1.783L1.783,5.35L-1.783,5.35L-1.783,1.783L-5.35,1.783Z';
+const diamond = 'M0,-7.423L4.285,0L0,7.423L-4.285,0Z';
+const star =
+  'M0,-7.528L1.69,-2.326L7.16,-2.326L2.735,0.889L4.425,6.09L0,2.875L-4.425,6.09L-2.735,0.889L-7.16,-2.326L-1.69,-2.326Z';
+const wye =
+  'M2.152,1.243L2.152,5.547L-2.152,5.547L-2.152,1.243L-5.88,-0.91L-3.728,-4.638L0,-2.485L3.728,-4.638L5.88,-0.91Z';
+const symbols = [cross, diamond, star, wye];
+
+function CustomLabelMark({ className, seriesId, color }: ChartsLabelMarkProps) {
+  const symbol = symbols[seriesId as number];
+  return (
+    <svg className={className} viewBox="-8 -8 16 16" width={14} height={14}>
+      <path d={symbol} fill={color} />
+    </svg>
+  );
+}
+
+export default function LegendCustomLabelMark() {
+  return (
+    <BarChart
+      series={seriesConfig}
+      xAxis={[{ scaleType: 'band', data: ['A'] }]}
+      height={200}
+      slots={{ labelMark: CustomLabelMark }}
+    />
+  );
+}

docs/data/charts/legend/LegendCustomLabelMark.tsx.preview

@@ -0,0 +1,6 @@
+<BarChart
+  series={seriesConfig}
+  xAxis={[{ scaleType: 'band', data: ['A'] }]}
+  height={200}
+  slots={{ labelMark: CustomLabelMark }}
+/>

docs/data/charts/legend/legend.md

@@ -71,6 +71,16 @@ For the `pie` series, the `labelMarkType` property is available for each of the
 
 {{"demo": "LegendMarkTypeNoSnap.js", "hideToolbar": true, "bg": "playground"}}
 
+For more advanced use cases, you can also provide a component to the `labelMark` slot to fully customize the mark.
+
+{{"demo": "LegendCustomLabelMark.js" }}
+
+Passing a component to `labelMark` or using `labelMarkType` affects not only the legend but other places where the label mark is shown, such as tooltips.
+
+When a `labelMark` slot is provided, the `labelMarkType` property is ignored.
+
+Customizing the mark shape of a pie chart depending on the series is slightly different. You can find how to do it in [this example](/x/react-charts/pie-demo/#pie-chart-with-custom-legend-and-tooltip).
+
 ### Scrollable legend
 
 The legend can be made scrollable by setting the `overflowY` for vertical legends or `overflowX` for horizontal legends.

docs/data/charts/pie-demo/PieChartWithCustomLegendTooltip.js

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { PieChart } from '@mui/x-charts/PieChart';
+
+export default function PieChartWithCustomLegendTooltip() {
+  return (
+    <PieChart
+      series={[
+        {
+          data: [
+            { id: 'cross', value: 10, label: 'Cross' },
+            { id: 'diamond', value: 15, label: 'Diamond' },
+            { id: 'star', value: 20, label: 'Star' },
+          ],
+        },
+      ]}
+      width={200}
+      height={200}
+      slots={{ labelMark: CustomMark }}
+    />
+  );
+}
+
+const cross =
+  'M-5.35,-1.783L-1.783,-1.783L-1.783,-5.35L1.783,-5.35L1.783,-1.783L5.35,-1.783L5.35,1.783L1.783,1.783L1.783,5.35L-1.783,5.35L-1.783,1.783L-5.35,1.783Z';
+const diamond = 'M0,-7.423L4.285,0L0,7.423L-4.285,0Z';
+const star =
+  'M0,-7.528L1.69,-2.326L7.16,-2.326L2.735,0.889L4.425,6.09L0,2.875L-4.425,6.09L-2.735,0.889L-7.16,-2.326L-1.69,-2.326Z';
+
+const symbols = [cross, diamond, star];
+
+function CustomMark({ dataIndex, color, className }) {
+  const data = symbols[dataIndex ?? 0];
+
+  return (
+    <svg className={className} width={14} height={14} viewBox="-8 -8 16 16">
+      <path d={data ?? symbols[0]} fill={color} />
+    </svg>
+  );
+}

docs/data/charts/pie-demo/PieChartWithCustomLegendTooltip.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { PieChart } from '@mui/x-charts/PieChart';
+import { ChartsLabelMarkProps } from '@mui/x-charts/ChartsLabel';
+
+export default function PieChartWithCustomLegendTooltip() {
+  return (
+    <PieChart
+      series={[
+        {
+          data: [
+            { id: 'cross', value: 10, label: 'Cross' },
+            { id: 'diamond', value: 15, label: 'Diamond' },
+            { id: 'star', value: 20, label: 'Star' },
+          ],
+        },
+      ]}
+      width={200}
+      height={200}
+      slots={{ labelMark: CustomMark }}
+    />
+  );
+}
+
+const cross =
+  'M-5.35,-1.783L-1.783,-1.783L-1.783,-5.35L1.783,-5.35L1.783,-1.783L5.35,-1.783L5.35,1.783L1.783,1.783L1.783,5.35L-1.783,5.35L-1.783,1.783L-5.35,1.783Z';
+const diamond = 'M0,-7.423L4.285,0L0,7.423L-4.285,0Z';
+const star =
+  'M0,-7.528L1.69,-2.326L7.16,-2.326L2.735,0.889L4.425,6.09L0,2.875L-4.425,6.09L-2.735,0.889L-7.16,-2.326L-1.69,-2.326Z';
+
+const symbols = [cross, diamond, star];
+
+function CustomMark({ dataIndex, color, className }: ChartsLabelMarkProps) {
+  const data = symbols[dataIndex ?? 0];
+
+  return (
+    <svg className={className} width={14} height={14} viewBox="-8 -8 16 16">
+      <path d={data ?? symbols[0]} fill={color} />
+    </svg>
+  );
+}

docs/data/charts/pie-demo/PieChartWithCustomLegendTooltip.tsx.preview

@@ -0,0 +1,14 @@
+<PieChart
+  series={[
+    {
+      data: [
+        { id: 'cross', value: 10, label: 'Cross' },
+        { id: 'diamond', value: 15, label: 'Diamond' },
+        { id: 'star', value: 20, label: 'Star' },
+      ],
+    },
+  ]}
+  width={200}
+  height={200}
+  slots={{ labelMark: CustomMark }}
+/>

docs/data/charts/pie-demo/pie-demo.md

@@ -31,3 +31,7 @@ components: PieArc, PieArcLabel, PieArcLabelPlot, PieArcPlot, PieChart, PiePlot
 ## PieChartWithCenterLabel
 
 {{"demo": "PieChartWithCenterLabel.js"}}
+
+## Pie chart with custom legend and tooltip
+
+{{"demo": "PieChartWithCustomLegendTooltip.js"}}

docs/pages/x/api/charts/bar-chart.json

@@ -130,6 +130,7 @@
       "default": "BarLabel",
       "class": null
     },
+    { "name": "labelMark", "description": "Symbol next to the label of a series.", "class": null },
     {
       "name": "legend",
       "description": "Custom rendering of the legend.",

docs/pages/x/api/charts/charts-axis-tooltip-content.json

@@ -1,5 +1,13 @@
 {
-  "props": { "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } } },
+  "props": {
+    "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
+    "slotProps": { "type": { "name": "object" }, "default": "{}" },
+    "slots": {
+      "type": { "name": "object" },
+      "default": "{}",
+      "additionalInfo": { "slotsApi": true }
+    }
+  },
   "name": "ChartsAxisTooltipContent",
   "imports": [
     "import { ChartsAxisTooltipContent } from '@mui/x-charts/ChartsTooltip';",

docs/pages/x/api/charts/charts-item-tooltip-content.json

@@ -1,5 +1,13 @@
 {
-  "props": { "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } } },
+  "props": {
+    "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
+    "slotProps": { "type": { "name": "object" }, "default": "{}" },
+    "slots": {
+      "type": { "name": "object" },
+      "default": "{}",
+      "additionalInfo": { "slotsApi": true }
+    }
+  },
   "name": "ChartsItemTooltipContent",
   "imports": [
     "import { ChartsItemTooltipContent } from '@mui/x-charts/ChartsTooltip';",

docs/pages/x/api/charts/charts-legend.json

@@ -25,6 +25,7 @@
     "import { ChartsLegend } from '@mui/x-charts-pro';"
   ],
   "slots": [
+    { "name": "labelMark", "description": "Symbol next to the label of a series.", "class": null },
     {
       "name": "legend",
       "description": "Custom rendering of the legend.",

docs/pages/x/api/charts/charts-tooltip.json

@@ -80,6 +80,7 @@
     "import { ChartsTooltip } from '@mui/x-charts-pro';"
   ],
   "slots": [
+    { "name": "labelMark", "description": "Symbol next to the label of a series.", "class": null },
     {
       "name": "tooltip",
       "description": "Custom component for the tooltip popper.",

docs/pages/x/api/charts/line-chart.json

@@ -116,6 +116,7 @@
       "default": "ChartsText",
       "class": null
     },
+    { "name": "labelMark", "description": "Symbol next to the label of a series.", "class": null },
     {
       "name": "legend",
       "description": "Custom rendering of the legend.",

docs/pages/x/api/charts/pie-chart.json

@@ -49,6 +49,7 @@
     "import { PieChart } from '@mui/x-charts-pro';"
   ],
   "slots": [
+    { "name": "labelMark", "description": "Symbol next to the label of a series.", "class": null },
     {
       "name": "legend",
       "description": "Custom rendering of the legend.",

docs/pages/x/api/charts/scatter-chart.json

@@ -121,6 +121,7 @@
       "default": "ChartsText",
       "class": null
     },
+    { "name": "labelMark", "description": "Symbol next to the label of a series.", "class": null },
     {
       "name": "legend",
       "description": "Custom rendering of the legend.",

docs/pages/x/api/charts/spark-line-chart.json

@@ -104,6 +104,7 @@
       "default": "BarElementPath",
       "class": null
     },
+    { "name": "labelMark", "description": "Symbol next to the label of a series.", "class": null },
     {
       "name": "line",
       "description": "The component that renders the line.",

docs/translations/api-docs/charts/bar-chart/bar-chart.json

@@ -76,6 +76,7 @@
     "axisTickLabel": "Custom component for tick label.",
     "bar": "The component that renders the bar.",
     "barLabel": "The component that renders the bar label.",
+    "labelMark": "Symbol next to the label of a series.",
     "legend": "Custom rendering of the legend.",
     "loadingOverlay": "Overlay component rendered when the chart is in a loading state.",
     "noDataOverlay": "Overlay component rendered when the chart has no data to display.",

docs/translations/api-docs/charts/charts-axis-tooltip-content/charts-axis-tooltip-content.json

@@ -1,7 +1,9 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "classes": { "description": "Override or extend the styles applied to the component." }
+    "classes": { "description": "Override or extend the styles applied to the component." },
+    "slotProps": { "description": "The props used for each component slot." },
+    "slots": { "description": "Overridable component slots." }
   },
   "classDescriptions": {
     "axisValueCell": {

docs/translations/api-docs/charts/charts-item-tooltip-content/charts-item-tooltip-content.json

@@ -1,7 +1,9 @@
 {
   "componentDescription": "",
   "propDescriptions": {
-    "classes": { "description": "Override or extend the styles applied to the component." }
+    "classes": { "description": "Override or extend the styles applied to the component." },
+    "slotProps": { "description": "The props used for each component slot." },
+    "slots": { "description": "Overridable component slots." }
   },
   "classDescriptions": {
     "axisValueCell": {

docs/translations/api-docs/charts/charts-legend/charts-legend.json

@@ -30,5 +30,8 @@
       "nodeName": "the legend in column layout"
     }
   },
-  "slotDescriptions": { "legend": "Custom rendering of the legend." }
+  "slotDescriptions": {
+    "labelMark": "Symbol next to the label of a series.",
+    "legend": "Custom rendering of the legend."
+  }
 }

docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json

@@ -30,10 +30,8 @@
       "description": "Options provided to the <a href=\"https://popper.js.org/docs/v2/constructors/#options\"><code>Popper.js</code></a> instance."
     },
     "popperRef": { "description": "A ref that points to the used popper instance." },
-    "slotProps": { "description": "The props used for each slot inside the Popper." },
-    "slots": {
-      "description": "The components used for each slot inside the Popper. Either a string to use a HTML element or a component."
-    },
+    "slotProps": { "description": "The props used for each component slot." },
+    "slots": { "description": "Overridable component slots." },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },
@@ -68,5 +66,8 @@
       "nodeName": "the valueCell element"
     }
   },
-  "slotDescriptions": { "tooltip": "Custom component for the tooltip popper." }
+  "slotDescriptions": {
+    "labelMark": "Symbol next to the label of a series.",
+    "tooltip": "Custom component for the tooltip popper."
+  }
 }

docs/translations/api-docs/charts/line-chart/line-chart.json

@@ -67,6 +67,7 @@
     "axisLine": "Custom component for the axis main line.",
     "axisTick": "Custom component for the axis tick.",
     "axisTickLabel": "Custom component for tick label.",
+    "labelMark": "Symbol next to the label of a series.",
     "legend": "Custom rendering of the legend.",
     "line": "The component that renders the line.",
     "lineHighlight": "",

docs/translations/api-docs/charts/pie-chart/pie-chart.json

@@ -38,6 +38,7 @@
   },
   "classDescriptions": {},
   "slotDescriptions": {
+    "labelMark": "Symbol next to the label of a series.",
     "legend": "Custom rendering of the legend.",
     "loadingOverlay": "Overlay component rendered when the chart is in a loading state.",
     "noDataOverlay": "Overlay component rendered when the chart has no data to display.",

docs/translations/api-docs/charts/scatter-chart/scatter-chart.json

@@ -76,6 +76,7 @@
     "axisLine": "Custom component for the axis main line.",
     "axisTick": "Custom component for the axis tick.",
     "axisTickLabel": "Custom component for tick label.",
+    "labelMark": "Symbol next to the label of a series.",
     "legend": "Custom rendering of the legend.",
     "loadingOverlay": "Overlay component rendered when the chart is in a loading state.",
     "noDataOverlay": "Overlay component rendered when the chart has no data to display.",

docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json

@@ -76,6 +76,7 @@
   "slotDescriptions": {
     "area": "The component that renders the area.",
     "bar": "The component that renders the bar.",
+    "labelMark": "Symbol next to the label of a series.",
     "line": "The component that renders the line.",
     "lineHighlight": "",
     "mark": "",