In 400% Zoom mode, the Chart/Graphs present in the screen are getting overlapped in Windows.

[msftedad]

Expected behavior

In 400% Zoom mode, the Chart/Graphs should not get overlapped and all the lines should be clearly visible as in normal mode.

Current behavior

In 400% Zoom mode, the Chart/Graphs present in the screen are getting overlapped in Windows. The lines present in the graph are overlapped.

In.Reflow.mode.the.Graphs.present.in.the.screen.are.getting.overlapped.in.Windows.1.mp4

Reproducible sample

https://www.chartjs.org/docs/latest/samples/area/line-datasets.html

Optional extra steps/info to reproduce

Pre-requisites:
System Settings-> Display->Scale to 100%-> Resolution to 1280X1024
Zoom the browser to 400%

Repro steps:

1. Open URL: Line Chart Datasets | Chart.js in Edge browser.
2. Line charts Dataset page appears.
3. Apply reflow settings mentioned in the prerequisites.
4. Verify after applying reflow settings, the Chart/Graphs present in the screen are getting overlapped or not.

Possible solution

No response

Context

Users relying on 400% zoom for better readability, such as individuals with low vision, will face difficulties understanding the content of charts/graphs due to overlapping elements.

chart.js version

V4.4.7

Browser name and version

Edge Browser 131.0.2903.112 (Official build) (64-bit)

Link to your project

https://www.chartjs.org/docs/latest/samples/area/line-datasets.html

[LeeLenaleee]

This is not a bug.

There is just not enough space for the chart to render all the precision. So you will need to either disable the legend to give the chart area a bit more space (even then it wont be a lot of precision) or increase the size of the canvas when the user uses zoom

[msftedad]

Hi @LeeLenaleee, Thanks for the update. We have closed our issue.