Skip to content

[docs] Add Charts example collection page (DX-10) #18353

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.

Sign up for GitHub

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

Merged
merged 55 commits into from
Sep 17, 2025
Merged

[docs] Add Charts example collection page (DX-10) #18353

Show file tree
Hide file tree
Changes from 39 commits
Commits
Show all changes
55 commits
Select commit Hold shift + click to select a range
cf2adf2
first
prakhargupta1 Jun 12, 2025
cf6a99d
second
prakhargupta1 Jun 12, 2025
a81d155
fix-links
prakhargupta1 Jun 12, 2025
32d99c1
prettier
prakhargupta1 Jun 12, 2025
ad8e119
Merge branch 'master' into charts-demo
prakhargupta1 Jun 12, 2025
69b032c
more
prakhargupta1 Jun 13, 2025
92b6cce
mm
prakhargupta1 Jun 13, 2025
a968c98
Merge branch 'master' into charts-demo
alelthomas Aug 4, 2025
1ff6da0
reorganize examples setup
alelthomas Aug 5, 2025
1589900
docs api
alelthomas Aug 5, 2025
638e1fb
dark mode hover
alelthomas Aug 5, 2025
4b562d6
clean up
alelthomas Aug 5, 2025
42b1009
delete old setup files
alelthomas Aug 5, 2025
89a0c66
Merge branch 'master' into charts-demo
alelthomas Aug 5, 2025
4c778e0
add hover effect
alelthomas Aug 5, 2025
e7d4a57
add single pagers
alelthomas Aug 5, 2025
6037b66
Merge branch 'master' into charts-demo
alelthomas Aug 5, 2025
0cc174a
docs api
alelthomas Aug 5, 2025
c02037c
Merge branch 'master' into charts-demo
alelthomas Aug 11, 2025
a6ffdab
Merge branch 'master' into charts-demo
alelthomas Aug 14, 2025
d7ee611
remove hover effect
alelthomas Aug 14, 2025
a75b3f0
styling edits
alelthomas Aug 14, 2025
236da61
remove individual pages
alelthomas Aug 14, 2025
95111f0
docs api
alelthomas Aug 14, 2025
8b49709
remove unused files
alelthomas Aug 14, 2025
4eabc54
fix route
alelthomas Aug 14, 2025
eaca6e5
Merge remote-tracking branch 'upstream/master' into charts-demo
alexfauquette Aug 18, 2025
31dbd73
update containers
alexfauquette Aug 18, 2025
0df553d
update demos
alexfauquette Aug 18, 2025
acb22f7
Merge branch 'master' into charts-demo
alelthomas Aug 20, 2025
c0ac7dc
Merge branch 'master' into charts-demo
alelthomas Aug 21, 2025
68419ea
layout adjustments
alelthomas Aug 21, 2025
04bdc7a
Move demos in a dedicated folder and link to the actual docs
alexfauquette Aug 22, 2025
3c267c8
Merge branch 'master' into charts-demo
alelthomas Aug 22, 2025
cab92db
padding and border
alelthomas Aug 22, 2025
bca7989
Merge branch 'master' into charts-demo
alelthomas Aug 25, 2025
d669575
add aspectRatio
alelthomas Aug 25, 2025
465cd7b
Merge branch 'master' into charts-demo
alelthomas Aug 25, 2025
39e2016
Merge branch 'master' into charts-demo
alelthomas Aug 29, 2025
dac365f
1 chart changed
prakhargupta1 Sep 2, 2025
60f326c
Apply suggestion from @JCQuintas
JCQuintas Sep 2, 2025
ff015c7
Apply suggestion from @JCQuintas
JCQuintas Sep 2, 2025
c2ff700
Merge commit '6c4e3f1d21ce5fceb343db36284d5fdc6c6107f6' into charts-demo
JCQuintas Sep 2, 2025
9141e5c
prettier
JCQuintas Sep 2, 2025
2c96acf
fix sparkline
JCQuintas Sep 2, 2025
e2a3554
add box
prakhargupta1 Sep 12, 2025
667f619
add composed chart
prakhargupta1 Sep 12, 2025
3a6ed38
prettier
prakhargupta1 Sep 12, 2025
aaa4126
Merge branch 'master' into charts-demo
prakhargupta1 Sep 12, 2025
d012d58
test
prakhargupta1 Sep 12, 2025
5f54d68
fix-population-pyramid
prakhargupta1 Sep 12, 2025
ef18993
two pie charts
alexfauquette Sep 15, 2025
8393c45
Merge branch 'master' into charts-demo
alexfauquette Sep 15, 2025
f9865e3
Merge branch 'master' into charts-demo
prakhargupta1 Sep 17, 2025
2f9a34f
ci
alexfauquette Sep 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 11 additions & 9 deletions docs/data/charts/bar-demo/BarChartStackedBySign.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import { BarChart } from '@mui/x-charts/BarChart';

