Skip to content

[charts] Default bar chart x-axis scale type to band #17519

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 9 commits into from
Apr 28, 2025
Merged

[charts] Default bar chart x-axis scale type to band #17519

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
07d7044
[charts] Default bar chart x-axis scale type to band
bernardobelchior Apr 23, 2025
c23dab3
Remove usages of scaleType: 'band'
bernardobelchior Apr 23, 2025
01c564c
Fix demos
bernardobelchior Apr 24, 2025
ae0dc99
Gen demos
bernardobelchior Apr 24, 2025
ca378fc
Fix demo
bernardobelchior Apr 24, 2025
d99d3c3
handle layout: 'horizontal'
bernardobelchior Apr 25, 2025
6712f2a
Re-add scaleType where it shouldn't have been removed
bernardobelchior Apr 25, 2025
0643db7
Gen demos
bernardobelchior Apr 25, 2025
865abf1
Revert wrongly changed demo
bernardobelchior Apr 25, 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
2 changes: 1 addition & 1 deletion bug-reproductions/x-charts/src/demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export default function Demo() {
return (
<Box sx={{ height: 520, width: '100%' }}>
<BarChart
xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
xAxis={[{ data: ['group A', 'group B', 'group C'] }]}
series={[
{ label: 'first', data: [4, 3, 5] },
{ label: 'second', data: [1, 6, 3] },
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/animation/JSAnimationCustomization.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function JSAnimationCustomization() {
<Stack>
<BarChart
key={key}
xAxis={[{ scaleType: 'band', data: ['A', 'B', 'C'] }]}
xAxis={[{ data: ['A', 'B', 'C'] }]}
series={[
{
type: 'bar',
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/animation/JSAnimationCustomization.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function JSAnimationCustomization() {
<Stack>
<BarChart
key={key}
xAxis={[{ scaleType: 'band', data: ['A', 'B', 'C'] }]}
xAxis={[{ data: ['A', 'B', 'C'] }]}
series={[
{
type: 'bar',
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/animation/JSDefaultAnimation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function JSDefaultAnimation() {
<Stack>
<BarChart
key={key}
xAxis={[{ scaleType: 'band', data: ['A', 'B', 'C'] }]}
xAxis={[{ data: ['A', 'B', 'C'] }]}
series={[
{
type: 'bar',
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/animation/JSDefaultAnimation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function JSDefaultAnimation() {
<Stack>
<BarChart
key={key}
xAxis={[{ scaleType: 'band', data: ['A', 'B', 'C'] }]}
xAxis={[{ data: ['A', 'B', 'C'] }]}
series={[
{
type: 'bar',
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/animation/ReactSpringAnimationCustomization.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default function ReactSpringAnimationCustomization() {
<Stack>
<BarChart
key={key}
xAxis={[{ scaleType: 'band', data: ['A', 'B', 'C'] }]}
xAxis={[{ data: ['A', 'B', 'C'] }]}
series={[
{
type: 'bar',
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/animation/ReactSpringAnimationCustomization.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default function ReactSpringAnimationCustomization() {
<Stack>
<BarChart
key={key}
xAxis={[{ scaleType: 'band', data: ['A', 'B', 'C'] }]}
xAxis={[{ data: ['A', 'B', 'C'] }]}
series={[
{
type: 'bar',
Expand Down
1 change: 0 additions & 1 deletion docs/data/charts/axis/AxisTextCustomization.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ export default function AxisTextCustomization() {
dataset={dataset}
xAxis={[
{
scaleType: 'band',
dataKey: 'month',
label: 'months',
height: 60,
Expand Down
1 change: 0 additions & 1 deletion docs/data/charts/axis/AxisTextCustomization.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ export default function AxisTextCustomization() {
dataset={dataset}
xAxis={[
{
scaleType: 'band',
dataKey: 'month',
label: 'months',
height: 60,
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/axis/GridDemo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function GridDemo() {
return (
<BarChart
dataset={dataset}
xAxis={[{ scaleType: 'band', dataKey: 'month' }]}
xAxis={[{ dataKey: 'month' }]}
series={[{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }]}
grid={{ horizontal: true }}
sx={{
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/axis/GridDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function GridDemo() {
return (
<BarChart
dataset={dataset}
xAxis={[{ scaleType: 'band', dataKey: 'month' }]}
xAxis={[{ dataKey: 'month' }]}
series={[{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }]}
grid={{ horizontal: true }}
sx={{
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/axis/GridDemo.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<BarChart
dataset={dataset}
xAxis={[{ scaleType: 'band', dataKey: 'month' }]}
xAxis={[{ dataKey: 'month' }]}
series={[{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }]}
grid={{ horizontal: true }}
sx={{
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/axis/HidingAxis.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export default function HidingAxis() {
return (
<BarChart
series={[{ data: [1, 2, 3, 2, 1] }]}
xAxis={[{ scaleType: 'band', data: ['A', 'B', 'C', 'D', 'E'] }]}
xAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
yAxis={[{ position: 'none' }]}
height={300}
width={300}
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/axis/HidingAxis.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export default function HidingAxis() {
return (
<BarChart
series={[{ data: [1, 2, 3, 2, 1] }]}
xAxis={[{ scaleType: 'band', data: ['A', 'B', 'C', 'D', 'E'] }]}
xAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
yAxis={[{ position: 'none' }]}
height={300}
width={300}
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/axis/HidingAxis.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<BarChart
series={[{ data: [1, 2, 3, 2, 1] }]}
xAxis={[{ scaleType: 'band', data: ['A', 'B', 'C', 'D', 'E'] }]}
xAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
yAxis={[{ position: 'none' }]}
height={300}
width={300}
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/bar-demo/BarChartStackedBySign.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default function BarChartStackedBySign() {
{ data: pData, label: 'pv', id: 'pvId', stack: 'stack1' },
{ data: uData, label: 'uv', id: 'uvId', stack: 'stack1' },
]}
xAxis={[{ data: xLabels, scaleType: 'band' }]}
xAxis={[{ data: xLabels }]}
yAxis={[{ width: 60 }]}
/>
);
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/bar-demo/BarChartStackedBySign.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default function BarChartStackedBySign() {
{ data: pData, label: 'pv', id: 'pvId', stack: 'stack1' },
{ data: uData, label: 'uv', id: 'uvId', stack: 'stack1' },
]}
xAxis={[{ data: xLabels, scaleType: 'band' }]}
xAxis={[{ data: xLabels }]}
yAxis={[{ width: 60 }]}
/>
);
Expand Down
2 changes: 1 addition & 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
Expand Up @@ -4,6 +4,6 @@
{ data: pData, label: 'pv', id: 'pvId', stack: 'stack1' },
{ data: uData, label: 'uv', id: 'uvId', stack: 'stack1' },
]}
xAxis={[{ data: xLabels, scaleType: 'band' }]}
xAxis={[{ data: xLabels }]}
yAxis={[{ width: 60 }]}
/>
2 changes: 1 addition & 1 deletion docs/data/charts/bar-demo/BiaxialBarChart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export default function BiaxialBarChart() {
yAxisId: 'rightAxisId',
},
]}
xAxis={[{ data: xLabels, scaleType: 'band' }]}
xAxis={[{ data: xLabels }]}
yAxis={[
{ id: 'leftAxisId', width: 50 },
{ id: 'rightAxisId', position: 'right' },
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/bar-demo/BiaxialBarChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default function BiaxialBarChart() {
yAxisId: 'rightAxisId',
},
]}
xAxis={[{ data: xLabels, scaleType: 'band' }]}
xAxis={[{ data: xLabels }]}
yAxis={[
{ id: 'leftAxisId', width: 50 },
{ id: 'rightAxisId', position: 'right' },
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/bar-demo/MixedBarChart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export default function MixedBarChart() {
{ data: amtData, label: 'amt' },
{ data: uData, label: 'uv', stack: 'stack1' },
]}
xAxis={[{ data: xLabels, scaleType: 'band' }]}
xAxis={[{ data: xLabels }]}
yAxis={[{ width: 50 }]}
/>
);
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/bar-demo/MixedBarChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export default function MixedBarChart() {
{ data: amtData, label: 'amt' },
{ data: uData, label: 'uv', stack: 'stack1' },
]}
xAxis={[{ data: xLabels, scaleType: 'band' }]}
xAxis={[{ data: xLabels }]}
yAxis={[{ width: 50 }]}
/>
);
Expand Down
2 changes: 1 addition & 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
Expand Up @@ -5,6 +5,6 @@
{ data: amtData, label: 'amt' },
{ data: uData, label: 'uv', stack: 'stack1' },
]}
xAxis={[{ data: xLabels, scaleType: 'band' }]}
xAxis={[{ data: xLabels }]}
yAxis={[{ width: 50 }]}
/>
17 changes: 3 additions & 14 deletions docs/data/charts/bar-demo/PositiveAndNegativeBarChart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,21 +19,10 @@ export default function PositiveAndNegativeBarChart() {
<BarChart
height={300}
series={[
{
data: pData,
label: 'pv',
},
{
data: uData,
label: 'uv',
},
]}
xAxis={[
{
data: xLabels,
scaleType: 'band',
},
{ data: pData, label: 'pv' },
{ data: uData, label: 'uv' },
]}
xAxis={[{ data: xLabels }]}
yAxis={[{ width: 60, max: 10000 }]}
/>
);
Expand Down
17 changes: 3 additions & 14 deletions docs/data/charts/bar-demo/PositiveAndNegativeBarChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,21 +19,10 @@ export default function PositiveAndNegativeBarChart() {
<BarChart
height={300}
series={[
{
data: pData,
label: 'pv',
},
{
data: uData,
label: 'uv',
},
]}
xAxis={[
{
data: xLabels,
scaleType: 'band',
},
{ data: pData, label: 'pv' },
{ data: uData, label: 'uv' },
]}
xAxis={[{ data: xLabels }]}
yAxis={[{ width: 60, max: 10000 }]}
/>
);
Expand Down
9 changes: 9 additions & 0 deletions docs/data/charts/bar-demo/PositiveAndNegativeBarChart.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<BarChart
height={300}
series={[
{ data: pData, label: 'pv' },
{ data: uData, label: 'uv' },
]}
xAxis={[{ data: xLabels }]}
yAxis={[{ width: 60, max: 10000 }]}
/>
2 changes: 1 addition & 1 deletion docs/data/charts/bar-demo/SimpleBarChart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default function SimpleBarChart() {
{ data: pData, label: 'pv', id: 'pvId' },
{ data: uData, label: 'uv', id: 'uvId' },
]}
xAxis={[{ data: xLabels, scaleType: 'band' }]}
xAxis={[{ data: xLabels }]}
yAxis={[{ width: 50 }]}
/>
);
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/bar-demo/SimpleBarChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default function SimpleBarChart() {
{ data: pData, label: 'pv', id: 'pvId' },
{ data: uData, label: 'uv', id: 'uvId' },
]}
xAxis={[{ data: xLabels, scaleType: 'band' }]}
xAxis={[{ data: xLabels }]}
yAxis={[{ width: 50 }]}
/>
);
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/bar-demo/SimpleBarChart.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@
{ data: pData, label: 'pv', id: 'pvId' },
{ data: uData, label: 'uv', id: 'uvId' },
]}
xAxis={[{ data: xLabels, scaleType: 'band' }]}
xAxis={[{ data: xLabels }]}
yAxis={[{ width: 50 }]}
/>
2 changes: 1 addition & 1 deletion docs/data/charts/bar-demo/StackedBarChart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default function StackedBarChart() {
{ data: pData, label: 'pv', id: 'pvId', stack: 'total' },
{ data: uData, label: 'uv', id: 'uvId', stack: 'total' },
]}
xAxis={[{ data: xLabels, scaleType: 'band' }]}
xAxis={[{ data: xLabels }]}
yAxis={[{ width: 50 }]}
/>
);
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/bar-demo/StackedBarChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default function StackedBarChart() {
{ data: pData, label: 'pv', id: 'pvId', stack: 'total' },
{ data: uData, label: 'uv', id: 'uvId', stack: 'total' },
]}
xAxis={[{ data: xLabels, scaleType: 'band' }]}
xAxis={[{ data: xLabels }]}
yAxis={[{ width: 50 }]}
/>
);
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/bar-demo/StackedBarChart.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@
{ data: pData, label: 'pv', id: 'pvId', stack: 'total' },
{ data: uData, label: 'uv', id: 'uvId', stack: 'total' },
]}
xAxis={[{ data: xLabels, scaleType: 'band' }]}
xAxis={[{ data: xLabels }]}
yAxis={[{ width: 50 }]}
/>
2 changes: 1 addition & 1 deletion docs/data/charts/bars/BarClick.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const barChartsParams = {
},
},
],
xAxis: [{ data: ['0', '3', '6', '9', '12'], scaleType: 'band', id: 'axis1' }],
xAxis: [{ data: ['0', '3', '6', '9', '12'], id: 'axis1' }],
height: 400,
};

Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/bars/BarClick.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const barChartsParams = {
},
},
],
xAxis: [{ data: ['0', '3', '6', '9', '12'], scaleType: 'band', id: 'axis1' }],
xAxis: [{ data: ['0', '3', '6', '9', '12'], id: 'axis1' }],
height: 400,
} as const;

Expand Down
1 change: 0 additions & 1 deletion docs/data/charts/bars/BarGap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ export default function BarGap() {
height={300}
xAxis={[
{
scaleType: 'band',
dataKey: 'year',
categoryGapRatio: props.categoryGapRatio,
barGapRatio: props.barGapRatio,
Expand Down
1 change: 0 additions & 1 deletion docs/data/charts/bars/BarGap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ export default function BarGap() {
height={300}
xAxis={[
{
scaleType: 'band',
dataKey: 'year',
categoryGapRatio: props.categoryGapRatio,
barGapRatio: props.barGapRatio,
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/bars/BarLabel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { BarChart } from '@mui/x-charts/BarChart';
export default function BarLabel() {
return (
<BarChart
xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
xAxis={[{ data: ['group A', 'group B', 'group C'] }]}
series={[{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }]}
height={300}
barLabel="value"
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/bars/BarLabel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { BarChart } from '@mui/x-charts/BarChart';
export default function BarLabel() {
return (
<BarChart
xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
xAxis={[{ data: ['group A', 'group B', 'group C'] }]}
series={[{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }]}
height={300}
barLabel="value"
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/bars/BarLabel.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<BarChart
xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
xAxis={[{ data: ['group A', 'group B', 'group C'] }]}
series={[{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }]}
height={300}
barLabel="value"
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/bars/BarsDataset.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function BarsDataset() {
return (
<BarChart
dataset={dataset}
xAxis={[{ scaleType: 'band', dataKey: 'month' }]}
xAxis={[{ dataKey: 'month' }]}
series={[
{ dataKey: 'london', label: 'London', valueFormatter },
{ dataKey: 'paris', label: 'Paris', valueFormatter },
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/bars/BarsDataset.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function BarsDataset() {
return (
<BarChart
dataset={dataset}
xAxis={[{ scaleType: 'band', dataKey: 'month' }]}
xAxis={[{ dataKey: 'month' }]}
series={[
{ dataKey: 'london', label: 'London', valueFormatter },
{ dataKey: 'paris', label: 'Paris', valueFormatter },
Expand Down
Loading