Skip to content

Commit cda36b6

Browse files
prakhargupta1prakhargupta1
authored
[charts] Add a demo showcasing bar and scatter composition (#19605)
1 parent 1834503 commit cda36b6

File tree

5 files changed

+320
-0
lines changed

5 files changed

+320
-0
lines changed

‎docs/data/charts/bars/BarScatterCompostion.js‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import * as React from 'react';
2+
import Box from '@mui/material/Box';
3+
import Typography from '@mui/material/Typography';
4+
import { BarPlot } from '@mui/x-charts/BarChart';
5+
import { ScatterPlot } from '@mui/x-charts/ScatterChart';
6+
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
7+
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
8+
import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
9+
import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider';
10+
import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
11+
import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
12+
import { legendClasses, ChartsLegend } from '@mui/x-charts/ChartsLegend';
13+
import { GDPdata } from '../dataset/gdpGrowth';
14+
15+
const chartSetting = {
16+
xAxis: [
17+
{
18+
id: 'bar',
19+
label: 'GDP growth rate',
20+
dataKey: '2024',
21+
colorMap: {
22+
type: 'piecewise',
23+
thresholds: [0],
24+
colors: ['#ff4d4f', '#1976d2'],
25+
},
26+
},
27+
{
28+
id: 'scatter',
29+
label: '2010-19 Average',
30+
dataKey: '2010_19',
31+
color: '#FFFF00',
32+
},
33+
],
34+
height: 800,
35+
};
36+
37+
const valueFormatter = (value) => (value ? `${value.toFixed(2)}%` : '');
38+
39+
const scatterValueFormatter = (value) => (value ? `${value.x.toFixed(2)}%` : '');
40+
41+
function Gradient() {
42+
return (
43+
<linearGradient id="diagonalGradient" x1="0%" y1="50%" x2="100%" y2="50%">
44+
<stop offset="0%" stopColor="#ff4d4f" />
45+
<stop offset="50%" stopColor="#ff4d4f" />
46+
<stop offset="50%" stopColor="#1976d2" />
47+
<stop offset="100%" stopColor="#1976d2" />
48+
</linearGradient>
49+
);
50+
}
51+
52+
export default function BarScatterCompostion() {
53+
return (
54+
<Box
55+
sx={{
56+
width: '100%',
57+
overflow: 'auto',
58+
display: 'flex',
59+
flexDirection: 'column',
60+
alignItems: 'center',
61+
}}
62+
>
63+
<Typography variant="h6">
64+
GDP growth rate comparison (2024 vs 2010-19 Avg)
65+
</Typography>
66+
<ChartDataProvider
67+
dataset={GDPdata}
68+
series={[
69+
{
70+
id: 'bar',
71+
type: 'bar',
72+
layout: 'horizontal',
73+
dataKey: '2024',
74+
label: '2024 ',
75+
valueFormatter,
76+
},
77+
{
78+
id: 'scatter',
79+
type: 'scatter',
80+
datasetKeys: { id: 'country', x: '2010_19', y: 'country' },
81+
label: '2010-19 Average',
82+
valueFormatter: scatterValueFormatter,
83+
markerSize: 4,
84+
xAxisId: 'scatter',
85+
},
86+
]}
87+
yAxis={[{ scaleType: 'band', dataKey: 'country', width: 100 }]}
88+
{...chartSetting}
89+
>
90+
<ChartsLegend
91+
sx={{
92+
[`[data-series="bar"] .${legendClasses.mark} rect`]: {
93+
fill: 'url(#diagonalGradient)',
94+
},
95+
}}
96+
/>
97+
<ChartsTooltip />
98+
<ChartsSurface>
99+
<Gradient />
100+
<ChartsGrid vertical />
101+
<BarPlot />
102+
<ScatterPlot />
103+
<ChartsXAxis axisId="bar" />
104+
<ChartsYAxis />
105+
</ChartsSurface>
106+
</ChartDataProvider>
107+
</Box>
108+
);
109+
}

‎docs/data/charts/bars/BarScatterCompostion.tsx‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import * as React from 'react';
2+
import Box from '@mui/material/Box';
3+
import Typography from '@mui/material/Typography';
4+
import { BarPlot } from '@mui/x-charts/BarChart';
5+
import { ScatterPlot } from '@mui/x-charts/ScatterChart';
6+
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
7+
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
8+
import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
9+
import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider';
10+
import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
11+
import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
12+
import { legendClasses, ChartsLegend } from '@mui/x-charts/ChartsLegend';
13+
import { GDPdata } from '../dataset/gdpGrowth';
14+
15+
const chartSetting = {
16+
xAxis: [
17+
{
18+
id: 'bar',
19+
label: 'GDP growth rate',
20+
dataKey: '2024',
21+
colorMap: {
22+
type: 'piecewise' as const,
23+
thresholds: [0],
24+
colors: ['#ff4d4f', '#1976d2'],
25+
},
26+
},
27+
{
28+
id: 'scatter',
29+
label: '2010-19 Average',
30+
dataKey: '2010_19',
31+
color: '#FFFF00',
32+
},
33+
],
34+
height: 800,
35+
};
36+
37+
const valueFormatter = (value: number | null) =>
38+
value ? `${value.toFixed(2)}%` : '';
39+
40+
const scatterValueFormatter = (value: { x: number } | null) =>
41+
value ? `${value.x.toFixed(2)}%` : '';
42+
43+
function Gradient() {
44+
return (
45+
<linearGradient id="diagonalGradient" x1="0%" y1="50%" x2="100%" y2="50%">
46+
<stop offset="0%" stopColor="#ff4d4f" />
47+
<stop offset="50%" stopColor="#ff4d4f" />
48+
<stop offset="50%" stopColor="#1976d2" />
49+
<stop offset="100%" stopColor="#1976d2" />
50+
</linearGradient>
51+
);
52+
}
53+
54+
export default function BarScatterCompostion() {
55+
return (
56+
<Box
57+
sx={{
58+
width: '100%',
59+
overflow: 'auto',
60+
display: 'flex',
61+
flexDirection: 'column',
62+
alignItems: 'center',
63+
}}
64+
>
65+
<Typography variant="h6">
66+
GDP growth rate comparison (2024 vs 2010-19 Avg)
67+
</Typography>
68+
<ChartDataProvider
69+
dataset={GDPdata}
70+
series={[
71+
{
72+
id: 'bar',
73+
type: 'bar',
74+
layout: 'horizontal',
75+
dataKey: '2024',
76+
label: '2024 ',
77+
valueFormatter,
78+
},
79+
{
80+
id: 'scatter',
81+
type: 'scatter',
82+
datasetKeys: { id: 'country', x: '2010_19', y: 'country' },
83+
label: '2010-19 Average',
84+
valueFormatter: scatterValueFormatter,
85+
markerSize: 4,
86+
xAxisId: 'scatter',
87+
},
88+
]}
89+
yAxis={[{ scaleType: 'band', dataKey: 'country', width: 100 }]}
90+
{...chartSetting}
91+
>
92+
<ChartsLegend
93+
sx={{
94+
[`[data-series="bar"] .${legendClasses.mark} rect`]: {
95+
fill: 'url(#diagonalGradient)',
96+
},
97+
}}
98+
/>
99+
<ChartsTooltip />
100+
<ChartsSurface>
101+
<Gradient />
102+
<ChartsGrid vertical />
103+
<BarPlot />
104+
<ScatterPlot />
105+
<ChartsXAxis axisId="bar" />
106+
<ChartsYAxis />
107+
</ChartsSurface>
108+
</ChartDataProvider>
109+
</Box>
110+
);
111+
}

‎docs/data/charts/bars/bars.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -273,3 +273,5 @@ Here's how the Bar Chart is composed:
273273
</ChartsWrapper>
274274
</ChartDataProvider>
275275
```
276+
277+
{{"demo": "BarScatterCompostion.js"}}

‎docs/data/charts/dataset/gdpGrowth.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
// https://www.oecd.org/en/publications/tax-policy-reforms-2025_de648d27-en/full-report/macroeconomic-background_ebccf079.html#title-20cf76328c
2+
export const GDPdata = [
3+
{ country: 'India', 2024: 6.3810638, '2010_19': 6.56714562 },
4+
{ country: 'Indonesia', 2024: 5.03034469, '2010_19': 5.32531564 },
5+
{ country: 'China', 2024: 5, '2010_19': 7.36273676 },
6+
{ country: 'Costa Rica', 2024: 4.3212243, '2010_19': 3.59316165 },
7+
{ country: 'Denmark', 2024: 3.4778362, '2010_19': 1.74954257 },
8+
{ country: 'Brazil', 2024: 3.39586623, '2010_19': 0.73807505 },
9+
{ country: 'World', 2024: 3.2892454, '2010_19': 3.48533816 },
10+
{ country: 'Turkey', 2024: 3.21098016, '2010_19': 5.51724835 },
11+
{ country: 'Spain', 2024: 3.15027419, '2010_19': 1.17809639 },
12+
{ country: 'Ireland', 2024: 3.1120881, '2010_19': 3.28745819 },
13+
{ country: 'Poland', 2024: 2.87206925, '2010_19': 3.85506372 },
14+
{ country: 'United States', 2024: 2.7961903, '2010_19': 2.36215473 },
15+
{ country: 'Lithuania', 2024: 2.77263113, '2010_19': 4.24350429 },
16+
{ country: 'Chile', 2024: 2.43033058, '2010_19': 3.03141355 },
17+
{ country: 'Greece', 2024: 2.27172879, '2010_19': -1.6648595 },
18+
{ country: 'Norway', 2024: 2.10042076, '2010_19': 1.58971623 },
19+
{ country: 'Slovakia', 2024: 2.06167772, '2010_19': 2.64580849 },
20+
{ country: 'South Korea', 2024: 2.00360203, '2010_19': 3.08328436 },
21+
{ country: 'Portugal', 2024: 1.92521716, '2010_19': 0.70480827 },
22+
{ country: 'Colombia', 2024: 1.59828185, '2010_19': 3.61500547 },
23+
{ country: 'Slovenia', 2024: 1.59101564, '2010_19': 1.98874963 },
24+
{ country: 'Mexico', 2024: 1.42742768, '2010_19': 2.02424958 },
25+
{ country: 'Switzerland', 2024: 1.35507634, '2010_19': 1.8173047 },
26+
{ country: 'France', 2024: 1.10074388, '2010_19': 1.36429216 },
27+
{ country: 'United Kingdom', 2024: 1.10066786, '2010_19': 1.93956165 },
28+
{ country: 'Netherlands', 2024: 1.07623261, '2010_19': 1.57915817 },
29+
{ country: 'Australia', 2024: 1.07254397, '2010_19': 2.61099278 },
30+
{ country: 'Belgium', 2024: 1.01891806, '2010_19': 1.40659018 },
31+
{ country: 'Luxembourg', 2024: 1.01345739, '2010_19': 2.37401475 },
32+
{ country: 'Czech Republic', 2024: 1.0004623, '2010_19': 2.47793968 },
33+
{ country: 'Sweden', 2024: 0.98227982, '2010_19': 2.166745 },
34+
{ country: 'Canada', 2024: 0.97378519, '2010_19': 2.15940807 },
35+
{ country: 'Israel', 2024: 0.96117, '2010_19': 3.83855889 },
36+
{ country: 'Euro Area', 2024: 0.84014588, '2010_19': 1.33585332 },
37+
{ country: 'Italy', 2024: 0.7257928, '2010_19': 0.07054465 },
38+
{ country: 'South Africa', 2024: 0.53484354, '2010_19': 1.59905159 },
39+
{ country: 'Hungary', 2024: 0.51230579, '2010_19': 3.0749098 },
40+
{ country: 'Finland', 2024: 0.40697063, '2010_19': 0.90935431 },
41+
{ country: 'Japan', 2024: 0.17215125, '2010_19': 0.87823414 },
42+
{ country: 'Germany', 2024: -0.2050507, '2010_19': 1.76620852 },
43+
{ country: 'Estonia', 2024: -0.2597047, '2010_19': 3.74307818 },
44+
{ country: 'Latvia', 2024: -0.4424911, '2010_19': 3.23544493 },
45+
{ country: 'New Zealand', 2024: -0.5073226, '2010_19': 3.24005199 },
46+
{ country: 'Iceland', 2024: -0.6591877, '2010_19': 3.41167286 },
47+
{ country: 'Austria', 2024: -1.1433111, '2010_19': 1.58379927 },
48+
{ country: 'Argentina', 2024: -1.3429306, '2010_19': 0.37061707 },
49+
];

‎docs/data/charts/dataset/gdpGrowth.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
// https://www.oecd.org/en/publications/tax-policy-reforms-2025_de648d27-en/full-report/macroeconomic-background_ebccf079.html#title-20cf76328c
2+
export const GDPdata = [
3+
{ country: 'India', '2024': 6.3810638, '2010_19': 6.56714562 },
4+
{ country: 'Indonesia', '2024': 5.03034469, '2010_19': 5.32531564 },
5+
{ country: 'China', '2024': 5, '2010_19': 7.36273676 },
6+
{ country: 'Costa Rica', '2024': 4.3212243, '2010_19': 3.59316165 },
7+
{ country: 'Denmark', '2024': 3.4778362, '2010_19': 1.74954257 },
8+
{ country: 'Brazil', '2024': 3.39586623, '2010_19': 0.73807505 },
9+
{ country: 'World', '2024': 3.2892454, '2010_19': 3.48533816 },
10+
{ country: 'Turkey', '2024': 3.21098016, '2010_19': 5.51724835 },
11+
{ country: 'Spain', '2024': 3.15027419, '2010_19': 1.17809639 },
12+
{ country: 'Ireland', '2024': 3.1120881, '2010_19': 3.28745819 },
13+
{ country: 'Poland', '2024': 2.87206925, '2010_19': 3.85506372 },
14+
{ country: 'United States', '2024': 2.7961903, '2010_19': 2.36215473 },
15+
{ country: 'Lithuania', '2024': 2.77263113, '2010_19': 4.24350429 },
16+
{ country: 'Chile', '2024': 2.43033058, '2010_19': 3.03141355 },
17+
{ country: 'Greece', '2024': 2.27172879, '2010_19': -1.6648595 },
18+
{ country: 'Norway', '2024': 2.10042076, '2010_19': 1.58971623 },
19+
{ country: 'Slovakia', '2024': 2.06167772, '2010_19': 2.64580849 },
20+
{ country: 'South Korea', '2024': 2.00360203, '2010_19': 3.08328436 },
21+
{ country: 'Portugal', '2024': 1.92521716, '2010_19': 0.70480827 },
22+
{ country: 'Colombia', '2024': 1.59828185, '2010_19': 3.61500547 },
23+
{ country: 'Slovenia', '2024': 1.59101564, '2010_19': 1.98874963 },
24+
{ country: 'Mexico', '2024': 1.42742768, '2010_19': 2.02424958 },
25+
{ country: 'Switzerland', '2024': 1.35507634, '2010_19': 1.8173047 },
26+
{ country: 'France', '2024': 1.10074388, '2010_19': 1.36429216 },
27+
{ country: 'United Kingdom', '2024': 1.10066786, '2010_19': 1.93956165 },
28+
{ country: 'Netherlands', '2024': 1.07623261, '2010_19': 1.57915817 },
29+
{ country: 'Australia', '2024': 1.07254397, '2010_19': 2.61099278 },
30+
{ country: 'Belgium', '2024': 1.01891806, '2010_19': 1.40659018 },
31+
{ country: 'Luxembourg', '2024': 1.01345739, '2010_19': 2.37401475 },
32+
{ country: 'Czech Republic', '2024': 1.0004623, '2010_19': 2.47793968 },
33+
{ country: 'Sweden', '2024': 0.98227982, '2010_19': 2.166745 },
34+
{ country: 'Canada', '2024': 0.97378519, '2010_19': 2.15940807 },
35+
{ country: 'Israel', '2024': 0.96117, '2010_19': 3.83855889 },
36+
{ country: 'Euro Area', '2024': 0.84014588, '2010_19': 1.33585332 },
37+
{ country: 'Italy', '2024': 0.7257928, '2010_19': 0.07054465 },
38+
{ country: 'South Africa', '2024': 0.53484354, '2010_19': 1.59905159 },
39+
{ country: 'Hungary', '2024': 0.51230579, '2010_19': 3.0749098 },
40+
{ country: 'Finland', '2024': 0.40697063, '2010_19': 0.90935431 },
41+
{ country: 'Japan', '2024': 0.17215125, '2010_19': 0.87823414 },
42+
{ country: 'Germany', '2024': -0.2050507, '2010_19': 1.76620852 },
43+
{ country: 'Estonia', '2024': -0.2597047, '2010_19': 3.74307818 },
44+
{ country: 'Latvia', '2024': -0.4424911, '2010_19': 3.23544493 },
45+
{ country: 'New Zealand', '2024': -0.5073226, '2010_19': 3.24005199 },
46+
{ country: 'Iceland', '2024': -0.6591877, '2010_19': 3.41167286 },
47+
{ country: 'Austria', '2024': -1.1433111, '2010_19': 1.58379927 },
48+
{ country: 'Argentina', '2024': -1.3429306, '2010_19': 0.37061707 },
49+
];

0 commit comments

Comments
 (0)