Skip to content

Chart shrinking excessively when browser zoom not set to 100% #10890

@SG214

Description

@SG214

Expected behavior

Chart should shrink appropriately during initial load or browser resize.

Current behavior

Chart either shrinks to nothing, then re-appears, or excessively shrinks then eventually stops.
Behaviour is inconsistent between page loads.

Reproducible sample

https://www.chartjs.org/docs/latest/charts/line.html

Optional extra steps/info to reproduce

Using Chrome desktop browser, set browser zoom to 110% and open the line chart example.

Reload the page to check chart behaviour on each page load.
Chart will either resize slightly, resize excessively, or shrink to nothing and then re-appear in a continuous loop.

Setting browser zoom to 125% seems to avoid "shrink to nothing", but still shrinks excessively on some page loads, and not others. Setting to 90% also has unpredictable results. 200% seems reasonably stable.

Resize browser window when zoom level other than 100% to see similar behaviour.

Possible solution

Seems to be related to retina/high Device Pixel Ratio chart responsiveness handling, perhaps related to the issue mentioned here.

Context

Setting browser zoom > 100% also increases device pixel ratio to a value above 1 on desktop browser.

chart.js version

v4.0.1

Browser name and version

Linux Chrome 106.0.5249.103

Link to your project

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions