[charts] Provide hooks to create custom tooltip

docs/data/charts/axis/AxisTextCustomizationNoSnap.js

@@ -2,14 +2,12 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
 import { BarChart } from '@mui/x-charts/BarChart';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 const chartSetting = {
   height: 300,
 };
 
-const valueFormatter = (value) => `${value}mm`;
-
 export default function AxisTextCustomizationNoSnap() {
   return (
     <ChartsUsageDemo

docs/data/charts/axis/GridDemo.js

@@ -2,15 +2,13 @@ import * as React from 'react';
 import { axisClasses } from '@mui/x-charts/ChartsAxis';
 import { chartsGridClasses } from '@mui/x-charts/ChartsGrid';
 import { BarChart } from '@mui/x-charts/BarChart';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 const chartSetting = {
   yAxis: [{ label: 'rainfall (mm)' }],
   height: 300,
 };
 
-const valueFormatter = (value) => `${value}mm`;
-
 export default function GridDemo() {
   return (
     <BarChart

docs/data/charts/axis/GridDemo.tsx

@@ -2,15 +2,13 @@ import * as React from 'react';
 import { axisClasses } from '@mui/x-charts/ChartsAxis';
 import { chartsGridClasses } from '@mui/x-charts/ChartsGrid';
 import { BarChart } from '@mui/x-charts/BarChart';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 const chartSetting = {
   yAxis: [{ label: 'rainfall (mm)' }],
   height: 300,
 };
 
-const valueFormatter = (value: number | null) => `${value}mm`;
-
 export default function GridDemo() {
   return (
     <BarChart

docs/data/charts/bars/BarsDataset.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BarChart } from '@mui/x-charts/BarChart';
 import { axisClasses } from '@mui/x-charts/ChartsAxis';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 const chartSetting = {
   yAxis: [
@@ -18,8 +18,6 @@ const chartSetting = {
   },
 };
 
-const valueFormatter = (value) => `${value}mm`;
-
 export default function BarsDataset() {
   return (
     <BarChart

docs/data/charts/bars/BarsDataset.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BarChart } from '@mui/x-charts/BarChart';
 import { axisClasses } from '@mui/x-charts/ChartsAxis';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 const chartSetting = {
   yAxis: [
@@ -18,8 +18,6 @@ const chartSetting = {
   },
 };
 
-const valueFormatter = (value: number | null) => `${value}mm`;
-
 export default function BarsDataset() {
   return (
     <BarChart

docs/data/charts/bars/GridDemo.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BarChart } from '@mui/x-charts/BarChart';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 const chartSetting = {
   xAxis: [
@@ -12,8 +12,6 @@ const chartSetting = {
   height: 400,
 };
 
-const valueFormatter = (value) => `${value}mm`;
-
 export default function GridDemo() {
   return (
     <BarChart

docs/data/charts/bars/GridDemo.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BarChart } from '@mui/x-charts/BarChart';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 const chartSetting = {
   xAxis: [
@@ -12,8 +12,6 @@ const chartSetting = {
   height: 400,
 };
 
-const valueFormatter = (value: number | null) => `${value}mm`;
-
 export default function GridDemo() {
   return (
     <BarChart

docs/data/charts/bars/HorizontalBars.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BarChart } from '@mui/x-charts/BarChart';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 const chartSetting = {
   xAxis: [
@@ -12,8 +12,6 @@ const chartSetting = {
   height: 400,
 };
 
-const valueFormatter = (value) => `${value}mm`;
-
 export default function HorizontalBars() {
   return (
     <BarChart

docs/data/charts/bars/HorizontalBars.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BarChart } from '@mui/x-charts/BarChart';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 const chartSetting = {
   xAxis: [
@@ -12,8 +12,6 @@ const chartSetting = {
   height: 400,
 };
 
-const valueFormatter = (value: number | null) => `${value}mm`;
-
 export default function HorizontalBars() {
   return (
     <BarChart

docs/data/charts/bars/TickPlacementBars.js

@@ -7,7 +7,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import Radio from '@mui/material/Radio';
 import { BarChart } from '@mui/x-charts/BarChart';
 import { axisClasses } from '@mui/x-charts/ChartsAxis';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 function TickParamsSelector({
   tickPlacement,
@@ -57,8 +57,6 @@ function TickParamsSelector({
   );
 }
 
-const valueFormatter = (value) => `${value}mm`;
-
 const chartSetting = {
   yAxis: [
     {

docs/data/charts/bars/TickPlacementBars.tsx

@@ -7,7 +7,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import Radio from '@mui/material/Radio';
 import { BarChart } from '@mui/x-charts/BarChart';
 import { axisClasses } from '@mui/x-charts/ChartsAxis';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 type TickParamsSelectorProps = {
   tickPlacement: 'end' | 'start' | 'middle' | 'extremities';
@@ -72,8 +72,6 @@ function TickParamsSelector({
   );
 }
 
-const valueFormatter = (value: number | null) => `${value}mm`;
-
 const chartSetting = {
   yAxis: [
     {

docs/data/charts/dataset/weather.ts

@@ -84,3 +84,7 @@ export const dataset = [
     month: 'Dec',
   },
 ];
+
+export function valueFormatter(value: number | null) {
+  return `${value}mm`;
+}

docs/data/charts/tooltip/CustomItemTooltip.js

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import NoSsr from '@mui/material/NoSsr';
+import Popper from '@mui/material/Popper';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { useItemTooltip, useMouseTracker } from '@mui/x-charts/ChartsTooltip';
+import { generateVirtualElement } from './generateVirtualElement';
+
+export function CustomItemTooltip() {
+  const tooltipData = useItemTooltip();
+  const mousePosition = useMouseTracker(); // Track the mouse position on chart.
+
+  if (!tooltipData || !mousePosition) {
+    // No data to display
+    return null;
+  }
+
+  return (
+    <NoSsr>
+      <Popper
+        sx={{
+          pointerEvents: 'none',
+          zIndex: (theme) => theme.zIndex.modal,
+        }}
+        open
+        placement={mousePosition?.pointerType === 'mouse' ? 'top-end' : 'top'}
+        anchorEl={generateVirtualElement(mousePosition)}
+        modifiers={[
+          {
+            name: 'offset',
+            options: {
+              offset: [
+                0,
+                mousePosition?.pointerType === 'touch'
+                  ? 40 - mousePosition.height
+                  : 0,
+              ],
+            },
+          },
+        ]}
+      >
+        <Paper
+          elevation={0}
+          sx={{
+            m: 1,
+            p: 1.5,
+            border: 'solid',
+            borderWidth: 2,
+            borderColor: 'divider',
+          }}
+        >
+          <Stack direction="row" alignItems="center">
+            <div
+              style={{
+                width: 11,
+                height: 11,
+                borderRadius: '50%',
+                backgroundColor: tooltipData.color,
+              }}
+            />
+            <Typography sx={{ ml: 2 }} fontWeight="light">
+              {tooltipData.label}
+            </Typography>
+            <Typography sx={{ ml: 2 }}>{tooltipData.formattedValue}</Typography>
+          </Stack>
+        </Paper>
+      </Popper>
+    </NoSsr>
+  );
+}

docs/data/charts/tooltip/CustomItemTooltip.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import NoSsr from '@mui/material/NoSsr';
+import Popper from '@mui/material/Popper';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { useItemTooltip, useMouseTracker } from '@mui/x-charts/ChartsTooltip';
+import { generateVirtualElement } from './generateVirtualElement';
+
+export function CustomItemTooltip() {
+  const tooltipData = useItemTooltip();
+  const mousePosition = useMouseTracker(); // Track the mouse position on chart.
+
+  if (!tooltipData || !mousePosition) {
+    // No data to display
+    return null;
+  }
+
+  return (
+    <NoSsr>
+      <Popper
+        sx={{
+          pointerEvents: 'none',
+          zIndex: (theme) => theme.zIndex.modal,
+        }}
+        open
+        placement={
+          mousePosition?.pointerType === 'mouse'
+            ? ('top-end' as const)
+            : ('top' as const)
+        }
+        anchorEl={generateVirtualElement(mousePosition)}
+        modifiers={[
+          {
+            name: 'offset',
+            options: {
+              offset: [
+                0,
+                mousePosition?.pointerType === 'touch'
+                  ? 40 - mousePosition.height
+                  : 0,
+              ],
+            },
+          },
+        ]}
+      >
+        <Paper
+          elevation={0}
+          sx={{
+            m: 1,
+            p: 1.5,
+            border: 'solid',
+            borderWidth: 2,
+            borderColor: 'divider',
+          }}
+        >
+          <Stack direction="row" alignItems="center">
+            <div
+              style={{
+                width: 11,
+                height: 11,
+                borderRadius: '50%',
+                backgroundColor: tooltipData.color,
+              }}
+            />
+            <Typography sx={{ ml: 2 }} fontWeight="light">
+              {tooltipData.label}
+            </Typography>
+            <Typography sx={{ ml: 2 }}>{tooltipData.formattedValue}</Typography>
+          </Stack>
+        </Paper>
+      </Popper>
+    </NoSsr>
+  );
+}

docs/data/charts/tooltip/CustomItemTooltipContent.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Paper from '@mui/material/Paper';
+
+/**
+ * Render a basic tooltip content for an item.
+ */
+export function CustomItemTooltipContent(props) {
+  return (
+    <Paper
+      elevation={0}
+      sx={{
+        m: 1,
+        p: 1.5,
+        border: 'solid',
+        borderWidth: 2,
+        borderColor: 'divider',
+      }}
+    >
+      <Stack direction="row" alignItems="center">
+        <div
+          style={{
+            width: 11,
+            height: 11,
+            borderRadius: '50%',
+            backgroundColor: props.color,
+          }}
+        />
+        <Typography sx={{ ml: 2 }} fontWeight="light">
+          {props.label}
+        </Typography>
+        <Typography sx={{ ml: 2 }}>{props.formattedValue}</Typography>
+      </Stack>
+    </Paper>
+  );
+}