const pData = [2400, 1398, -9800, 3908, 4800, -3800, 4300];
Expand All @@ -16,14 +17,15 @@ const xLabels = [

export default function BarChartStackedBySign() {
return (
<BarChart
height={300}
series={[
{ data: pData, label: 'pv', id: 'pvId', stack: 'stack1' },
{ data: uData, label: 'uv', id: 'uvId', stack: 'stack1' },
]}
xAxis={[{ data: xLabels }]}
yAxis={[{ width: 60 }]}
/>
<Box sx={{ width: '100%', height: 300 }}>
<BarChart
series={[
{ data: pData, label: 'pv', id: 'pvId', stack: 'stack1' },
{ data: uData, label: 'uv', id: 'uvId', stack: 'stack1' },
]}
xAxis={[{ data: xLabels }]}
yAxis={[{ width: 60 }]}
/>
</Box>
);
}
20 changes: 11 additions & 9 deletions docs/data/charts/bar-demo/BarChartStackedBySign.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import { BarChart } from '@mui/x-charts/BarChart';

const pData = [2400, 1398, -9800, 3908, 4800, -3800, 4300];
Expand All @@ -16,14 +17,15 @@ const xLabels = [

export default function BarChartStackedBySign() {
return (
<BarChart
height={300}
series={[
{ data: pData, label: 'pv', id: 'pvId', stack: 'stack1' },
{ data: uData, label: 'uv', id: 'uvId', stack: 'stack1' },
]}
xAxis={[{ data: xLabels }]}
yAxis={[{ width: 60 }]}
/>
<Box sx={{ width: '100%', height: 300 }}>
<BarChart
series={[
{ data: pData, label: 'pv', id: 'pvId', stack: 'stack1' },
{ data: uData, label: 'uv', id: 'uvId', stack: 'stack1' },
]}
xAxis={[{ data: xLabels }]}
yAxis={[{ width: 60 }]}
/>
</Box>
);
}
1 change: 0 additions & 1 deletion docs/data/charts/bar-demo/BarChartStackedBySign.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<BarChart
height={300}
series={[
{ data: pData, label: 'pv', id: 'pvId', stack: 'stack1' },
{ data: uData, label: 'uv', id: 'uvId', stack: 'stack1' },
Expand Down
46 changes: 24 additions & 22 deletions docs/data/charts/bar-demo/BiaxialBarChart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from 'react';
import { BarChart } from '@mui/x-charts/BarChart';
import Box from '@mui/material/Box';

const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
Expand All @@ -16,27 +17,28 @@ const xLabels = [

export default function BiaxialBarChart() {
return (
<BarChart
height={300}
series={[
{
data: pData,
label: 'pv',
id: 'pvId',
yAxisId: 'leftAxisId',
},
{
data: uData,
label: 'uv',
id: 'uvId',
yAxisId: 'rightAxisId',
},
]}
xAxis={[{ data: xLabels }]}
yAxis={[
{ id: 'leftAxisId', width: 50 },
{ id: 'rightAxisId', position: 'right' },
]}
/>
<Box sx={{ width: '100%', height: 300 }}>
<BarChart
series={[
{
data: pData,
label: 'pv',
id: 'pvId',
yAxisId: 'leftAxisId',
},
{
data: uData,
label: 'uv',
id: 'uvId',
yAxisId: 'rightAxisId',
},
]}
xAxis={[{ data: xLabels }]}
yAxis={[
{ id: 'leftAxisId', width: 50 },
{ id: 'rightAxisId', position: 'right' },
]}
/>
</Box>
);
}
47 changes: 24 additions & 23 deletions docs/data/charts/bar-demo/BiaxialBarChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from 'react';
import { BarChart } from '@mui/x-charts/BarChart';
import Box from '@mui/material/Box';

const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
Expand All @@ -16,29 +17,29 @@ const xLabels = [

export default function BiaxialBarChart() {
return (
<BarChart
height={300}
series={[
{
data: pData,
label: 'pv',
id: 'pvId',
<Box sx={{ width: '100%', height: 300 }}>
<BarChart
series={[
{
data: pData,
label: 'pv',
id: 'pvId',

yAxisId: 'leftAxisId',
},
{
data: uData,
label: 'uv',
id: 'uvId',

yAxisId: 'rightAxisId',
},
]}
xAxis={[{ data: xLabels }]}
yAxis={[
{ id: 'leftAxisId', width: 50 },
{ id: 'rightAxisId', position: 'right' },
]}
/>
yAxisId: 'leftAxisId',
},
{
data: uData,
label: 'uv',
id: 'uvId',
yAxisId: 'rightAxisId',
},
]}
xAxis={[{ data: xLabels }]}
yAxis={[
{ id: 'leftAxisId', width: 50 },
{ id: 'rightAxisId', position: 'right' },
]}
/>
</Box>
);
}
22 changes: 12 additions & 10 deletions docs/data/charts/bar-demo/MixedBarChart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import { BarChart } from '@mui/x-charts/BarChart';

const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
Expand All @@ -17,15 +18,16 @@ const xLabels = [

export default function MixedBarChart() {
return (
<BarChart
height={300}
series={[
{ data: pData, label: 'pv', stack: 'stack1' },
{ data: amtData, label: 'amt' },
{ data: uData, label: 'uv', stack: 'stack1' },
]}
xAxis={[{ data: xLabels }]}
yAxis={[{ width: 50 }]}
/>
<Box sx={{ width: '100%', height: 300 }}>
<BarChart
series={[
{ data: pData, label: 'pv', stack: 'stack1' },
{ data: amtData, label: 'amt' },
{ data: uData, label: 'uv', stack: 'stack1' },
]}
xAxis={[{ data: xLabels }]}
yAxis={[{ width: 50 }]}
/>
</Box>
);
}
22 changes: 12 additions & 10 deletions docs/data/charts/bar-demo/MixedBarChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import { BarChart } from '@mui/x-charts/BarChart';

const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
Expand All @@ -17,15 +18,16 @@ const xLabels = [

export default function MixedBarChart() {
return (
<BarChart
height={300}
series={[
{ data: pData, label: 'pv', stack: 'stack1' },
{ data: amtData, label: 'amt' },
{ data: uData, label: 'uv', stack: 'stack1' },
]}
xAxis={[{ data: xLabels }]}
yAxis={[{ width: 50 }]}
/>
<Box sx={{ width: '100%', height: 300 }}>
<BarChart
series={[
{ data: pData, label: 'pv', stack: 'stack1' },
{ data: amtData, label: 'amt' },
{ data: uData, label: 'uv', stack: 'stack1' },
]}
xAxis={[{ data: xLabels }]}
yAxis={[{ width: 50 }]}
/>
</Box>
);
}
1 change: 0 additions & 1 deletion docs/data/charts/bar-demo/MixedBarChart.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<BarChart
height={300}
series={[
{ data: pData, label: 'pv', stack: 'stack1' },
{ data: amtData, label: 'amt' },
Expand Down
10 changes: 7 additions & 3 deletions docs/data/charts/bar-demo/PopulationPyramidBarChart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,12 +50,16 @@ const valueFormatter = (population) =>

export default function PopulationPyramidBarChart() {
return (
<Stack width="100%" sx={{ mx: [0, 4] }}>
<Typography variant="h6" component="span" textAlign="center">
<Stack width="100%" height={550} sx={{ mx: [0, 4] }}>
<Typography
variant="h6"
component="span"
textAlign="center"
data-hide-overview
>
South Korea Population Pyramid - 2022
</Typography>
<BarChart
height={500}
layout="horizontal"
margin={{ right: 0, left: 0 }}
series={[
Expand Down
10 changes: 7 additions & 3 deletions docs/data/charts/bar-demo/PopulationPyramidBarChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,12 +50,16 @@ const valueFormatter = (population: number | null) =>

export default function PopulationPyramidBarChart() {
return (
<Stack width="100%" sx={{ mx: [0, 4] }}>
<Typography variant="h6" component="span" textAlign="center">
<Stack width="100%" height={550} sx={{ mx: [0, 4] }}>
<Typography
variant="h6"
component="span"
textAlign="center"
data-hide-overview
>
South Korea Population Pyramid - 2022
</Typography>
<BarChart
height={500}
layout="horizontal"
margin={{ right: 0, left: 0 }}
series={[
Expand Down
20 changes: 11 additions & 9 deletions docs/data/charts/bar-demo/PositiveAndNegativeBarChart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import { BarChart } from '@mui/x-charts/BarChart';

const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
Expand All @@ -16,14 +17,15 @@ const xLabels = [

export default function PositiveAndNegativeBarChart() {
return (
<BarChart
height={300}
series={[
{ data: pData, label: 'pv' },
{ data: uData, label: 'uv' },
]}
xAxis={[{ data: xLabels }]}
yAxis={[{ width: 60, max: 10000 }]}
/>
<Box sx={{ width: '100%', height: 300 }}>
<BarChart
series={[
{ data: pData, label: 'pv' },
{ data: uData, label: 'uv' },
]}
xAxis={[{ data: xLabels }]}
yAxis={[{ width: 60, max: 10000 }]}
/>
</Box>
);
}
20 changes: 11 additions & 9 deletions docs/data/charts/bar-demo/PositiveAndNegativeBarChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import { BarChart } from '@mui/x-charts/BarChart';

const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
Expand All @@ -16,14 +17,15 @@ const xLabels = [

export default function PositiveAndNegativeBarChart() {
return (
<BarChart
height={300}
series={[
{ data: pData, label: 'pv' },
{ data: uData, label: 'uv' },
]}
xAxis={[{ data: xLabels }]}
yAxis={[{ width: 60, max: 10000 }]}
/>
<Box sx={{ width: '100%', height: 300 }}>
<BarChart
series={[
{ data: pData, label: 'pv' },
{ data: uData, label: 'uv' },
]}
xAxis={[{ data: xLabels }]}
yAxis={[{ width: 60, max: 10000 }]}
/>
</Box>
);
}
1 change: 0 additions & 1 deletion docs/data/charts/bar-demo/PositiveAndNegativeBarChart.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<BarChart
height={300}
series={[
{ data: pData, label: 'pv' },
{ data: uData, label: 'uv' },
Expand Down
20 changes: 11 additions & 9 deletions docs/data/charts/bar-demo/SimpleBarChart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import { BarChart } from '@mui/x-charts/BarChart';

const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
Expand All @@ -15,14 +16,15 @@ const xLabels = [

export default function SimpleBarChart() {
return (
<BarChart
height={300}
series={[
{ data: pData, label: 'pv', id: 'pvId' },
{ data: uData, label: 'uv', id: 'uvId' },
]}
xAxis={[{ data: xLabels }]}
yAxis={[{ width: 50 }]}
/>
<Box sx={{ width: '100%', height: 300 }}>
<BarChart
series={[
{ data: pData, label: 'pv', id: 'pvId' },
{ data: uData, label: 'uv', id: 'uvId' },
]}
xAxis={[{ data: xLabels }]}
yAxis={[{ width: 50 }]}
/>
</Box>
);
}
Loading
Loading