Skip to content

Commit 8e52ea0

Browse files
[charts] Default bar chart x-axis scale type to band (#17519)
1 parent eb151d4 commit 8e52ea0

File tree

112 files changed

+132
-237
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

112 files changed

+132
-237
lines changed

bug-reproductions/x-charts/src/demo.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default function Demo() {
66
return (
77
<Box sx={{ height: 520, width: '100%' }}>
88
<BarChart
9-
xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
9+
xAxis={[{ data: ['group A', 'group B', 'group C'] }]}
1010
series={[
1111
{ label: 'first', data: [4, 3, 5] },
1212
{ label: 'second', data: [1, 6, 3] },

docs/data/charts/animation/JSAnimationCustomization.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function JSAnimationCustomization() {
1212
<Stack>
1313
<BarChart
1414
key={key}
15-
xAxis={[{ scaleType: 'band', data: ['A', 'B', 'C'] }]}
15+
xAxis={[{ data: ['A', 'B', 'C'] }]}
1616
series={[
1717
{
1818
type: 'bar',

docs/data/charts/animation/JSAnimationCustomization.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function JSAnimationCustomization() {
1212
<Stack>
1313
<BarChart
1414
key={key}
15-
xAxis={[{ scaleType: 'band', data: ['A', 'B', 'C'] }]}
15+
xAxis={[{ data: ['A', 'B', 'C'] }]}
1616
series={[
1717
{
1818
type: 'bar',

docs/data/charts/animation/JSDefaultAnimation.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function JSDefaultAnimation() {
1212
<Stack>
1313
<BarChart
1414
key={key}
15-
xAxis={[{ scaleType: 'band', data: ['A', 'B', 'C'] }]}
15+
xAxis={[{ data: ['A', 'B', 'C'] }]}
1616
series={[
1717
{
1818
type: 'bar',

docs/data/charts/animation/JSDefaultAnimation.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function JSDefaultAnimation() {
1212
<Stack>
1313
<BarChart
1414
key={key}
15-
xAxis={[{ scaleType: 'band', data: ['A', 'B', 'C'] }]}
15+
xAxis={[{ data: ['A', 'B', 'C'] }]}
1616
series={[
1717
{
1818
type: 'bar',

docs/data/charts/animation/ReactSpringAnimationCustomization.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default function ReactSpringAnimationCustomization() {
1111
<Stack>
1212
<BarChart
1313
key={key}
14-
xAxis={[{ scaleType: 'band', data: ['A', 'B', 'C'] }]}
14+
xAxis={[{ data: ['A', 'B', 'C'] }]}
1515
series={[
1616
{
1717
type: 'bar',

docs/data/charts/animation/ReactSpringAnimationCustomization.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default function ReactSpringAnimationCustomization() {
1111
<Stack>
1212
<BarChart
1313
key={key}
14-
xAxis={[{ scaleType: 'band', data: ['A', 'B', 'C'] }]}
14+
xAxis={[{ data: ['A', 'B', 'C'] }]}
1515
series={[
1616
{
1717
type: 'bar',

docs/data/charts/axis/AxisTextCustomization.js

-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ export default function AxisTextCustomization() {
3333
dataset={dataset}
3434
xAxis={[
3535
{
36-
scaleType: 'band',
3736
dataKey: 'month',
3837
label: 'months',
3938
height: 60,

docs/data/charts/axis/AxisTextCustomization.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ export default function AxisTextCustomization() {
3535
dataset={dataset}
3636
xAxis={[
3737
{
38-
scaleType: 'band',
3938
dataKey: 'month',
4039
label: 'months',
4140
height: 60,

docs/data/charts/axis/GridDemo.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function GridDemo() {
1212
return (
1313
<BarChart
1414
dataset={dataset}
15-
xAxis={[{ scaleType: 'band', dataKey: 'month' }]}
15+
xAxis={[{ dataKey: 'month' }]}
1616
series={[{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }]}
1717
grid={{ horizontal: true }}
1818
sx={{

docs/data/charts/axis/GridDemo.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function GridDemo() {
1212
return (
1313
<BarChart
1414
dataset={dataset}
15-
xAxis={[{ scaleType: 'band', dataKey: 'month' }]}
15+
xAxis={[{ dataKey: 'month' }]}
1616
series={[{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }]}
1717
grid={{ horizontal: true }}
1818
sx={{

docs/data/charts/axis/GridDemo.tsx.preview

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<BarChart
22
dataset={dataset}
3-
xAxis={[{ scaleType: 'band', dataKey: 'month' }]}
3+
xAxis={[{ dataKey: 'month' }]}
44
series={[{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }]}
55
grid={{ horizontal: true }}
66
sx={{

docs/data/charts/axis/HidingAxis.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export default function HidingAxis() {
55
return (
66
<BarChart
77
series={[{ data: [1, 2, 3, 2, 1] }]}
8-
xAxis={[{ scaleType: 'band', data: ['A', 'B', 'C', 'D', 'E'] }]}
8+
xAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
99
yAxis={[{ position: 'none' }]}
1010
height={300}
1111
width={300}

docs/data/charts/axis/HidingAxis.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export default function HidingAxis() {
55
return (
66
<BarChart
77
series={[{ data: [1, 2, 3, 2, 1] }]}
8-
xAxis={[{ scaleType: 'band', data: ['A', 'B', 'C', 'D', 'E'] }]}
8+
xAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
99
yAxis={[{ position: 'none' }]}
1010
height={300}
1111
width={300}

docs/data/charts/axis/HidingAxis.tsx.preview

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<BarChart
22
series={[{ data: [1, 2, 3, 2, 1] }]}
3-
xAxis={[{ scaleType: 'band', data: ['A', 'B', 'C', 'D', 'E'] }]}
3+
xAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
44
yAxis={[{ position: 'none' }]}
55
height={300}
66
width={300}

docs/data/charts/bar-demo/BarChartStackedBySign.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default function BarChartStackedBySign() {
2222
{ data: pData, label: 'pv', id: 'pvId', stack: 'stack1' },
2323
{ data: uData, label: 'uv', id: 'uvId', stack: 'stack1' },
2424
]}
25-
xAxis={[{ data: xLabels, scaleType: 'band' }]}
25+
xAxis={[{ data: xLabels }]}
2626
yAxis={[{ width: 60 }]}
2727
/>
2828
);

docs/data/charts/bar-demo/BarChartStackedBySign.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default function BarChartStackedBySign() {
2222
{ data: pData, label: 'pv', id: 'pvId', stack: 'stack1' },
2323
{ data: uData, label: 'uv', id: 'uvId', stack: 'stack1' },
2424
]}
25-
xAxis={[{ data: xLabels, scaleType: 'band' }]}
25+
xAxis={[{ data: xLabels }]}
2626
yAxis={[{ width: 60 }]}
2727
/>
2828
);

docs/data/charts/bar-demo/BarChartStackedBySign.tsx.preview

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@
44
{ data: pData, label: 'pv', id: 'pvId', stack: 'stack1' },
55
{ data: uData, label: 'uv', id: 'uvId', stack: 'stack1' },
66
]}
7-
xAxis={[{ data: xLabels, scaleType: 'band' }]}
7+
xAxis={[{ data: xLabels }]}
88
yAxis={[{ width: 60 }]}
99
/>

docs/data/charts/bar-demo/BiaxialBarChart.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export default function BiaxialBarChart() {
3232
yAxisId: 'rightAxisId',
3333
},
3434
]}
35-
xAxis={[{ data: xLabels, scaleType: 'band' }]}
35+
xAxis={[{ data: xLabels }]}
3636
yAxis={[
3737
{ id: 'leftAxisId', width: 50 },
3838
{ id: 'rightAxisId', position: 'right' },

docs/data/charts/bar-demo/BiaxialBarChart.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export default function BiaxialBarChart() {
3434
yAxisId: 'rightAxisId',
3535
},
3636
]}
37-
xAxis={[{ data: xLabels, scaleType: 'band' }]}
37+
xAxis={[{ data: xLabels }]}
3838
yAxis={[
3939
{ id: 'leftAxisId', width: 50 },
4040
{ id: 'rightAxisId', position: 'right' },

docs/data/charts/bar-demo/MixedBarChart.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export default function MixedBarChart() {
2424
{ data: amtData, label: 'amt' },
2525
{ data: uData, label: 'uv', stack: 'stack1' },
2626
]}
27-
xAxis={[{ data: xLabels, scaleType: 'band' }]}
27+
xAxis={[{ data: xLabels }]}
2828
yAxis={[{ width: 50 }]}
2929
/>
3030
);

docs/data/charts/bar-demo/MixedBarChart.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export default function MixedBarChart() {
2424
{ data: amtData, label: 'amt' },
2525
{ data: uData, label: 'uv', stack: 'stack1' },
2626
]}
27-
xAxis={[{ data: xLabels, scaleType: 'band' }]}
27+
xAxis={[{ data: xLabels }]}
2828
yAxis={[{ width: 50 }]}
2929
/>
3030
);

docs/data/charts/bar-demo/MixedBarChart.tsx.preview

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@
55
{ data: amtData, label: 'amt' },
66
{ data: uData, label: 'uv', stack: 'stack1' },
77
]}
8-
xAxis={[{ data: xLabels, scaleType: 'band' }]}
8+
xAxis={[{ data: xLabels }]}
99
yAxis={[{ width: 50 }]}
1010
/>

docs/data/charts/bar-demo/PositiveAndNegativeBarChart.js

+3-14
Original file line numberDiff line numberDiff line change
@@ -19,21 +19,10 @@ export default function PositiveAndNegativeBarChart() {
1919
<BarChart
2020
height={300}
2121
series={[
22-
{
23-
data: pData,
24-
label: 'pv',
25-
},
26-
{
27-
data: uData,
28-
label: 'uv',
29-
},
30-
]}
31-
xAxis={[
32-
{
33-
data: xLabels,
34-
scaleType: 'band',
35-
},
22+
{ data: pData, label: 'pv' },
23+
{ data: uData, label: 'uv' },
3624
]}
25+
xAxis={[{ data: xLabels }]}
3726
yAxis={[{ width: 60, max: 10000 }]}
3827
/>
3928
);

docs/data/charts/bar-demo/PositiveAndNegativeBarChart.tsx

+3-14
Original file line numberDiff line numberDiff line change
@@ -19,21 +19,10 @@ export default function PositiveAndNegativeBarChart() {
1919
<BarChart
2020
height={300}
2121
series={[
22-
{
23-
data: pData,
24-
label: 'pv',
25-
},
26-
{
27-
data: uData,
28-
label: 'uv',
29-
},
30-
]}
31-
xAxis={[
32-
{
33-
data: xLabels,
34-
scaleType: 'band',
35-
},
22+
{ data: pData, label: 'pv' },
23+
{ data: uData, label: 'uv' },
3624
]}
25+
xAxis={[{ data: xLabels }]}
3726
yAxis={[{ width: 60, max: 10000 }]}
3827
/>
3928
);
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<BarChart
2+
height={300}
3+
series={[
4+
{ data: pData, label: 'pv' },
5+
{ data: uData, label: 'uv' },
6+
]}
7+
xAxis={[{ data: xLabels }]}
8+
yAxis={[{ width: 60, max: 10000 }]}
9+
/>

docs/data/charts/bar-demo/SimpleBarChart.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default function SimpleBarChart() {
2121
{ data: pData, label: 'pv', id: 'pvId' },
2222
{ data: uData, label: 'uv', id: 'uvId' },
2323
]}
24-
xAxis={[{ data: xLabels, scaleType: 'band' }]}
24+
xAxis={[{ data: xLabels }]}
2525
yAxis={[{ width: 50 }]}
2626
/>
2727
);

docs/data/charts/bar-demo/SimpleBarChart.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default function SimpleBarChart() {
2121
{ data: pData, label: 'pv', id: 'pvId' },
2222
{ data: uData, label: 'uv', id: 'uvId' },
2323
]}
24-
xAxis={[{ data: xLabels, scaleType: 'band' }]}
24+
xAxis={[{ data: xLabels }]}
2525
yAxis={[{ width: 50 }]}
2626
/>
2727
);

docs/data/charts/bar-demo/SimpleBarChart.tsx.preview

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@
44
{ data: pData, label: 'pv', id: 'pvId' },
55
{ data: uData, label: 'uv', id: 'uvId' },
66
]}
7-
xAxis={[{ data: xLabels, scaleType: 'band' }]}
7+
xAxis={[{ data: xLabels }]}
88
yAxis={[{ width: 50 }]}
99
/>

docs/data/charts/bar-demo/StackedBarChart.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default function StackedBarChart() {
2121
{ data: pData, label: 'pv', id: 'pvId', stack: 'total' },
2222
{ data: uData, label: 'uv', id: 'uvId', stack: 'total' },
2323
]}
24-
xAxis={[{ data: xLabels, scaleType: 'band' }]}
24+
xAxis={[{ data: xLabels }]}
2525
yAxis={[{ width: 50 }]}
2626
/>
2727
);

docs/data/charts/bar-demo/StackedBarChart.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default function StackedBarChart() {
2121
{ data: pData, label: 'pv', id: 'pvId', stack: 'total' },
2222
{ data: uData, label: 'uv', id: 'uvId', stack: 'total' },
2323
]}
24-
xAxis={[{ data: xLabels, scaleType: 'band' }]}
24+
xAxis={[{ data: xLabels }]}
2525
yAxis={[{ width: 50 }]}
2626
/>
2727
);

docs/data/charts/bar-demo/StackedBarChart.tsx.preview

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@
44
{ data: pData, label: 'pv', id: 'pvId', stack: 'total' },
55
{ data: uData, label: 'uv', id: 'uvId', stack: 'total' },
66
]}
7-
xAxis={[{ data: xLabels, scaleType: 'band' }]}
7+
xAxis={[{ data: xLabels }]}
88
yAxis={[{ width: 50 }]}
99
/>

docs/data/charts/bars/BarClick.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const barChartsParams = {
3838
},
3939
},
4040
],
41-
xAxis: [{ data: ['0', '3', '6', '9', '12'], scaleType: 'band', id: 'axis1' }],
41+
xAxis: [{ data: ['0', '3', '6', '9', '12'], id: 'axis1' }],
4242
height: 400,
4343
};
4444

docs/data/charts/bars/BarClick.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const barChartsParams = {
3939
},
4040
},
4141
],
42-
xAxis: [{ data: ['0', '3', '6', '9', '12'], scaleType: 'band', id: 'axis1' }],
42+
xAxis: [{ data: ['0', '3', '6', '9', '12'], id: 'axis1' }],
4343
height: 400,
4444
} as const;
4545

docs/data/charts/bars/BarGap.js

-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@ export default function BarGap() {
3636
height={300}
3737
xAxis={[
3838
{
39-
scaleType: 'band',
4039
dataKey: 'year',
4140
categoryGapRatio: props.categoryGapRatio,
4241
barGapRatio: props.barGapRatio,

docs/data/charts/bars/BarGap.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@ export default function BarGap() {
3636
height={300}
3737
xAxis={[
3838
{
39-
scaleType: 'band',
4039
dataKey: 'year',
4140
categoryGapRatio: props.categoryGapRatio,
4241
barGapRatio: props.barGapRatio,

docs/data/charts/bars/BarLabel.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { BarChart } from '@mui/x-charts/BarChart';
44
export default function BarLabel() {
55
return (
66
<BarChart
7-
xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
7+
xAxis={[{ data: ['group A', 'group B', 'group C'] }]}
88
series={[{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }]}
99
height={300}
1010
barLabel="value"

docs/data/charts/bars/BarLabel.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { BarChart } from '@mui/x-charts/BarChart';
44
export default function BarLabel() {
55
return (
66
<BarChart
7-
xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
7+
xAxis={[{ data: ['group A', 'group B', 'group C'] }]}
88
series={[{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }]}
99
height={300}
1010
barLabel="value"

docs/data/charts/bars/BarLabel.tsx.preview

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<BarChart
2-
xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
2+
xAxis={[{ data: ['group A', 'group B', 'group C'] }]}
33
series={[{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }]}
44
height={300}
55
barLabel="value"

docs/data/charts/bars/BarsDataset.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default function BarsDataset() {
1616
return (
1717
<BarChart
1818
dataset={dataset}
19-
xAxis={[{ scaleType: 'band', dataKey: 'month' }]}
19+
xAxis={[{ dataKey: 'month' }]}
2020
series={[
2121
{ dataKey: 'london', label: 'London', valueFormatter },
2222
{ dataKey: 'paris', label: 'Paris', valueFormatter },

docs/data/charts/bars/BarsDataset.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default function BarsDataset() {
1616
return (
1717
<BarChart
1818
dataset={dataset}
19-
xAxis={[{ scaleType: 'band', dataKey: 'month' }]}
19+
xAxis={[{ dataKey: 'month' }]}
2020
series={[
2121
{ dataKey: 'london', label: 'London', valueFormatter },
2222
{ dataKey: 'paris', label: 'Paris', valueFormatter },

0 commit comments

Comments
 (0)