[charts] Exported image shows black/empty regions when browser zoom is less than 100% (devicePixelRatio rounding error)

[jackyyang-maker]

Steps to reproduce

Steps:

1. Open the provided CodeSandbox link.
2. click "open in a new tab" icon at top right
3. Set your browser zoom level to 80% (Ctrl + '-' on Windows, Cmd + '-' on Mac).
4. Click the Export button on the chart.
5. Select "Export as PNG".
6. Open the downloaded image and observe the black/empty area at the bottom or right side of the chart.

Current behavior

The exported image is incorrectly truncated, as shown in the attached screenshot.

When the browser zoom is set to 80%, the rendering engine appears to miscalculate the content boundaries. Instead of capturing the full chart, the resulting image is clipped on the right and bottom sides.

Truncation Issue: The chart content is cut off prematurely, leaving a large empty/white space where the rest of the chart should be.

Scale Inconsistency: This suggests that the internal rasterization process (converting HTML/SVG to Canvas) is using a mismatched coordinate system or an incorrect bounding box calculation when window.devicePixelRatio is not an integer.

Expected behavior

The export logic should handle the devicePixelRatio scaling correctly so that the captured canvas matches the actual element dimensions perfectly, regardless of the browser's zoom level.

Context

No response

Your environment

System:
OS: Windows 11 10.0.26200
Binaries:
Node: 22.14.0 - C:\nvm4w\nodejs\node.EXE
npm: 10.9.2 - C:\nvm4w\nodejs\npm.CMD
pnpm: 10.30.3 - C:\Users\Uanalyze\AppData\Roaming\npm\pnpm.CMD
Browsers:
Chrome: 145.0.7632.160
Edge: Chromium (140.0.3485.54)
npmPackages:
@emotion/react: 11.14.0 => 11.14.0
@emotion/styled: 11.14.0 => 11.14.0
@mui/core-downloads-tracker: 7.3.6
@mui/icons-material: 7.1.1 => 7.1.1
@mui/material: 7.1.1 => 7.1.1
@mui/material-nextjs: 7.1.1 => 7.1.1
@mui/private-theming: 7.3.6
@mui/styled-engine: 7.3.6
@mui/system: 7.3.6
@mui/types: 7.4.9
@mui/utils: 7.3.6
@mui/x-charts: ^8.27.4 => 8.27.4
@mui/x-charts-pro: ^8.27.4 => 8.27.4
@mui/x-charts-vendor: 8.26.0
@mui/x-data-grid: 8.5.2 => 8.5.2
@mui/x-date-pickers: 8.5.1 => 8.5.1
@mui/x-date-pickers-pro: 8.5.1 => 8.5.1
@mui/x-internal-gestures: 0.4.0
@mui/x-internals: 8.26.0
@mui/x-license: ^8.14.0 => 8.26.0
@mui/x-telemetry: 8.20.0
@mui/x-tree-view: 8.5.1 => 8.5.1
@types/react: 19 => 19.2.7
react: ^19.2.3 => 19.2.3
react-dom: ^19.2.3 => 19.2.3
typescript: 5.8.3 => 5.8.3

Search keywords: chart, export, devicePixelRatio

Order ID: 120174

[linear]

X-4651

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

---

@jackyyang-maker Thanks again for creating this issue! If you have a moment, we would love to hear your thoughts on how we handled it with this short feedback form.