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

Make an option for title and subtitle to resize proportionally when chart is responsive

Open methnen opened this issue 2 years ago • 2 comments

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:

Line Chart Chart.js

The top is what currently happens, the bottom is what I'm proposing as an option.

methnen avatar Feb 15 '22 20:02 methnen

This might be possible via scriptable options. We'd just need to make sure the legend size is easily accessible from the function

etimberg avatar Feb 15 '22 20:02 etimberg

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.

riancintiyo avatar Apr 28 '22 09:04 riancintiyo