[docs] Divide charts tooltip and highlighting pages (#14824)

Signed-off-by: Jose C Quintas Jr <juniorquintas@gmail.com>
Co-authored-by: Lukas Tyla <llukas.tyla@gmail.com>

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 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 need to ensure that the `series` has 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

@@ -1,7 +1,7 @@
 import type { MuiPage } from 'docs/src/MuiPage';
+import chartsComponentApi from './charts-component-api-pages';
 import dataGridComponentApi from './data-grid-component-api-pages';
 import pickersComponentApi from './date-pickers-component-api-pages';
-import chartsComponentApi from './charts-component-api-pages';
 import treeViewComponentApi from './tree-view-component-api-pages';
 
 const pages: MuiPage[] = [
@@ -438,10 +438,11 @@ const pages: MuiPage[] = [
               { 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',
+                title: 'Zoom and pan',
                 plan: 'pro',
                 unstable: true,
               },

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

@@ -10,8 +10,8 @@
         "description": "{ x?: 'band'<br>&#124;&nbsp;'line'<br>&#124;&nbsp;'none', y?: 'band'<br>&#124;&nbsp;'line'<br>&#124;&nbsp;'none' }"
       },
       "seeMoreLink": {
-        "url": "https://mui.com/x/react-charts/tooltip/#highlights",
-        "text": "highlight docs"
+        "url": "https://mui.com/x/react-charts/highlighting",
+        "text": "highlighting docs"
       }
     },
     "barLabel": { "type": { "name": "union", "description": "'value'<br>&#124;&nbsp;func" } },
@@ -132,6 +132,6 @@
   "muiName": "MuiBarChartPro",
   "filename": "/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx",
   "inheritance": null,
-  "demos": "<ul><li><a href=\"/x/react-charts/bars/\">Charts - Bars</a></li>\n<li><a href=\"/x/react-charts/zoom-and-pan/\">Zoom &amp; Pan <a href=\"/x/introduction/licensing/#pro-plan\" title=\"Pro plan\"><span class=\"plan-pro\"></span></a></a></li></ul>",
+  "demos": "<ul><li><a href=\"/x/react-charts/bars/\">Charts - Bars</a></li>\n<li><a href=\"/x/react-charts/zoom-and-pan/\">Charts - Zooming and panning <a href=\"/x/introduction/licensing/#pro-plan\" title=\"Pro plan\"><span class=\"plan-pro\"></span></a></a></li></ul>",
   "cssComponent": false
 }

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

@@ -10,8 +10,8 @@
         "description": "{ x?: 'band'<br>&#124;&nbsp;'line'<br>&#124;&nbsp;'none', y?: 'band'<br>&#124;&nbsp;'line'<br>&#124;&nbsp;'none' }"
       },
       "seeMoreLink": {
-        "url": "https://mui.com/x/react-charts/tooltip/#highlights",
-        "text": "highlight docs"
+        "url": "https://mui.com/x/react-charts/highlighting",
+        "text": "highlighting docs"
       }
     },
     "barLabel": { "type": { "name": "union", "description": "'value'<br>&#124;&nbsp;func" } },

docs/pages/x/api/charts/charts-axis-highlight.json

@@ -17,6 +17,6 @@
   "muiName": "MuiChartsAxisHighlight",
   "filename": "/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx",
   "inheritance": null,
-  "demos": "<ul><li><a href=\"/x/react-charts/tooltip/\">Charts - Tooltip</a></li></ul>",
+  "demos": "<ul><li><a href=\"/x/react-charts/highlighting/\">Charts - Highlighting</a></li></ul>",
   "cssComponent": false
 }

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

@@ -11,8 +11,8 @@
       },
       "default": "{ x: 'line' }",
       "seeMoreLink": {
-        "url": "https://mui.com/x/react-charts/tooltip/#highlights",
-        "text": "highlight docs"
+        "url": "https://mui.com/x/react-charts/highlighting",
+        "text": "highlighting docs"
       }
     },
     "bottomAxis": {
@@ -126,6 +126,6 @@
   "muiName": "MuiLineChartPro",
   "filename": "/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx",
   "inheritance": null,
-  "demos": "<ul><li><a href=\"/x/react-charts/lines/\">Charts - Lines</a></li>\n<li><a href=\"/x/react-charts/zoom-and-pan/\">Zoom &amp; Pan <a href=\"/x/introduction/licensing/#pro-plan\" title=\"Pro plan\"><span class=\"plan-pro\"></span></a></a></li></ul>",
+  "demos": "<ul><li><a href=\"/x/react-charts/lines/\">Charts - Lines</a></li>\n<li><a href=\"/x/react-charts/zoom-and-pan/\">Charts - Zooming and panning <a href=\"/x/introduction/licensing/#pro-plan\" title=\"Pro plan\"><span class=\"plan-pro\"></span></a></a></li></ul>",
   "cssComponent": false
 }

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

