From acea8ee7192e30df83a061032b8526475b1b242b Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Thu, 14 Mar 2024 11:31:45 +0100 Subject: [PATCH] [docs] Improve slots definitions for charts (#12408) --- docs/data/charts/tooltip/tooltip.md | 26 ++++++++++ docs/pages/x/api/charts/bar-chart.json | 49 ++++++++++++++++--- docs/pages/x/api/charts/charts-legend.json | 6 +++ docs/pages/x/api/charts/charts-tooltip.json | 21 ++++++-- .../x/api/charts/default-charts-legend.json | 7 +++ docs/pages/x/api/charts/line-chart.json | 49 ++++++++++++++++--- docs/pages/x/api/charts/pie-chart.json | 49 ++++++++++++++++--- docs/pages/x/api/charts/scatter-chart.json | 49 ++++++++++++++++--- docs/pages/x/api/charts/spark-line-chart.json | 21 ++++++-- .../api-docs/charts/bar-chart/bar-chart.json | 14 +++--- .../charts/charts-legend/charts-legend.json | 1 + .../charts/charts-tooltip/charts-tooltip.json | 6 ++- .../default-charts-legend.json | 3 +- .../charts/line-chart/line-chart.json | 14 +++--- .../api-docs/charts/pie-chart/pie-chart.json | 14 +++--- .../charts/scatter-chart/scatter-chart.json | 14 +++--- .../spark-line-chart/spark-line-chart.json | 6 +-- .../src/ChartsLegend/ChartsLegend.tsx | 6 +++ .../src/ChartsLegend/DefaultChartsLegend.tsx | 3 ++ .../src/ChartsTooltip/ChartsTooltip.tsx | 12 +++++ packages/x-charts/src/models/axis.ts | 16 ++++++ 21 files changed, 319 insertions(+), 67 deletions(-) diff --git a/docs/data/charts/tooltip/tooltip.md b/docs/data/charts/tooltip/tooltip.md index 43ba5b298d15..0c94979395de 100644 --- a/docs/data/charts/tooltip/tooltip.md +++ b/docs/data/charts/tooltip/tooltip.md @@ -81,6 +81,32 @@ It will remove the header showing the x-axis value from the tooltip. /> ``` +### Overriding content + +To modify the tooltip content, use `slots.itemContent` or `slots.axisContent`. +The first one is rendered when tooltip trigger is set to `"item"`. +The second one when trigger is set to `"axis"`. + +```jsx +// With single component + + +// With composition + + // ... + + +``` + ## Composition If you're using composition, by default, the axis will be listening for mouse events to get its current x/y values. diff --git a/docs/pages/x/api/charts/bar-chart.json b/docs/pages/x/api/charts/bar-chart.json index 5329fb31e47f..f5440ca898e9 100644 --- a/docs/pages/x/api/charts/bar-chart.json +++ b/docs/pages/x/api/charts/bar-chart.json @@ -111,10 +111,30 @@ "import { BarChart } from '@mui/x-charts';" ], "slots": [ - { "name": "axisLine", "description": "", "class": null }, - { "name": "axisTick", "description": "", "class": null }, - { "name": "axisTickLabel", "description": "", "class": null }, - { "name": "axisLabel", "description": "", "class": null }, + { + "name": "axisLine", + "description": "Custom component for the axis main line.", + "default": "'line'", + "class": null + }, + { + "name": "axisTick", + "description": "Custom component for the axis tick.", + "default": "'line'", + "class": null + }, + { + "name": "axisTickLabel", + "description": "Custom component for tick label.", + "default": "ChartsText", + "class": null + }, + { + "name": "axisLabel", + "description": "Custom component for axis label.", + "default": "ChartsText", + "class": null + }, { "name": "bar", "description": "The component that renders the bar.", @@ -127,9 +147,24 @@ "default": "DefaultChartsLegend", "class": null }, - { "name": "popper", "description": "", "class": null }, - { "name": "axisContent", "description": "", "class": null }, - { "name": "itemContent", "description": "", "class": null } + { + "name": "popper", + "description": "Custom component for the tooltip popper.", + "default": "ChartsTooltipRoot", + "class": null + }, + { + "name": "axisContent", + "description": "Custom component for displaying tooltip content when triggered by axis event.", + "default": "DefaultChartsAxisTooltipContent", + "class": null + }, + { + "name": "itemContent", + "description": "Custom component for displaying tooltip content when triggered by item event.", + "default": "DefaultChartsItemTooltipContent", + "class": null + } ], "classes": [], "muiName": "MuiBarChart", diff --git a/docs/pages/x/api/charts/charts-legend.json b/docs/pages/x/api/charts/charts-legend.json index 8125365e03f8..2942b9292159 100644 --- a/docs/pages/x/api/charts/charts-legend.json +++ b/docs/pages/x/api/charts/charts-legend.json @@ -3,6 +3,12 @@ "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "direction": { "type": { "name": "enum", "description": "'column'
| 'row'" } }, "hidden": { "type": { "name": "bool" }, "default": "false" }, + "position": { + "type": { + "name": "shape", + "description": "{ horizontal: 'left'
| 'middle'
| 'right', vertical: 'bottom'
| 'middle'
| 'top' }" + } + }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, diff --git a/docs/pages/x/api/charts/charts-tooltip.json b/docs/pages/x/api/charts/charts-tooltip.json index ec4df95eee22..52b6a9bd0056 100644 --- a/docs/pages/x/api/charts/charts-tooltip.json +++ b/docs/pages/x/api/charts/charts-tooltip.json @@ -31,9 +31,24 @@ "import { ChartsTooltip } from '@mui/x-charts';" ], "slots": [ - { "name": "popper", "description": "", "class": null }, - { "name": "axisContent", "description": "", "class": null }, - { "name": "itemContent", "description": "", "class": null } + { + "name": "popper", + "description": "Custom component for the tooltip popper.", + "default": "ChartsTooltipRoot", + "class": null + }, + { + "name": "axisContent", + "description": "Custom component for displaying tooltip content when triggered by axis event.", + "default": "DefaultChartsAxisTooltipContent", + "class": null + }, + { + "name": "itemContent", + "description": "Custom component for displaying tooltip content when triggered by item event.", + "default": "DefaultChartsItemTooltipContent", + "class": null + } ], "classes": [ { diff --git a/docs/pages/x/api/charts/default-charts-legend.json b/docs/pages/x/api/charts/default-charts-legend.json index dd17c5d8d3bf..8d4426a4f9d3 100644 --- a/docs/pages/x/api/charts/default-charts-legend.json +++ b/docs/pages/x/api/charts/default-charts-legend.json @@ -9,6 +9,13 @@ "type": { "name": "enum", "description": "'column'
| 'row'" }, "required": true }, + "position": { + "type": { + "name": "shape", + "description": "{ horizontal: 'left'
| 'middle'
| 'right', vertical: 'bottom'
| 'middle'
| 'top' }" + }, + "required": true + }, "hidden": { "type": { "name": "bool" }, "default": "false" }, "itemGap": { "type": { "name": "number" }, "default": "10" }, "itemMarkHeight": { "type": { "name": "number" }, "default": "20" }, diff --git a/docs/pages/x/api/charts/line-chart.json b/docs/pages/x/api/charts/line-chart.json index 1dce9cfb8b3f..dd15be4e5d23 100644 --- a/docs/pages/x/api/charts/line-chart.json +++ b/docs/pages/x/api/charts/line-chart.json @@ -106,10 +106,30 @@ "import { LineChart } from '@mui/x-charts';" ], "slots": [ - { "name": "axisLine", "description": "", "class": null }, - { "name": "axisTick", "description": "", "class": null }, - { "name": "axisTickLabel", "description": "", "class": null }, - { "name": "axisLabel", "description": "", "class": null }, + { + "name": "axisLine", + "description": "Custom component for the axis main line.", + "default": "'line'", + "class": null + }, + { + "name": "axisTick", + "description": "Custom component for the axis tick.", + "default": "'line'", + "class": null + }, + { + "name": "axisTickLabel", + "description": "Custom component for tick label.", + "default": "ChartsText", + "class": null + }, + { + "name": "axisLabel", + "description": "Custom component for axis label.", + "default": "ChartsText", + "class": null + }, { "name": "area", "description": "The component that renders the area.", @@ -130,9 +150,24 @@ "default": "DefaultChartsLegend", "class": null }, - { "name": "popper", "description": "", "class": null }, - { "name": "axisContent", "description": "", "class": null }, - { "name": "itemContent", "description": "", "class": null } + { + "name": "popper", + "description": "Custom component for the tooltip popper.", + "default": "ChartsTooltipRoot", + "class": null + }, + { + "name": "axisContent", + "description": "Custom component for displaying tooltip content when triggered by axis event.", + "default": "DefaultChartsAxisTooltipContent", + "class": null + }, + { + "name": "itemContent", + "description": "Custom component for displaying tooltip content when triggered by item event.", + "default": "DefaultChartsItemTooltipContent", + "class": null + } ], "classes": [], "muiName": "MuiLineChart", diff --git a/docs/pages/x/api/charts/pie-chart.json b/docs/pages/x/api/charts/pie-chart.json index e1555deb9bb8..1e974abe72a0 100644 --- a/docs/pages/x/api/charts/pie-chart.json +++ b/docs/pages/x/api/charts/pie-chart.json @@ -102,10 +102,30 @@ "import { PieChart } from '@mui/x-charts';" ], "slots": [ - { "name": "axisLine", "description": "", "class": null }, - { "name": "axisTick", "description": "", "class": null }, - { "name": "axisTickLabel", "description": "", "class": null }, - { "name": "axisLabel", "description": "", "class": null }, + { + "name": "axisLine", + "description": "Custom component for the axis main line.", + "default": "'line'", + "class": null + }, + { + "name": "axisTick", + "description": "Custom component for the axis tick.", + "default": "'line'", + "class": null + }, + { + "name": "axisTickLabel", + "description": "Custom component for tick label.", + "default": "ChartsText", + "class": null + }, + { + "name": "axisLabel", + "description": "Custom component for axis label.", + "default": "ChartsText", + "class": null + }, { "name": "pieArc", "description": "", "class": null }, { "name": "pieArcLabel", "description": "", "class": null }, { @@ -114,9 +134,24 @@ "default": "DefaultChartsLegend", "class": null }, - { "name": "popper", "description": "", "class": null }, - { "name": "axisContent", "description": "", "class": null }, - { "name": "itemContent", "description": "", "class": null } + { + "name": "popper", + "description": "Custom component for the tooltip popper.", + "default": "ChartsTooltipRoot", + "class": null + }, + { + "name": "axisContent", + "description": "Custom component for displaying tooltip content when triggered by axis event.", + "default": "DefaultChartsAxisTooltipContent", + "class": null + }, + { + "name": "itemContent", + "description": "Custom component for displaying tooltip content when triggered by item event.", + "default": "DefaultChartsItemTooltipContent", + "class": null + } ], "classes": [], "muiName": "MuiPieChart", diff --git a/docs/pages/x/api/charts/scatter-chart.json b/docs/pages/x/api/charts/scatter-chart.json index d6f1342a7e10..81ca7241fd46 100644 --- a/docs/pages/x/api/charts/scatter-chart.json +++ b/docs/pages/x/api/charts/scatter-chart.json @@ -103,10 +103,30 @@ "import { ScatterChart } from '@mui/x-charts';" ], "slots": [ - { "name": "axisLine", "description": "", "class": null }, - { "name": "axisTick", "description": "", "class": null }, - { "name": "axisTickLabel", "description": "", "class": null }, - { "name": "axisLabel", "description": "", "class": null }, + { + "name": "axisLine", + "description": "Custom component for the axis main line.", + "default": "'line'", + "class": null + }, + { + "name": "axisTick", + "description": "Custom component for the axis tick.", + "default": "'line'", + "class": null + }, + { + "name": "axisTickLabel", + "description": "Custom component for tick label.", + "default": "ChartsText", + "class": null + }, + { + "name": "axisLabel", + "description": "Custom component for axis label.", + "default": "ChartsText", + "class": null + }, { "name": "scatter", "description": "", "class": null }, { "name": "legend", @@ -114,9 +134,24 @@ "default": "DefaultChartsLegend", "class": null }, - { "name": "popper", "description": "", "class": null }, - { "name": "axisContent", "description": "", "class": null }, - { "name": "itemContent", "description": "", "class": null } + { + "name": "popper", + "description": "Custom component for the tooltip popper.", + "default": "ChartsTooltipRoot", + "class": null + }, + { + "name": "axisContent", + "description": "Custom component for displaying tooltip content when triggered by axis event.", + "default": "DefaultChartsAxisTooltipContent", + "class": null + }, + { + "name": "itemContent", + "description": "Custom component for displaying tooltip content when triggered by item event.", + "default": "DefaultChartsItemTooltipContent", + "class": null + } ], "classes": [], "muiName": "MuiScatterChart", diff --git a/docs/pages/x/api/charts/spark-line-chart.json b/docs/pages/x/api/charts/spark-line-chart.json index 22a0dab3b73d..73fa87be1352 100644 --- a/docs/pages/x/api/charts/spark-line-chart.json +++ b/docs/pages/x/api/charts/spark-line-chart.json @@ -74,9 +74,24 @@ "default": "BarElementPath", "class": null }, - { "name": "popper", "description": "", "class": null }, - { "name": "axisContent", "description": "", "class": null }, - { "name": "itemContent", "description": "", "class": null } + { + "name": "popper", + "description": "Custom component for the tooltip popper.", + "default": "ChartsTooltipRoot", + "class": null + }, + { + "name": "axisContent", + "description": "Custom component for displaying tooltip content when triggered by axis event.", + "default": "DefaultChartsAxisTooltipContent", + "class": null + }, + { + "name": "itemContent", + "description": "Custom component for displaying tooltip content when triggered by item event.", + "default": "DefaultChartsItemTooltipContent", + "class": null + } ], "classes": [], "muiName": "MuiSparkLineChart", diff --git a/docs/translations/api-docs/charts/bar-chart/bar-chart.json b/docs/translations/api-docs/charts/bar-chart/bar-chart.json index 49f5947d7270..37cbf6fb2c98 100644 --- a/docs/translations/api-docs/charts/bar-chart/bar-chart.json +++ b/docs/translations/api-docs/charts/bar-chart/bar-chart.json @@ -66,14 +66,14 @@ }, "classDescriptions": {}, "slotDescriptions": { - "axisContent": "", - "axisLabel": "", - "axisLine": "", - "axisTick": "", - "axisTickLabel": "", + "axisContent": "Custom component for displaying tooltip content when triggered by axis event.", + "axisLabel": "Custom component for axis label.", + "axisLine": "Custom component for the axis main line.", + "axisTick": "Custom component for the axis tick.", + "axisTickLabel": "Custom component for tick label.", "bar": "The component that renders the bar.", - "itemContent": "", + "itemContent": "Custom component for displaying tooltip content when triggered by item event.", "legend": "Custom rendering of the legend.", - "popper": "" + "popper": "Custom component for the tooltip popper." } } diff --git a/docs/translations/api-docs/charts/charts-legend/charts-legend.json b/docs/translations/api-docs/charts/charts-legend/charts-legend.json index eea7aaf8c2b2..f48685ad6338 100644 --- a/docs/translations/api-docs/charts/charts-legend/charts-legend.json +++ b/docs/translations/api-docs/charts/charts-legend/charts-legend.json @@ -6,6 +6,7 @@ "description": "The direction of the legend layout. The default depends on the chart." }, "hidden": { "description": "Set to true to hide the legend." }, + "position": { "description": "The position of the legend." }, "slotProps": { "description": "The props used for each component slot." }, "slots": { "description": "Overridable component slots." } }, diff --git a/docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json b/docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json index 170732a759d7..1eb9f471154a 100644 --- a/docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json +++ b/docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json @@ -33,5 +33,9 @@ "nodeName": "the valueCell element" } }, - "slotDescriptions": { "axisContent": "", "itemContent": "", "popper": "" } + "slotDescriptions": { + "axisContent": "Custom component for displaying tooltip content when triggered by axis event.", + "itemContent": "Custom component for displaying tooltip content when triggered by item event.", + "popper": "Custom component for the tooltip popper." + } } diff --git a/docs/translations/api-docs/charts/default-charts-legend/default-charts-legend.json b/docs/translations/api-docs/charts/default-charts-legend/default-charts-legend.json index d39cdf7e3736..4f48245b770e 100644 --- a/docs/translations/api-docs/charts/default-charts-legend/default-charts-legend.json +++ b/docs/translations/api-docs/charts/default-charts-legend/default-charts-legend.json @@ -13,7 +13,8 @@ "markGap": { "description": "Space between the mark and the label (in px)." }, "padding": { "description": "Legend padding (in px). Can either be a single number, or an object with top, left, bottom, right properties." - } + }, + "position": { "description": "The position of the legend." } }, "classDescriptions": { "mark": { "description": "" }, diff --git a/docs/translations/api-docs/charts/line-chart/line-chart.json b/docs/translations/api-docs/charts/line-chart/line-chart.json index c87c7b2a2e62..8da425ba637d 100644 --- a/docs/translations/api-docs/charts/line-chart/line-chart.json +++ b/docs/translations/api-docs/charts/line-chart/line-chart.json @@ -65,16 +65,16 @@ "classDescriptions": {}, "slotDescriptions": { "area": "The component that renders the area.", - "axisContent": "", - "axisLabel": "", - "axisLine": "", - "axisTick": "", - "axisTickLabel": "", - "itemContent": "", + "axisContent": "Custom component for displaying tooltip content when triggered by axis event.", + "axisLabel": "Custom component for axis label.", + "axisLine": "Custom component for the axis main line.", + "axisTick": "Custom component for the axis tick.", + "axisTickLabel": "Custom component for tick label.", + "itemContent": "Custom component for displaying tooltip content when triggered by item event.", "legend": "Custom rendering of the legend.", "line": "The component that renders the line.", "lineHighlight": "", "mark": "", - "popper": "" + "popper": "Custom component for the tooltip popper." } } diff --git a/docs/translations/api-docs/charts/pie-chart/pie-chart.json b/docs/translations/api-docs/charts/pie-chart/pie-chart.json index 11e7de3ade71..8293d8d7baaa 100644 --- a/docs/translations/api-docs/charts/pie-chart/pie-chart.json +++ b/docs/translations/api-docs/charts/pie-chart/pie-chart.json @@ -52,15 +52,15 @@ }, "classDescriptions": {}, "slotDescriptions": { - "axisContent": "", - "axisLabel": "", - "axisLine": "", - "axisTick": "", - "axisTickLabel": "", - "itemContent": "", + "axisContent": "Custom component for displaying tooltip content when triggered by axis event.", + "axisLabel": "Custom component for axis label.", + "axisLine": "Custom component for the axis main line.", + "axisTick": "Custom component for the axis tick.", + "axisTickLabel": "Custom component for tick label.", + "itemContent": "Custom component for displaying tooltip content when triggered by item event.", "legend": "Custom rendering of the legend.", "pieArc": "", "pieArcLabel": "", - "popper": "" + "popper": "Custom component for the tooltip popper." } } diff --git a/docs/translations/api-docs/charts/scatter-chart/scatter-chart.json b/docs/translations/api-docs/charts/scatter-chart/scatter-chart.json index 771ec34c1fdb..4aa4a64d3ea6 100644 --- a/docs/translations/api-docs/charts/scatter-chart/scatter-chart.json +++ b/docs/translations/api-docs/charts/scatter-chart/scatter-chart.json @@ -63,14 +63,14 @@ }, "classDescriptions": {}, "slotDescriptions": { - "axisContent": "", - "axisLabel": "", - "axisLine": "", - "axisTick": "", - "axisTickLabel": "", - "itemContent": "", + "axisContent": "Custom component for displaying tooltip content when triggered by axis event.", + "axisLabel": "Custom component for axis label.", + "axisLine": "Custom component for the axis main line.", + "axisTick": "Custom component for the axis tick.", + "axisTickLabel": "Custom component for tick label.", + "itemContent": "Custom component for displaying tooltip content when triggered by item event.", "legend": "Custom rendering of the legend.", - "popper": "", + "popper": "Custom component for the tooltip popper.", "scatter": "" } } diff --git a/docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json b/docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json index 30ad9ccf5fb9..e17bf6529969 100644 --- a/docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json +++ b/docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json @@ -41,12 +41,12 @@ "classDescriptions": {}, "slotDescriptions": { "area": "The component that renders the area.", - "axisContent": "", + "axisContent": "Custom component for displaying tooltip content when triggered by axis event.", "bar": "The component that renders the bar.", - "itemContent": "", + "itemContent": "Custom component for displaying tooltip content when triggered by item event.", "line": "The component that renders the line.", "lineHighlight": "", "mark": "", - "popper": "" + "popper": "Custom component for the tooltip popper." } } diff --git a/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx b/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx index e29e1f1cfcb3..291c13be609e 100644 --- a/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx +++ b/packages/x-charts/src/ChartsLegend/ChartsLegend.tsx @@ -23,6 +23,9 @@ export interface ChartsLegendSlotProps { } export type ChartsLegendProps = { + /** + * The position of the legend. + */ position?: AnchorPosition; /** * Override or extend the styles applied to the component. @@ -122,6 +125,9 @@ ChartsLegend.propTypes = { * @default false */ hidden: PropTypes.bool, + /** + * The position of the legend. + */ position: PropTypes.shape({ horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired, vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired, diff --git a/packages/x-charts/src/ChartsLegend/DefaultChartsLegend.tsx b/packages/x-charts/src/ChartsLegend/DefaultChartsLegend.tsx index 14d05225c2e4..1fcd0e418283 100644 --- a/packages/x-charts/src/ChartsLegend/DefaultChartsLegend.tsx +++ b/packages/x-charts/src/ChartsLegend/DefaultChartsLegend.tsx @@ -359,6 +359,9 @@ DefaultChartsLegend.propTypes = { top: PropTypes.number, }), ]), + /** + * The position of the legend. + */ position: PropTypes.shape({ horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired, vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired, diff --git a/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx b/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx index e0eca7dcd5d2..9af286fe77b6 100644 --- a/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx +++ b/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx @@ -22,8 +22,20 @@ import { ChartsAxisContentProps, ChartsAxisTooltipContent } from './ChartsAxisTo import { ChartsTooltipClasses, getChartsTooltipUtilityClass } from './chartsTooltipClasses'; export interface ChartsTooltipSlots { + /** + * Custom component for the tooltip popper. + * @default ChartsTooltipRoot + */ popper?: React.ElementType; + /** + * Custom component for displaying tooltip content when triggered by axis event. + * @default DefaultChartsAxisTooltipContent + */ axisContent?: React.ElementType; + /** + * Custom component for displaying tooltip content when triggered by item event. + * @default DefaultChartsItemTooltipContent + */ itemContent?: React.ElementType; } diff --git a/packages/x-charts/src/models/axis.ts b/packages/x-charts/src/models/axis.ts index b469b8075d2d..060ff07b87f1 100644 --- a/packages/x-charts/src/models/axis.ts +++ b/packages/x-charts/src/models/axis.ts @@ -31,9 +31,25 @@ export type D3ContinuouseScale = | ScaleLinear; export interface ChartsAxisSlots { + /** + * Custom component for the axis main line. + * @default 'line' + */ axisLine?: React.JSXElementConstructor>; + /** + * Custom component for the axis tick. + * @default 'line' + */ axisTick?: React.JSXElementConstructor>; + /** + * Custom component for tick label. + * @default ChartsText + */ axisTickLabel?: React.JSXElementConstructor; + /** + * Custom component for axis label. + * @default ChartsText + */ axisLabel?: React.JSXElementConstructor; }