Chart.js
Chart.js copied to clipboard
Make an option for title and subtitle to resize proportionally when chart is responsive
Feature Proposal
It would be nice if the chart titles and subtitles could be made to resize proportionally instead of smushing in only he horizontal direction. The current behavior is not optimal at all in some cases.
Possible Implementation
See example below:
The top is what currently happens, the bottom is what I'm proposing as an option.
This might be possible via scriptable options. We'd just need to make sure the legend size is easily accessible from the function
You can update and move the legend position, change the font size, or even deactivate the legend dynamically by using onResize function (https://www.chartjs.org/docs/latest/configuration/responsive.html), this function passed two arguments which are Context and size.
So, we can use onResize function to mutating the option configuration (the documentation for this : (https://www.chartjs.org/docs/latest/developers/updates.html) . In that documentation example shows that you can use this function to mutating the option configuration :
function updateConfigByMutating(chart) {
chart.options.plugins.title.text = 'new title';
chart.update();
}
From here, we can utilize the query inside function updateConfigByMutating(chart) place it inside onResize method and set whatever screen size condition.