[charts] Fix bar border radius on Firefox #18824

bernardobelchior · 2025-07-16T10:25:01Z

Fixes #14690.

Fix bar border radius on Firefox.

Testing

Visual Test

Animation (10x slowdown)

Chrome:

Screen.Recording.2025-07-16.at.14.57.05.mov

Firefox:

Screen.Recording.2025-07-16.at.14.57.36.mov

Safari:

Screen.Recording.2025-07-16.at.14.58.03.mov

mui-bot · 2025-07-16T10:26:59Z

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

Bundle size report

Total Size Change: 🔺+2.36KB^(+0.02%) - Total Gzip Change: 🔺+485B^(+0.01%)
Files: 122 total (0 added, 0 removed, 31 changed)

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

@mui/x-charts/SparkLineChart parsed: 🔺+474B^(+0.22%) gzip: 🔺+111B^(+0.17%)
@mui/x-charts-pro/BarChartPro parsed: 🔺+473B^(+0.17%) gzip: 🔺+100B^(+0.11%)
@mui/x-charts/BarChart parsed: 🔺+473B^(+0.22%) gzip: 🔺+124B^(+0.19%)
@mui/x-charts parsed: 🔺+472B^(+0.15%) gzip: 🔺+107B^(+0.12%)
@mui/x-charts-pro parsed: 🔺+472B^(+0.12%) gzip: 🔺+115B^(+0.10%)
@mui/x-charts-pro/ChartContainerPro parsed: 0B^(0.00%) gzip: ▼-3B^(-0.01%)
@mui/x-charts-pro/ChartDataProviderPro parsed: 0B^(0.00%) gzip: ▼-2B^(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: ▼-2B^(0.00%)
@mui/x-charts-pro/Heatmap parsed: 0B^(0.00%) gzip: ▼-2B^(0.00%)
@mui/x-charts-pro/LineChartPro parsed: 0B^(0.00%) gzip: ▼-2B^(0.00%)
@mui/x-charts-pro/PieChartPro parsed: 0B^(0.00%) gzip: ▼-2B^(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: ▼-3B^(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/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: ▼-2B^(0.00%)
@mui/x-data-grid-premium/DataGridPremium parsed: 0B^(0.00%) gzip: ▼-4B^(0.00%)
@mui/x-data-grid-pro parsed: 0B^(0.00%) gzip: ▼-2B^(0.00%)
@mui/x-data-grid-pro/DataGridPro parsed: 0B^(0.00%) gzip: ▼-2B^(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: ▼-4B^(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: ▼-2B^(-0.01%)
@mui/x-date-pickers-pro/DateRangePicker parsed: 0B^(0.00%) gzip: ▼-5B^(-0.01%)
@mui/x-date-pickers-pro/DateRangePickerDay parsed: 0B^(0.00%) gzip: ▼-1B^(-0.01%)
@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: ▼-4B^(-0.01%)
@mui/x-date-pickers-pro/DesktopDateRangePicker parsed: 0B^(0.00%) gzip: ▼-4B^(-0.01%)
@mui/x-date-pickers-pro/DesktopDateTimeRangePicker parsed: 0B^(0.00%) gzip: ▼-4B^(-0.01%)
@mui/x-date-pickers-pro/DesktopTimeRangePicker parsed: 0B^(0.00%) gzip: ▼-4B^(-0.01%)
@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: ▼-4B^(-0.01%)
@mui/x-date-pickers-pro/MobileDateTimeRangePicker parsed: 0B^(0.00%) gzip: ▼-4B^(-0.01%)
@mui/x-date-pickers-pro/MobileTimeRangePicker parsed: 0B^(0.00%) gzip: ▼-2B^(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: ▼-2B^(-0.01%)
@mui/x-date-pickers-pro/TimeRangePicker parsed: 0B^(0.00%) gzip: ▼-2B^(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 8ad3e4b

codspeed-hq · 2025-07-16T13:43:28Z

CodSpeed Performance Report

Merging #18824 will not alter performance

_{Comparing bernardobelchior:fix-bar-border-radius-firefox (8ad3e4b) with master (dfe85de)}

Summary

✅ 10 untouched benchmarks

bernardobelchior · 2025-07-21T09:36:25Z

packages/x-charts/src/BarChart/BarClipPath.tsx

    </clipPath>
  );
 }

+function generateClipPath(


The main logic is here:

JCQuintas

Nice, the animation looks better too 👍

I just want to point out that this is "technically" a breaking change if users were previously targeting the clip rect somehow to customise it (eg: uneven border radius), though it is very very unlikely, so I'm ok with going forward with this 😆

bernardobelchior added 5 commits July 15, 2025 12:59

[charts] Fix bar border radius on Firefox

ccca759

Different attempt

1498f01

Fix vertical border radius

c159a81

Fix horizontal

ded461c

Fix remaining cases. Add visual test.

ff2bbbb

bernardobelchior force-pushed the fix-bar-border-radius-firefox branch from fba4a1e to ff2bbbb Compare July 16, 2025 10:25

bernardobelchior added 5 commits July 16, 2025 14:16

Fix animation

f771ab4

Fix animation starting point

fade0c9

Fix black line in Safari

eed2a67

Fix Safari issue without rounding

c890901

Gen static

8ad3e4b

bernardobelchior marked this pull request as ready for review July 16, 2025 13:27

bernardobelchior requested review from alexfauquette and JCQuintas as code owners July 16, 2025 13:27

bernardobelchior added type: bug It doesn't behave as expected. scope: charts Changes related to the charts. labels Jul 16, 2025

bernardobelchior commented Jul 21, 2025

View reviewed changes

packages/x-charts/src/BarChart/BarClipPath.tsx

</clipPath>

);

}

function generateClipPath(

Copy link

Member Author

bernardobelchior Jul 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The main logic is here:

JCQuintas approved these changes Jul 21, 2025

View reviewed changes

bernardobelchior merged commit 8f216d3 into mui:master Jul 21, 2025
27 checks passed

bernardobelchior deleted the fix-bar-border-radius-firefox branch July 21, 2025 12:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

[charts] Fix bar border radius on Firefox #18824

[charts] Fix bar border radius on Firefox #18824

bernardobelchior commented Jul 16, 2025 •

edited

Loading

Uh oh!

mui-bot commented Jul 16, 2025 •

edited

Loading

Uh oh!

codspeed-hq bot commented Jul 16, 2025

Uh oh!

bernardobelchior Jul 21, 2025

Uh oh!

JCQuintas left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

[charts] Fix bar border radius on Firefox #18824

[charts] Fix bar border radius on Firefox #18824

Conversation

bernardobelchior commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Testing

Visual Test

Animation (10x slowdown)

Uh oh!

mui-bot commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

codspeed-hq bot commented Jul 16, 2025

CodSpeed Performance Report

Merging #18824 will not alter performance

Summary

Uh oh!

bernardobelchior Jul 21, 2025

Choose a reason for hiding this comment

Uh oh!

JCQuintas left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

bernardobelchior commented Jul 16, 2025 •

edited

Loading

mui-bot commented Jul 16, 2025 •

edited

Loading