Skip to content

[docs] Improve bar chart demos on mobile #18721

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

Jump to bottom
Merged
merged 6 commits into from
Jul 8, 2025
Merged

[docs] Improve bar chart demos on mobile #18721

merged 6 commits into from
Jul 8, 2025

Conversation

alexfauquette
Copy link
Member

The Bar chart left margin is not that much of an issue on desktop. But on mobile it's a lot of lost space.

For example the stacking before/after

image
image

@alexfauquette alexfauquette added docs Improvements or additions to the documentation. scope: charts Changes related to the charts. labels Jul 7, 2025
@mui-bot
Copy link

mui-bot commented Jul 7, 2025 •
edited
Loading

Deploy preview: https://deploy-preview-18721--material-ui-x.netlify.app/

Bundle size report

Total Size Change: 0B(0.00%) - Total Gzip Change: 0B(0.00%)
Files: 122 total (0 added, 0 removed, 0 changed)

Show details for 100 more bundles (22 more not shown)

@mui/x-charts parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts-pro parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts-pro/BarChartPro parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts-pro/ChartContainerPro parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts-pro/ChartDataProviderPro parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts-pro/ChartsToolbarPro parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts-pro/ChartZoomSlider parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts-pro/FunnelChart parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts-pro/Heatmap parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts-pro/LineChartPro parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts-pro/PieChartPro parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts-pro/RadarChartPro parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts-pro/ScatterChartPro parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/BarChart parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartContainer parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartDataProvider parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsAxis parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsAxisHighlight parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsClipPath parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsGrid parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsLabel parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsLegend parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsLocalizationProvider parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsOverlay parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsReferenceLine parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsSurface parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsText parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsTooltip parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsXAxis parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsYAxis parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/Gauge parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/LineChart parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/PieChart parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/RadarChart parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ScatterChart parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/SparkLineChart parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/Toolbar parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-data-grid parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-data-grid-premium parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-data-grid-premium/DataGridPremium parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-data-grid-pro parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-data-grid-pro/DataGridPro parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-data-grid/DataGrid parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/AdapterDateFns parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/AdapterDateFnsJalali parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/AdapterDayjs parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/AdapterLuxon parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/AdapterMoment parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/AdapterMomentHijri parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/AdapterMomentJalaali parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/DateRangeCalendar parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/DateRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/DateRangePickerDay parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/DateRangePickerDay2 parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/DateTimeRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/DesktopDateRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/DesktopDateTimeRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/DesktopTimeRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/LocalizationProvider parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/MobileDateRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/MobileDateTimeRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/MobileTimeRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/MultiInputDateRangeField parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/MultiInputDateTimeRangeField parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/MultiInputTimeRangeField parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/PickersRangeCalendarHeader parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/SingleInputDateRangeField parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/SingleInputDateTimeRangeField parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/SingleInputTimeRangeField parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/StaticDateRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/TimeRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/AdapterDateFns parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/AdapterDateFnsBase parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/AdapterDateFnsJalali parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/AdapterDayjs parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/AdapterLuxon parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/AdapterMoment parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/AdapterMomentHijri parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/AdapterMomentJalaali parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/DateCalendar parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/DateField parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/DatePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/DateTimeField parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/DateTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/DayCalendarSkeleton parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/DesktopDatePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/DesktopDateTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/DesktopTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/DigitalClock parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/LocalizationProvider parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/MobileDatePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/MobileDateTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/MobileTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/MonthCalendar parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/MultiSectionDigitalClock parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/PickerDay2 parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/PickersActionBar parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/PickersCalendarHeader parsed: 0B(0.00%) gzip: 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 545a3c1

@codspeed-hq CodSpeed HQ
Copy link

codspeed-hq bot commented Jul 7, 2025 •
edited
Loading

CodSpeed Performance Report

Merging #18721 will degrade performances by 82.25%

Comparing alexfauquette:bar-chart-cleaning (545a3c1) with master (de05657)

Summary

❌ 5 regressions
✅ 2 untouched benchmarks
🆕 3 new benchmarks
⁉️ 2 dropped benchmarks

⚠️ Please fix the performance issues or acknowledge them on CodSpeed.

Benchmarks breakdown

Benchmark BASE HEAD Change
❌ BarChart with big data amount 391.3 ms 1,757.2 ms -77.73%
❌ BarChartPro with big data amount 592.6 ms 1,041.2 ms -43.08%
🆕 Area chart with big data amount (no marks) N/A 101.9 ms N/A
⁉️ LineChart with big data amount 221.9 ms N/A N/A
🆕 LineChart with big data amount (with marks) N/A 1.3 s N/A
⁉️ LineChartPro with big data amount 102 ms N/A N/A
🆕 LineChartPro with big data amount and zoomed in (with marks) N/A 389 ms N/A
❌ ScatterChart with big data amount 470.7 ms 773.7 ms -39.16%
❌ ScatterChartPro with big data amount 69.6 ms 392.4 ms -82.25%
❌ ScatterChartPro with big data amount and zoomed in 57.1 ms 64.4 ms -11.3%

@alexfauquette alexfauquette merged commit 9bea939 into mui:master Jul 8, 2025
22 of 23 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@JCQuintas JCQuintas JCQuintas approved these changes

Assignees
No one assigned
Labels
docs Improvements or additions to the documentation. scope: charts Changes related to the charts.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@alexfauquette @mui-bot @JCQuintas