Skip to content

docs: Add note about flexbox/grid layout responsivity issue #12134

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

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

docs: Add note about flexbox/grid layout responsivity issue #12134

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3612fad
note added to docs for proper responsive sizing when the chart parent…
DavidAshburn Sep 24, 2023
17ad1da
revert style changes
DrWarpMan Oct 14, 2025
2c22497
improve docs
DrWarpMan Oct 14, 2025
c415f67
dev
DrWarpMan Oct 14, 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
15 changes: 14 additions & 1 deletion docs/configuration/responsive.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,19 @@ chart.canvas.parentNode.style.width = '128px';

Note that in order for the above code to correctly resize the chart height, the [`maintainAspectRatio`](#configuration-options) option must also be set to `false`.

## Flexbox / Grid Layout

To prevent overflow issues when using flexbox / grid layout, you must set the flex / grid child element to have a `min-width` of `0`.
See [issue 4156](https://github.com/chartjs/Chart.js/issues/4156#issuecomment-295180128) for more details.

```html
<div class="grid-container" style="display: grid">
<div class="chart-container" style="min-width: 0">
<canvas id="chart"></canvas>
</div>
</div>
```

## Printing Resizable Charts

CSS media queries allow changing styles when printing a page. The CSS applied from these media queries may cause charts to need to resize. However, the resize won't happen automatically. To support resizing charts when printing, you need to hook the [onbeforeprint](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint) event and manually trigger resizing of each chart.
Expand All @@ -62,4 +75,4 @@ window.addEventListener('beforeprint', () => {
window.addEventListener('afterprint', () => {
myChart.resize();
});
```
```