Chart.js icon indicating copy to clipboard operation
Chart.js copied to clipboard

Dynamic text resize is not supported

Open saqibmbhatti opened this issue 1 year ago • 3 comments

Feature Proposal

We're using chart JS and accessibility testing team has raised a defect that the the chart content (Axes labels, tooltips, legends etc.) do not respond if the text is resized using Settings > Appearance > Font Size which makes the chart fail WCAG success criteria 1.4.4

https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html

I've created a quick example here: https://codepen.io/saqibmbhatti/pen/BaEeXQX

Having this feature would improve the accessibility of the overall library.

Your kind consideration to add this feature would be much appreciated.

Possible Implementation

No response

saqibmbhatti avatar May 09 '24 08:05 saqibmbhatti

All the text can be configured by the font's parameter in the config of the specific part that you want to change, in here you can increase/decrease the font size yourself. So you can comply to the spec

LeeLenaleee avatar May 10 '24 07:05 LeeLenaleee

Many thanks for your reply. Are you able to provide an example for it?

saqibmbhatti avatar May 10 '24 07:05 saqibmbhatti

https://www.chartjs.org/docs/4.4.0/general/fonts.html

This shows how to configure the font size for the legend labels, when you detect that the font size in windows has been changed you adjust options.plugins.legend.labels.size = newFontSize and then call chartVariable.update().

LeeLenaleee avatar May 10 '24 07:05 LeeLenaleee