[charts] document Tooltip and Highlighs (#8867)

Co-authored-by: Lukas <[email protected]>
mui · May 12, 2023 · 5146ec7 · 5146ec7
1 parent 032349c
commit 5146ec7
Show file tree

Hide file tree

Showing 28 changed files with 687 additions and 219 deletions.
diff --git a/docs/data/charts/tooltip/BandHighlight.js b/docs/data/charts/tooltip/BandHighlight.js
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import { BarChart } from '@mui/x-charts/BarChart';
+
+const barChartsParams = {
+  xAxis: [
+    {
+      data: ['page A', 'page B', 'page C', 'page D', 'page E'],
+      scaleType: 'band',
+    },
+  ],
+  series: [
+    { data: [2, 5, 3, 4, 1], stack: '1', label: 'series x' },
+    { data: [10, 3, 1, 2, 10], stack: '1', label: 'series y' },
+    { data: [10, 3, 1, 2, 10], stack: '1', label: 'series z' },
+  ],
+  width: 600,
+  height: 400,
+};
+
+export default function BandHighlight() {
+  return (
+    <Box>
+      <Stack direction={{ xs: 'column', md: 'row' }}>
+        <BarChart {...barChartsParams} highlight={{ x: 'band' }} />
+      </Stack>
+    </Box>
+  );
+}
diff --git a/docs/data/charts/tooltip/BandHighlight.tsx b/docs/data/charts/tooltip/BandHighlight.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import { BarChart } from '@mui/x-charts/BarChart';
+
+const barChartsParams = {
+  xAxis: [
+    {
+      data: ['page A', 'page B', 'page C', 'page D', 'page E'],
+      scaleType: 'band' as const,
+    },
+  ],
+  series: [
+    { data: [2, 5, 3, 4, 1], stack: '1', label: 'series x' },
+    { data: [10, 3, 1, 2, 10], stack: '1', label: 'series y' },
+    { data: [10, 3, 1, 2, 10], stack: '1', label: 'series z' },
+  ],
+  width: 600,
+  height: 400,
+};
+
+export default function BandHighlight() {
+  return (
+    <Box>
+      <Stack direction={{ xs: 'column', md: 'row' }}>
+        <BarChart {...barChartsParams} highlight={{ x: 'band' }} />
+      </Stack>
+    </Box>
+  );
+}
diff --git a/docs/data/charts/tooltip/BandHighlight.tsx.preview b/docs/data/charts/tooltip/BandHighlight.tsx.preview
@@ -0,0 +1,3 @@
+<Stack direction={{ xs: 'column', md: 'row' }}>
+  <BarChart {...barChartsParams} highlight={{ x: 'band' }} />
+</Stack>
diff --git a/docs/data/charts/tooltip/Formatting.js b/docs/data/charts/tooltip/Formatting.js
@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { LineChart } from '@mui/x-charts/LineChart';
+
+const years = [
+  new Date(1990, 0, 1),
+  new Date(1991, 0, 1),
+  new Date(1992, 0, 1),
+  new Date(1993, 0, 1),
+  new Date(1994, 0, 1),
+  new Date(1995, 0, 1),
+  new Date(1996, 0, 1),
+  new Date(1997, 0, 1),
+  new Date(1998, 0, 1),
+  new Date(1999, 0, 1),
+  new Date(2000, 0, 1),
+  new Date(2001, 0, 1),
+  new Date(2002, 0, 1),
+  new Date(2003, 0, 1),
+  new Date(2004, 0, 1),
+  new Date(2005, 0, 1),
+  new Date(2006, 0, 1),
+  new Date(2007, 0, 1),
+  new Date(2008, 0, 1),
+  new Date(2009, 0, 1),
+  new Date(2010, 0, 1),
+  new Date(2011, 0, 1),
+  new Date(2012, 0, 1),
+  new Date(2013, 0, 1),
+  new Date(2014, 0, 1),
+  new Date(2015, 0, 1),
+  new Date(2016, 0, 1),
+  new Date(2017, 0, 1),
+  new Date(2018, 0, 1),
+];
+
+const FranceGDPperCapita = [
+  28129, 28294.264, 28619.805, 28336.16, 28907.977, 29418.863, 29736.645, 30341.807,
+  31323.078, 32284.611, 33409.68, 33920.098, 34152.773, 34292.03, 35093.824,
+  35495.465, 36166.16, 36845.684, 36761.793, 35534.926, 36086.727, 36691, 36571,
+  36632, 36527, 36827, 37124, 37895, 38515.918,
+];
+
+const UKGDPperCapita = [
+  26189, 25792.014, 25790.186, 26349.342, 27277.543, 27861.215, 28472.248, 29259.764,
+  30077.385, 30932.537, 31946.037, 32660.441, 33271.3, 34232.426, 34865.78,
+  35623.625, 36214.07, 36816.676, 36264.79, 34402.36, 34754.473, 34971, 35185, 35618,
+  36436, 36941, 37334, 37782.83, 38058.086,
+];
+
+const GermanyGDPperCapita = [
+  25391, 26769.96, 27385.055, 27250.701, 28140.057, 28868.945, 29349.982, 30186.945,
+  31129.584, 32087.604, 33367.285, 34260.29, 34590.93, 34716.44, 35528.715,
+  36205.574, 38014.137, 39752.207, 40715.434, 38962.938, 41109.582, 43189, 43320,
+  43413, 43922, 44293, 44689, 45619.785, 46177.617,
+];
+
+const lineChartsParams = {
+  series: [
+    {
+      label: 'French GDP per capita',
+      data: FranceGDPperCapita,
+    },
+    {
+      label: 'German GDP per capita',
+      data: GermanyGDPperCapita,
+    },
+    {
+      label: 'UK GDP per capita',
+      data: UKGDPperCapita,
+    },
+  ],
+  width: 600,
+  height: 400,
+};
+
+const yearFormater = (date) => date.getFullYear().toString();
+const currencyFormatter = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+}).format;
+
+export default function Formatting() {
+  return (
+    <LineChart
+      {...lineChartsParams}
+      xAxis={[{ data: years, scaleType: 'time', valueFormatter: yearFormater }]}
+      series={lineChartsParams.series.map((s) => ({
+        ...s,
+        valueFormatter: currencyFormatter,
+      }))}
+    />
+  );
+}
diff --git a/docs/data/charts/tooltip/Formatting.tsx b/docs/data/charts/tooltip/Formatting.tsx
@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { LineChart } from '@mui/x-charts/LineChart';
+
+const years = [
+  new Date(1990, 0, 1),
+  new Date(1991, 0, 1),
+  new Date(1992, 0, 1),
+  new Date(1993, 0, 1),
+  new Date(1994, 0, 1),
+  new Date(1995, 0, 1),
+  new Date(1996, 0, 1),
+  new Date(1997, 0, 1),
+  new Date(1998, 0, 1),
+  new Date(1999, 0, 1),
+  new Date(2000, 0, 1),
+  new Date(2001, 0, 1),
+  new Date(2002, 0, 1),
+  new Date(2003, 0, 1),
+  new Date(2004, 0, 1),
+  new Date(2005, 0, 1),
+  new Date(2006, 0, 1),
+  new Date(2007, 0, 1),
+  new Date(2008, 0, 1),
+  new Date(2009, 0, 1),
+  new Date(2010, 0, 1),
+  new Date(2011, 0, 1),
+  new Date(2012, 0, 1),
+  new Date(2013, 0, 1),
+  new Date(2014, 0, 1),
+  new Date(2015, 0, 1),
+  new Date(2016, 0, 1),
+  new Date(2017, 0, 1),
+  new Date(2018, 0, 1),
+];
+
+const FranceGDPperCapita = [
+  28129, 28294.264, 28619.805, 28336.16, 28907.977, 29418.863, 29736.645, 30341.807,
+  31323.078, 32284.611, 33409.68, 33920.098, 34152.773, 34292.03, 35093.824,
+  35495.465, 36166.16, 36845.684, 36761.793, 35534.926, 36086.727, 36691, 36571,
+  36632, 36527, 36827, 37124, 37895, 38515.918,
+];
+
+const UKGDPperCapita = [
+  26189, 25792.014, 25790.186, 26349.342, 27277.543, 27861.215, 28472.248, 29259.764,
+  30077.385, 30932.537, 31946.037, 32660.441, 33271.3, 34232.426, 34865.78,
+  35623.625, 36214.07, 36816.676, 36264.79, 34402.36, 34754.473, 34971, 35185, 35618,
+  36436, 36941, 37334, 37782.83, 38058.086,
+];
+
+const GermanyGDPperCapita = [
+  25391, 26769.96, 27385.055, 27250.701, 28140.057, 28868.945, 29349.982, 30186.945,
+  31129.584, 32087.604, 33367.285, 34260.29, 34590.93, 34716.44, 35528.715,
+  36205.574, 38014.137, 39752.207, 40715.434, 38962.938, 41109.582, 43189, 43320,
+  43413, 43922, 44293, 44689, 45619.785, 46177.617,
+];
+
+const lineChartsParams = {
+  series: [
+    {
+      label: 'French GDP per capita',
+      data: FranceGDPperCapita,
+    },
+    {
+      label: 'German GDP per capita',
+      data: GermanyGDPperCapita,
+    },
+    {
+      label: 'UK GDP per capita',
+      data: UKGDPperCapita,
+    },
+  ],
+  width: 600,
+  height: 400,
+};
+
+const yearFormater = (date: Date) => date.getFullYear().toString();
+const currencyFormatter = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+}).format;
+
+export default function Formatting() {
+  return (
+    <LineChart
+      {...lineChartsParams}
+      xAxis={[{ data: years, scaleType: 'time', valueFormatter: yearFormater }]}
+      series={lineChartsParams.series.map((s) => ({
+        ...s,
+        valueFormatter: currencyFormatter,
+      }))}
+    />
+  );
+}
diff --git a/docs/data/charts/tooltip/Formatting.tsx.preview b/docs/data/charts/tooltip/Formatting.tsx.preview
@@ -0,0 +1,8 @@
+<LineChart
+  {...lineChartsParams}
+  xAxis={[{ data: years, scaleType: 'time', valueFormatter: yearFormater }]}
+  series={lineChartsParams.series.map((s) => ({
+    ...s,
+    valueFormatter: currencyFormatter,
+  }))}
+/>
diff --git a/docs/data/charts/tooltip/Highlights.js b/docs/data/charts/tooltip/Highlights.js
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { LineChart, markElementClasses } from '@mui/x-charts/LineChart';
+
+const lineChartsParams = {
+  xAxis: [{ data: [...Array(100)].map((v, i) => 0.1 * i) }],
+  series: [
+    {
+      data: [...Array(100)].map((v, i) => Math.cos(0.1 * i)),
+      stack: '1',
+      area: {},
+      label: 'cos(x)',
+    },
+    {
+      data: [...Array(100)].map((v, i) => Math.abs(Math.sin(0.1 * i))),
+      stack: '1',
+      area: {},
+      label: 'sin(x)',
+    },
+    {
+      data: [...Array(100)].map((v, i) => Math.abs(Math.cos(0.1 * i))),
+      stack: '1',
+      area: {},
+      label: '|cos(x)|',
+    },
+  ],
+  width: 600,
+  height: 400,
+  sx: {
+    [`& .${markElementClasses.root}`]: {
+      display: 'none',
+    },
+  },
+};
+export default function Highlights() {
+  return <LineChart {...lineChartsParams} tooltip={{ trigger: 'axis' }} />;
+}
diff --git a/docs/data/charts/tooltip/Highlights.tsx b/docs/data/charts/tooltip/Highlights.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { LineChart, markElementClasses } from '@mui/x-charts/LineChart';
+
+const lineChartsParams = {
+  xAxis: [{ data: [...Array(100)].map((v, i) => 0.1 * i) }],
+  series: [
+    {
+      data: [...Array(100)].map((v, i) => Math.cos(0.1 * i)),
+      stack: '1',
+      area: {},
+      label: 'cos(x)',
+    },
+    {
+      data: [...Array(100)].map((v, i) => Math.abs(Math.sin(0.1 * i))),
+      stack: '1',
+      area: {},
+      label: 'sin(x)',
+    },
+    {
+      data: [...Array(100)].map((v, i) => Math.abs(Math.cos(0.1 * i))),
+      stack: '1',
+      area: {},
+      label: '|cos(x)|',
+    },
+  ],
+  width: 600,
+  height: 400,
+  sx: {
+    [`& .${markElementClasses.root}`]: {
+      display: 'none',
+    },
+  },
+};
+export default function Highlights() {
+  return <LineChart {...lineChartsParams} tooltip={{ trigger: 'axis' }} />;
+}
diff --git a/docs/data/charts/tooltip/Highlights.tsx.preview b/docs/data/charts/tooltip/Highlights.tsx.preview
@@ -0,0 +1 @@
+<LineChart {...lineChartsParams} tooltip={{ trigger: 'axis' }} />
diff --git a/docs/data/charts/tooltip/Interaction.js b/docs/data/charts/tooltip/Interaction.js
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import { BarChart } from '@mui/x-charts/BarChart';
+
+const barChartsParams = {
+  xAxis: [
+    {
+      data: ['page A', 'page B', 'page C', 'page D', 'page E'],
+      scaleType: 'band',
+    },
+  ],
+  series: [
+    { data: [2, 5, 3, 4, 1], stack: '1', label: 'series x' },
+    { data: [10, 3, 1, 2, 10], stack: '1', label: 'series y' },
+    { data: [10, 3, 1, 2, 10], stack: '1', label: 'series z' },
+  ],
+  width: 400,
+  height: 200,
+};
+export default function Interaction() {
+  return (
+    <Box>
+      <Stack direction={{ xs: 'column', md: 'row' }}>
+        <BarChart {...barChartsParams} tooltip={{ trigger: 'axis' }} />
+        <BarChart {...barChartsParams} tooltip={{ trigger: 'item' }} />
+      </Stack>
+    </Box>
+  );
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<LineChart {...lineChartsParams} tooltip={{ trigger: 'axis' }} />