[docs] Divide charts tooltip and highlighting pages

docs/data/charts/highlighting/Formatting.js

@@ -0,0 +1,96 @@
+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,
+      showMark: false,
+    },
+    {
+      label: 'German GDP per capita',
+      data: GermanyGDPperCapita,
+      showMark: false,
+    },
+    {
+      label: 'UK GDP per capita',
+      data: UKGDPperCapita,
+      showMark: false,
+    },
+  ],
+  width: 600,
+  height: 400,
+};
+
+const yearFormatter = (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: yearFormatter }]}
+      series={lineChartsParams.series.map((series) => ({
+        ...series,
+        valueFormatter: (v) => (v === null ? '' : currencyFormatter(v)),
+      }))}
+    />
+  );
+}

docs/data/charts/highlighting/Formatting.tsx

@@ -0,0 +1,96 @@
+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,
+      showMark: false,
+    },
+    {
+      label: 'German GDP per capita',
+      data: GermanyGDPperCapita,
+      showMark: false,
+    },
+    {
+      label: 'UK GDP per capita',
+      data: UKGDPperCapita,
+      showMark: false,
+    },
+  ],
+  width: 600,
+  height: 400,
+};
+
+const yearFormatter = (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: yearFormatter }]}
+      series={lineChartsParams.series.map((series) => ({
+        ...series,
+        valueFormatter: (v) => (v === null ? '' : currencyFormatter(v)),
+      }))}
+    />
+  );
+}

docs/data/charts/highlighting/Formatting.tsx.preview

@@ -0,0 +1,8 @@
+<LineChart
+  {...lineChartsParams}
+  xAxis={[{ data: years, scaleType: 'time', valueFormatter: yearFormatter }]}
+  series={lineChartsParams.series.map((series) => ({
+    ...series,
+    valueFormatter: (v) => (v === null ? '' : currencyFormatter(v)),
+  }))}
+/>

docs/data/charts/highlighting/highlighting.md

@@ -0,0 +1,62 @@
+---
+title: Charts - Highlighting
+productId: x-charts
+components: ChartsAxisHighlight
+---
+
+# Charts - Highlighting
+
+<p class="description">Highlighting data offers a quick visual feedback for chart users.</p>
+
+It can be used to emphasize a specific data point or series, or to fade out the rest of the chart.
+And it can be controlled by the user or synchronized across multiple charts.
+
+## Highlighting
+
+### Highlighting axis
+
+You can highlight data based on mouse position.
+By default, those highlights are lines, but it can also be a vertical band if your x-axis use `scaleType: 'band'`.
+
+On the chart, to customize this behavior, you can use:
+
+```jsx
+axisHighlight={{
+  x: 'line', // Or 'none', or 'band'
+  y: 'line', // Or 'none'
+}}
+```
+
+{{"demo": "BandHighlight.js" }}
+
+### Highlighting series
+
+In parallel with the tooltip, you can highlight and fade elements.
+
+This kind of interaction is controlled by series properties `highlightScope` which contains two options:
+
+- `highlighted` Indicates which item to highlight. Its value can be
+  - `'none'` Do nothing (default one).
+  - `'item'` Only highlight the item itself.
+  - `'series'` Highlight all items of the series.
+- `faded` Indicates which item to fade (if they are not already highlighted). Its value can be
+  - `'none'` Do nothing (default one).
+  - `'series'` Fade all the items of the series.
+  - `'global'` Fade all the items of the chart.
+
+{{"demo": "ElementHighlights.js"}}
+
+### Controlled Highlight
+
+The highlight can be controlled by the user when they set `highlightedItem` and `onHighlightChange`.
+
+You can set the `highlightedItem` value based on inputs, and sync it when the user hover over an item themselves.
+
+{{"demo": "ControlledHighlight.js"}}
+
+#### Synchronizing Highlights
+
+Having a controlled highlight allows you to control it in multiple charts at the same time.
+You just need to ensure that the `series` have the same `ids` and the data is in the same order.
+
+{{"demo": "SyncHighlight.js"}}

docs/data/charts/pie/pie.md

@@ -79,7 +79,7 @@ Arcs with angles smaller than the value (in deg) will not have labels.
 ## Highlight
 
 Pie series can get `highlightScope` property to manage element highlighting.
