diff --git a/docs/data/charts/overview/overview.md b/docs/data/charts/overview/overview.md index 26b8942a704e..e3347418beb6 100644 --- a/docs/data/charts/overview/overview.md +++ b/docs/data/charts/overview/overview.md @@ -16,7 +16,7 @@ packageName: '@mui/x-charts' The `@mui/x-charts` is an MIT library for rendering charts relying on [D3.js](https://d3js.org/) for data manipulation and SVG for rendering. And, like other MUI X components, charts are production-ready components that integrate smoothly into your app. -With a high level of customization, MUI X Charts provides on three levels of customization layers: **single components** with great defaults, extensive **configuration props**, and **subcomponents** for flexible composition. +With a high level of customization, MUI X Charts provides three levels of customization layers: **single components** with great defaults, extensive **configuration props**, and **subcomponents** for flexible composition. Additionally, you can also use all the [MUI System](https://mui.com/system/getting-started/) tools, such as the theme override or the `sx` prop. {{"demo": "ChartsOverviewDemo.js", "defaultCodeOpen": true}} diff --git a/docs/src/modules/components/ChartComponentsGrid.js b/docs/src/modules/components/ChartComponentsGrid.js index 8fe4df769bc9..c981309f64ca 100644 --- a/docs/src/modules/components/ChartComponentsGrid.js +++ b/docs/src/modules/components/ChartComponentsGrid.js @@ -46,13 +46,6 @@ function getComponents() { srcDark: '/static/x/component-illustrations/gauge-dark.png', href: '/x/react-charts/gauge/', }, - { - title: 'Heatmap', - srcLight: '/static/x/component-illustrations/heatmap-light.png', - srcDark: '/static/x/component-illustrations/heatmap-dark.png', - href: '/x/react-charts/heat-map/', - planned: true, - }, { title: 'Radar Chart', srcLight: '/static/x/component-illustrations/radar-light.png', @@ -68,18 +61,18 @@ function getComponents() { planned: true, }, { - title: 'Funnel Chart', - srcLight: '/static/x/component-illustrations/funnel-light.png', - srcDark: '/static/x/component-illustrations/funnel-dark.png', - href: '/x/react-charts/funnel/', + title: 'Heatmap', + srcLight: '/static/x/component-illustrations/heatmap-light.png', + srcDark: '/static/x/component-illustrations/heatmap-dark.png', + href: '/x/react-charts/heat-map/', planned: true, pro: true, }, { - title: 'Gantt Chart', - srcLight: '/static/x/component-illustrations/gantt-light.png', - srcDark: '/static/x/component-illustrations/gantt-dark.png', - href: '/x/react-charts/gantt/', + title: 'Funnel Chart', + srcLight: '/static/x/component-illustrations/funnel-light.png', + srcDark: '/static/x/component-illustrations/funnel-dark.png', + href: '/x/react-charts/funnel/', planned: true, pro: true, }, @@ -91,6 +84,14 @@ function getComponents() { planned: true, pro: true, }, + { + title: 'Gantt Chart', + srcLight: '/static/x/component-illustrations/gantt-light.png', + srcDark: '/static/x/component-illustrations/gantt-dark.png', + href: '/x/react-charts/gantt/', + planned: true, + pro: true, + }, ]; }