search

chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag
https://www.chartjs.org/
MIT License
64.38k stars 11.89k forks source link

Toggle doughnut vs. label resizing #11429

Open oliver-j-holmes opened 1 year ago

oliver-j-holmes commented 1 year ago

Feature Proposal

Suggestion

There seems to be an opportunity to improve the behaviour of doughnut/pie charts, specifically related to the resizing of the doughnut/pie when the number of labels increases. This is most evident when two doughnut/pie charts are drawn side-by-side on equally sized canvases, with an unequal number of labels.

The default behaviour is to shrink the doughnut/pie in order to accommodate more labels. An alternative behaviour could be to shrink the labels in order to preserve the doughnut/pie size. I believe the second behaviour more closely aligns with user expectation, and saves time resizing elements outside of the library.

Context

11425 shows that users are still running into unintuitive behaviours when two doughnuts with equal size canvases have a different number of labels. Users probably expect that the labels should shrink instead of the doughnut itself.

3458 seemed to suggest that maintainers prefer users to do the resizing outside of the library: https://github.com/chartjs/Chart.js/issues/3458#issuecomment-798746316

4982 seems to also have been resolved without changing the sizing behaviour.

Possible Implementation

No response

LeeLenaleee commented 1 year ago

In my opinion an html legend would be a better solution for this. As @etimberg already pointed out in the comment you linked

oliver-j-holmes commented 1 year ago

In my opinion an html legend would be a better solution for this. As @etimberg already pointed out in the comment you linked

Thanks for the feedback.

From the context in the quoted comment, I inferred the hesitation was more due to the request to allow the chart to draw beyond the canvas area, which I believe is different to the suggestion in this issue.

Html legends are definitely a way to achieve the same visual effect but requires updating a html legend and chart labels separately, which seems extraneous.

LeeLenaleee commented 1 year ago

You can use a plugin that automatically updates the html legend instead of needing to do it yourself https://www.chartjs.org/docs/3.7.1/samples/legend/html.html

oliver-j-holmes commented 1 year ago

You can use a plugin that automatically updates the html legend instead of needing to do it yourself https://www.chartjs.org/docs/3.7.1/samples/legend/html.html

You're correct, it can definitely be done through html legend elements and plugins are evidently are a nice way to accomplish this. However, I'm not sure the existence of a workaround precludes enhancements to how the labels are sized on the canvas itself.