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 43ba5b298d15f..0c94979395de6 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 5329fb31e47f3..f5440ca898e9e 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 8125365e03f8a..2942b92921591 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 ec4df95eee229..52b6a9bd0056f 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 dd17c5d8d3bf3..8d4426a4f9d31 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 1dce9cfb8b3fd..dd15be4e5d237 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 e1555deb9bb82..1e974abe72a0b 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 d6f1342a7e107..81ca7241fd46a 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 22a0dab3b73df..73fa87be1352b 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 49f5947d72705..37cbf6fb2c982 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 eea7aaf8c2b2c..f48685ad6338b 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 170732a759d70..1eb9f471154ab 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 d39cdf7e37368..4f48245b770e5 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 c87c7b2a2e62b..8da425ba637df 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 11e7de3ade71c..8293d8d7baaaf 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 771ec34c1fdb3..4aa4a64d3ea6a 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 30ad9ccf5fb9f..e17bf65299692 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 e29e1f1cfcb3b..291c13be609ed 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 14d05225c2e4e..1fcd0e4182837 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 e0eca7dcd5d27..9af286fe77b62 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 b469b8075d2d3..060ff07b87f12 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; }