@@ -11,8 +11,8 @@
       },
       "default": "{ x: 'line' }",
       "seeMoreLink": {
-        "url": "https://mui.com/x/react-charts/tooltip/#highlights",
-        "text": "highlight docs"
+        "url": "https://mui.com/x/react-charts/highlighting",
+        "text": "highlighting docs"
       }
     },
     "bottomAxis": {

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

@@ -11,8 +11,8 @@
       },
       "default": "{ x: 'none', y: 'none' }",
       "seeMoreLink": {
-        "url": "https://mui.com/x/react-charts/tooltip/#highlights",
-        "text": "highlight docs"
+        "url": "https://mui.com/x/react-charts/highlighting",
+        "text": "highlighting docs"
       }
     },
     "bottomAxis": {

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

@@ -11,8 +11,8 @@
       },
       "default": "{ x: 'none', y: 'none' }",
       "seeMoreLink": {
-        "url": "https://mui.com/x/react-charts/tooltip/#highlights",
-        "text": "highlight docs"
+        "url": "https://mui.com/x/react-charts/highlighting",
+        "text": "highlighting docs"
       }
     },
     "bottomAxis": {
@@ -128,6 +128,6 @@
   "muiName": "MuiScatterChartPro",
   "filename": "/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx",
   "inheritance": null,
-  "demos": "<ul><li><a href=\"/x/react-charts/scatter/\">Charts - Scatter</a></li>\n<li><a href=\"/x/react-charts/zoom-and-pan/\">Zoom &amp; Pan <a href=\"/x/introduction/licensing/#pro-plan\" title=\"Pro plan\"><span class=\"plan-pro\"></span></a></a></li></ul>",
+  "demos": "<ul><li><a href=\"/x/react-charts/scatter/\">Charts - Scatter</a></li>\n<li><a href=\"/x/react-charts/zoom-and-pan/\">Charts - Zooming and panning <a href=\"/x/introduction/licensing/#pro-plan\" title=\"Pro plan\"><span class=\"plan-pro\"></span></a></a></li></ul>",
   "cssComponent": false
 }

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

@@ -11,8 +11,8 @@
       },
       "default": "{ x: 'none', y: 'none' }",
       "seeMoreLink": {
-        "url": "https://mui.com/x/react-charts/tooltip/#highlights",
-        "text": "highlight docs"
+        "url": "https://mui.com/x/react-charts/highlighting",
+        "text": "highlighting docs"
       }
     },
     "bottomAxis": {

docs/pages/x/react-charts/highlighting.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import * as pageProps from 'docsx/data/charts/highlighting/highlighting.md?muiMarkdown';
+
+export default function Page() {
+  return <MarkdownDocs {...pageProps} />;
+}

packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx

@@ -88,7 +88,7 @@ BarChartPro.propTypes = {
    * The configuration of axes highlight.
    * Default is set to 'band' in the bar direction.
    * Depends on `layout` prop.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
    */
   axisHighlight: PropTypes.shape({
     x: PropTypes.oneOf(['band', 'line', 'none']),

packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx

@@ -111,7 +111,7 @@ LineChartPro.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * The configuration of axes highlight.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
    * @default { x: 'line' }
    */
   axisHighlight: PropTypes.shape({

packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx

@@ -81,7 +81,7 @@ ScatterChartPro.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * The configuration of axes highlight.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
    * @default { x: 'none', y: 'none' }
    */
   axisHighlight: PropTypes.shape({

packages/x-charts/src/BarChart/BarChart.tsx

@@ -75,7 +75,7 @@ export interface BarChartProps
    * The configuration of axes highlight.
    * Default is set to 'band' in the bar direction.
    * Depends on `layout` prop.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
    *
    */
   axisHighlight?: ChartsAxisHighlightProps;
@@ -155,7 +155,7 @@ BarChart.propTypes = {
    * The configuration of axes highlight.
    * Default is set to 'band' in the bar direction.
    * Depends on `layout` prop.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
    */
   axisHighlight: PropTypes.shape({
     x: PropTypes.oneOf(['band', 'line', 'none']),

packages/x-charts/src/LineChart/LineChart.tsx

@@ -86,7 +86,7 @@ export interface LineChartProps
   grid?: Pick<ChartsGridProps, 'vertical' | 'horizontal'>;
   /**
    * The configuration of axes highlight.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
    * @default { x: 'line' }
    */
   axisHighlight?: ChartsAxisHighlightProps;
@@ -192,7 +192,7 @@ LineChart.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * The configuration of axes highlight.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
    * @default { x: 'line' }
    */
   axisHighlight: PropTypes.shape({

packages/x-charts/src/PieChart/PieChart.tsx

@@ -86,7 +86,7 @@ export interface PieChartProps
   tooltip?: ChartsTooltipProps<'pie'>;
   /**
    * The configuration of axes highlight.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
    * @default { x: 'none', y: 'none' }
    */
   axisHighlight?: ChartsAxisHighlightProps;
@@ -222,7 +222,7 @@ PieChart.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * The configuration of axes highlight.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
    * @default { x: 'none', y: 'none' }
    */
   axisHighlight: PropTypes.shape({

packages/x-charts/src/ScatterChart/ScatterChart.tsx

@@ -75,7 +75,7 @@ export interface ScatterChartProps
   tooltip?: ChartsTooltipProps<'scatter'>;
   /**
    * The configuration of axes highlight.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
    * @default { x: 'none', y: 'none' }
    */
   axisHighlight?: ChartsAxisHighlightProps;
@@ -162,7 +162,7 @@ ScatterChart.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * The configuration of axes highlight.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/#highlights highlight docs} for more details.
+   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
    * @default { x: 'none', y: 'none' }
    */
   axisHighlight: PropTypes.shape({