diff --git a/docs/data/charts/tooltip/BandHighlight.js b/docs/data/charts/highlighting/BandHighlight.js
similarity index 100%
rename from docs/data/charts/tooltip/BandHighlight.js
rename to docs/data/charts/highlighting/BandHighlight.js
diff --git a/docs/data/charts/tooltip/BandHighlight.tsx b/docs/data/charts/highlighting/BandHighlight.tsx
similarity index 100%
rename from docs/data/charts/tooltip/BandHighlight.tsx
rename to docs/data/charts/highlighting/BandHighlight.tsx
diff --git a/docs/data/charts/tooltip/ControlledHighlight.js b/docs/data/charts/highlighting/ControlledHighlight.js
similarity index 100%
rename from docs/data/charts/tooltip/ControlledHighlight.js
rename to docs/data/charts/highlighting/ControlledHighlight.js
diff --git a/docs/data/charts/tooltip/ControlledHighlight.tsx b/docs/data/charts/highlighting/ControlledHighlight.tsx
similarity index 100%
rename from docs/data/charts/tooltip/ControlledHighlight.tsx
rename to docs/data/charts/highlighting/ControlledHighlight.tsx
diff --git a/docs/data/charts/tooltip/ElementHighlights.js b/docs/data/charts/highlighting/ElementHighlights.js
similarity index 100%
rename from docs/data/charts/tooltip/ElementHighlights.js
rename to docs/data/charts/highlighting/ElementHighlights.js
diff --git a/docs/data/charts/tooltip/ElementHighlights.tsx b/docs/data/charts/highlighting/ElementHighlights.tsx
similarity index 100%
rename from docs/data/charts/tooltip/ElementHighlights.tsx
rename to docs/data/charts/highlighting/ElementHighlights.tsx
diff --git a/docs/data/charts/tooltip/SyncHighlight.js b/docs/data/charts/highlighting/SyncHighlight.js
similarity index 100%
rename from docs/data/charts/tooltip/SyncHighlight.js
rename to docs/data/charts/highlighting/SyncHighlight.js
diff --git a/docs/data/charts/tooltip/SyncHighlight.tsx b/docs/data/charts/highlighting/SyncHighlight.tsx
similarity index 100%
rename from docs/data/charts/tooltip/SyncHighlight.tsx
rename to docs/data/charts/highlighting/SyncHighlight.tsx
diff --git a/docs/data/charts/tooltip/SyncHighlight.tsx.preview b/docs/data/charts/highlighting/SyncHighlight.tsx.preview
similarity index 100%
rename from docs/data/charts/tooltip/SyncHighlight.tsx.preview
rename to docs/data/charts/highlighting/SyncHighlight.tsx.preview
diff --git a/docs/data/charts/highlighting/highlighting.md b/docs/data/charts/highlighting/highlighting.md
new file mode 100644
index 000000000000..8803733d68ba
--- /dev/null
+++ b/docs/data/charts/highlighting/highlighting.md
@@ -0,0 +1,62 @@
+---
+title: Charts - Highlighting
+productId: x-charts
+components: ChartsAxisHighlight
+---
+
+# Charts - Highlighting
+
+Highlighting data offers quick visual feedback for chart users.
+
+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"}}
diff --git a/docs/data/charts/pie/pie.md b/docs/data/charts/pie/pie.md
index 9c2237e68c87..047a4cc576e2 100644
--- a/docs/data/charts/pie/pie.md
+++ b/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`.
diff --git a/docs/data/charts/tooltip/tooltip.md b/docs/data/charts/tooltip/tooltip.md
index 7709ca1ee039..655886065223 100644
--- a/docs/data/charts/tooltip/tooltip.md
+++ b/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
diff --git a/docs/data/charts/zoom-and-pan/zoom-and-pan.md b/docs/data/charts/zoom-and-pan/zoom-and-pan.md
index fcb8a3670497..ef41a6402250 100644
--- a/docs/data/charts/zoom-and-pan/zoom-and-pan.md
+++ b/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 [](/x/introduction/licensing/#pro-plan 'Pro plan')
+# Charts - Zooming and panning [](/x/introduction/licensing/#pro-plan 'Pro plan')
Enables zooming and panning on specific charts or axis.
diff --git a/docs/data/pages.ts b/docs/data/pages.ts
index 0d129b937a5a..890060cd717b 100644
--- a/docs/data/pages.ts
+++ b/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,
},
diff --git a/docs/pages/x/api/charts/bar-chart-pro.json b/docs/pages/x/api/charts/bar-chart-pro.json
index 3b730fea231b..11dca1ac0ae3 100644
--- a/docs/pages/x/api/charts/bar-chart-pro.json
+++ b/docs/pages/x/api/charts/bar-chart-pro.json
@@ -10,8 +10,8 @@
"description": "{ x?: 'band'
| 'line'
| 'none', y?: 'band'
| 'line'
| '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'
| func" } },
@@ -132,6 +132,6 @@
"muiName": "MuiBarChartPro",
"filename": "/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx",
"inheritance": null,
- "demos": "",
+ "demos": "",
"cssComponent": false
}
diff --git a/docs/pages/x/api/charts/bar-chart.json b/docs/pages/x/api/charts/bar-chart.json
index 8d3a4dfad015..e4d6244fd6a1 100644
--- a/docs/pages/x/api/charts/bar-chart.json
+++ b/docs/pages/x/api/charts/bar-chart.json
@@ -10,8 +10,8 @@
"description": "{ x?: 'band'
| 'line'
| 'none', y?: 'band'
| 'line'
| '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'
| func" } },
diff --git a/docs/pages/x/api/charts/charts-axis-highlight.json b/docs/pages/x/api/charts/charts-axis-highlight.json
index d4331b4c2b8d..1d67ca51529c 100644
--- a/docs/pages/x/api/charts/charts-axis-highlight.json
+++ b/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": "",
+ "demos": "",
"cssComponent": false
}
diff --git a/docs/pages/x/api/charts/line-chart-pro.json b/docs/pages/x/api/charts/line-chart-pro.json
index b2072c09fcaf..20e505292250 100644
--- a/docs/pages/x/api/charts/line-chart-pro.json
+++ b/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": "",
+ "demos": "",
"cssComponent": false
}
diff --git a/docs/pages/x/api/charts/line-chart.json b/docs/pages/x/api/charts/line-chart.json
index 7307cfde6c46..7602e918058c 100644
--- a/docs/pages/x/api/charts/line-chart.json
+++ b/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": {
diff --git a/docs/pages/x/api/charts/pie-chart.json b/docs/pages/x/api/charts/pie-chart.json
index 184cd16695e5..6942d4ebf2b9 100644
--- a/docs/pages/x/api/charts/pie-chart.json
+++ b/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": {
diff --git a/docs/pages/x/api/charts/scatter-chart-pro.json b/docs/pages/x/api/charts/scatter-chart-pro.json
index 5aca23918a83..5cd9ae324d2d 100644
--- a/docs/pages/x/api/charts/scatter-chart-pro.json
+++ b/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": "",
+ "demos": "",
"cssComponent": false
}
diff --git a/docs/pages/x/api/charts/scatter-chart.json b/docs/pages/x/api/charts/scatter-chart.json
index 0299bfabd4c7..943e8de82302 100644
--- a/docs/pages/x/api/charts/scatter-chart.json
+++ b/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": {
diff --git a/docs/pages/x/react-charts/highlighting.js b/docs/pages/x/react-charts/highlighting.js
new file mode 100644
index 000000000000..61d8c884d565
--- /dev/null
+++ b/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 ;
+}
diff --git a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx
index 8d716850bf7d..ff141f053ed5 100644
--- a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx
+++ b/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']),
diff --git a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx
index ec09c9711bb9..5f6c9d2db583 100644
--- a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx
+++ b/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({
diff --git a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx
index b6d659fcd8c7..f99cf75df523 100644
--- a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx
+++ b/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({
diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx
index e3c53e9d0271..9184efcf7c85 100644
--- a/packages/x-charts/src/BarChart/BarChart.tsx
+++ b/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']),
diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx
index c688859d63be..127c029e9867 100644
--- a/packages/x-charts/src/LineChart/LineChart.tsx
+++ b/packages/x-charts/src/LineChart/LineChart.tsx
@@ -86,7 +86,7 @@ export interface LineChartProps
grid?: Pick;
/**
* 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({
diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx
index 4f146326fcd5..d605a1564238 100644
--- a/packages/x-charts/src/PieChart/PieChart.tsx
+++ b/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({
diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx
index 1c9d3e8ad780..a1d2361eeb05 100644
--- a/packages/x-charts/src/ScatterChart/ScatterChart.tsx
+++ b/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({