-Its behavior is described in the [dedicated page](/x/react-charts/tooltip/#highlighting-series).
+Its behavior is described in the [dedicated page](/x/react-charts/highlighting/#highlighting-series).
 
 When elements are highlighted or faded they can be customized with dedicated CSS classes: `.MuiPieArc-faded` and `.MuiPieArc-highlighted`.
 

docs/data/charts/tooltip/tooltip.md

@@ -1,7 +1,7 @@
 ---
 title: Charts - Tooltip
 productId: x-charts
-components: ChartsTooltip, DefaultChartsAxisTooltipContent, DefaultChartsItemTooltipContent, ChartsAxisHighlight
+components: ChartsTooltip, DefaultChartsAxisTooltipContent, DefaultChartsItemTooltipContent
 ---
 
 # Charts - Tooltip
@@ -21,56 +21,6 @@ The tooltip can be triggered by two kinds of events:
 
 {{"demo": "Interaction.js"}}
 
-## Highlights
-
-### Highlighting axis
-
-You can highlight data based on mouse position.
-By default, those highlights are lines, but it can also be a vertical band if your x-axis use `scaleType: 'band'`.
-
-On the chart, to customize this behavior, you can use:
-
-```jsx
-axisHighlight={{
-  x: 'line', // Or 'none', or 'band'
-  y: 'line', // Or 'none'
-}}
-```
-
-{{"demo": "BandHighlight.js" }}
-
-### Highlighting series
-
-In parallel with the tooltip, you can highlight and fade elements.
-
-This kind of interaction is controlled by series properties `highlightScope` which contains two options:
-
-- `highlighted` Indicates which item to highlight. Its value can be
-  - `'none'` Do nothing (default one).
-  - `'item'` Only highlight the item itself.
-  - `'series'` Highlight all items of the series.
-- `faded` Indicates which item to fade (if they are not already highlighted). Its value can be
-  - `'none'` Do nothing (default one).
-  - `'series'` Fade all the items of the series.
-  - `'global'` Fade all the items of the chart.
-
-{{"demo": "ElementHighlights.js"}}
-
-### Controlled Highlight
-
-The highlight can be controlled by the user when they set `highlightedItem` and `onHighlightChange`.
-
-You can set the `highlightedItem` value based on inputs, and sync it when the user hover over an item themselves.
-
-{{"demo": "ControlledHighlight.js"}}
-
-#### Synchronizing Highlights
-
-Having a controlled highlight allows you to control it in multiple charts at the same time.
-You just need to ensure that the `series` have the same `ids` and the data is in the same order.
-
-{{"demo": "SyncHighlight.js"}}
-
 ## Customization
 
 ### Formatting
@@ -169,7 +119,7 @@ The second one when trigger is set to `"axis"`.
 If you're using composition, by default, the axis will be listening for mouse events to get its current x/y values.
 If you don't need it, you can disable those listeners with the `disableAxisListener` prop.
 
-You need those listeners if you are using [axes highlight](/x/react-charts/tooltip/#highlighting-axis) or you have a tooltip [triggered by axis](/x/react-charts/tooltip/#tooltip-trigger).
+You need those listeners if you are using [axes highlight](/x/react-charts/highlighting/#highlighting-axis) or you have a tooltip [triggered by axis](/x/react-charts/tooltip/#tooltip-trigger).
 
 ```jsx
 <ChartContainer {...} disableAxisListener>

docs/data/charts/zoom-and-pan/zoom-and-pan.md

@@ -1,10 +1,10 @@
 ---
-title: Zoom & Pan
+title: Charts - Zooming and panning
 productId: x-charts
 components: ScatterChartPro, BarChartPro, LineChartPro
 ---
 
-# Zoom & Pan [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
+# Charts - Zooming and panning [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
 
 <p class="description">Enables zooming and panning on specific charts or axis.</p>
 

docs/data/pages.ts

@@ -432,16 +432,16 @@ const pages: MuiPage[] = [
             subheader: 'Common features',
             children: [
               { pathname: '/x/react-charts/axis' },
-              { pathname: '/x/react-charts/components', title: 'Custom components' },
+              { pathname: '/x/react-charts/components' },
               { pathname: '/x/react-charts/composition' },
               { pathname: '/x/react-charts/label' },
               { pathname: '/x/react-charts/legend' },
               { pathname: '/x/react-charts/stacking' },
               { pathname: '/x/react-charts/styling' },
-              { pathname: '/x/react-charts/tooltip', title: 'Tooltips and highlights' },
+              { pathname: '/x/react-charts/tooltip' },
+              { pathname: '/x/react-charts/highlighting' },
               {
                 pathname: '/x/react-charts/zoom-and-pan',
-                title: 'Zooming and panning',
                 plan: 'pro',
                 unstable: true,
               },