Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[charts] Add an overlay for "no data" or "loading" states #12817

Merged
merged 14 commits into from
Apr 29, 2024
Prev Previous commit
refine docs
alexfauquette committed Apr 26, 2024
commit 49ecd96b612e429abe4473d137897e54e0b5ef53
32 changes: 3 additions & 29 deletions docs/data/charts/styling/Overlay.js
Original file line number Diff line number Diff line change
@@ -10,35 +10,9 @@ const emptySeries = {

export default function Overlay() {
return (
<Stack direction="column" sx={{ width: '100%' }}>
<Stack direction={{ md: 'row', xs: 'column' }} sx={{ width: '100%' }}>
<LineChart loading {...emptySeries} />
<LineChart {...emptySeries} />
</Stack>
<Stack direction={{ md: 'row', xs: 'column' }} sx={{ width: '100%' }}>
<LineChart
loading
xAxis={[{ data: [0, 1, 2, 4, 5] }]}
yAxis={[{ min: 0, max: 10 }]}
{...emptySeries}
/>
<LineChart
yAxis={[{ min: -5, max: 5 }]}
xAxis={[
{
scaleType: 'time',
data: [
new Date(2019, 0, 1),
new Date(2020, 0, 1),
new Date(2021, 0, 1),
new Date(2022, 0, 1),
],
tickNumber: 3,
},
]}
{...emptySeries}
/>
</Stack>
<Stack direction={{ md: 'row', xs: 'column' }} sx={{ width: '100%' }}>
<LineChart loading {...emptySeries} />
<LineChart {...emptySeries} />
</Stack>
);
}
32 changes: 3 additions & 29 deletions docs/data/charts/styling/Overlay.tsx
Original file line number Diff line number Diff line change
@@ -10,35 +10,9 @@ const emptySeries = {

export default function Overlay() {
return (
<Stack direction="column" sx={{ width: '100%' }}>
<Stack direction={{ md: 'row', xs: 'column' }} sx={{ width: '100%' }}>
<LineChart loading {...emptySeries} />
<LineChart {...emptySeries} />
</Stack>
<Stack direction={{ md: 'row', xs: 'column' }} sx={{ width: '100%' }}>
<LineChart
loading
xAxis={[{ data: [0, 1, 2, 4, 5] }]}
yAxis={[{ min: 0, max: 10 }]}
{...emptySeries}
/>
<LineChart
yAxis={[{ min: -5, max: 5 }]}
xAxis={[
{
scaleType: 'time',
data: [
new Date(2019, 0, 1),
new Date(2020, 0, 1),
new Date(2021, 0, 1),
new Date(2022, 0, 1),
],
tickNumber: 3,
},
]}
{...emptySeries}
/>
</Stack>
<Stack direction={{ md: 'row', xs: 'column' }} sx={{ width: '100%' }}>
<LineChart loading {...emptySeries} />
<LineChart {...emptySeries} />
</Stack>
);
}
2 changes: 2 additions & 0 deletions docs/data/charts/styling/Overlay.tsx.preview
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<LineChart loading {...emptySeries} />
<LineChart {...emptySeries} />
38 changes: 38 additions & 0 deletions docs/data/charts/styling/OverlayWithAxis.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import * as React from 'react';
import Stack from '@mui/material/Stack';
import { LineChart } from '@mui/x-charts/LineChart';

const emptySeries = {
series: [],
margin: { top: 10, right: 10, left: 25, bottom: 25 },
height: 150,
};

export default function OverlayWithAxis() {
return (
<Stack direction={{ md: 'row', xs: 'column' }} sx={{ width: '100%' }}>
<LineChart
loading
xAxis={[{ data: [0, 1, 2, 4, 5] }]}
yAxis={[{ min: 0, max: 10 }]}
{...emptySeries}
/>
<LineChart
yAxis={[{ min: -5, max: 5 }]}
xAxis={[
{
scaleType: 'time',
data: [
new Date(2019, 0, 1),
new Date(2020, 0, 1),
new Date(2021, 0, 1),
new Date(2022, 0, 1),
],
tickNumber: 3,
},
]}
{...emptySeries}
/>
</Stack>
);
}
38 changes: 38 additions & 0 deletions docs/data/charts/styling/OverlayWithAxis.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import * as React from 'react';
import Stack from '@mui/material/Stack';
import { LineChart } from '@mui/x-charts/LineChart';

const emptySeries = {
series: [],
margin: { top: 10, right: 10, left: 25, bottom: 25 },
height: 150,
};

export default function OverlayWithAxis() {
return (
<Stack direction={{ md: 'row', xs: 'column' }} sx={{ width: '100%' }}>
<LineChart
loading
xAxis={[{ data: [0, 1, 2, 4, 5] }]}
yAxis={[{ min: 0, max: 10 }]}
{...emptySeries}
/>
<LineChart
yAxis={[{ min: -5, max: 5 }]}
xAxis={[
{
scaleType: 'time',
data: [
new Date(2019, 0, 1),
new Date(2020, 0, 1),
new Date(2021, 0, 1),
new Date(2022, 0, 1),
],
tickNumber: 3,
},
]}
{...emptySeries}
/>
</Stack>
);
}
23 changes: 21 additions & 2 deletions docs/data/charts/styling/styling.md
Original file line number Diff line number Diff line change
@@ -111,9 +111,28 @@ Charts have a _loading_ and _noData_ overlays that appears if

{{"demo": "Overlay.js"}}

To modify the overly message, you can use `slotProps.loadingOverlay.message` and `slotProps.noDataOverlay.message`.
### Axis display

For more advanced customization, use the `loadingOverlay` and `noDataOverlay` slots.
You can provide the axes data in order to display them while loading the data.

{{"demo": "OverlayWithAxis.js"}}

### Custom overlay

To modify the overly message, you can use the `message` props as follow.

```jsx
<BarChart
slotProps={{
// Custom loading message
loadingOverlay: { message: 'Data should be available soon.' },
// Custom message for empty chart
noDataOverlay: { message: 'Select some data to display.' },
}}
/>
```

For more advanced customization, use the `loadingOverlay` and `noDataOverlay` slots link in the following demo.

{{"demo": "CustomOverlay.js"}}