I am adding some charts to my website which will get viewed on various different devices and screen sizes.
Generally the default aspect ratio of 2:1 works great, but on smaller mobile screens like iPhone, the chart title, legend, and axis labels are larger relative to the grid and this warps the aspect ratio such that 2:1 creates a grid that is squashed horizontally.
I'm able to work around it by using an aspect ratio of 1.5, but I think it would be ideal if I could lock the ratio of the just the grid (since that's what defines the look/shape/readability of the graph itself) and then have the peripheral text fill in around that, potentially calculating a different final aspect ratio for the overall canvas.
Possible Implementation
From an API perspective, I could imagine surfacing this through a new option gridAspectRatio (or a better name) which is incompatible with aspectRatio. Alternatively, there could be an enum option which determines how aspectRatio is interpreted.
Internally, I imagine that Chart.js already knows how to calculate the size of the legend/title/labels and that this is taken into account when ultimately sizing the grid against the provided aspect ratio. If this is the case, then it should be possible to instead inform the canvas aspect ratio based on the grid's size + the peripherals.
Feature Proposal
I am adding some charts to my website which will get viewed on various different devices and screen sizes.
Generally the default aspect ratio of 2:1 works great, but on smaller mobile screens like iPhone, the chart title, legend, and axis labels are larger relative to the grid and this warps the aspect ratio such that 2:1 creates a grid that is squashed horizontally.
I'm able to work around it by using an aspect ratio of 1.5, but I think it would be ideal if I could lock the ratio of the just the grid (since that's what defines the look/shape/readability of the graph itself) and then have the peripheral text fill in around that, potentially calculating a different final aspect ratio for the overall canvas.
Possible Implementation
From an API perspective, I could imagine surfacing this through a new option
gridAspectRatio(or a better name) which is incompatible withaspectRatio. Alternatively, there could be an enum option which determines howaspectRatiois interpreted.Internally, I imagine that Chart.js already knows how to calculate the size of the legend/title/labels and that this is taken into account when ultimately sizing the grid against the provided aspect ratio. If this is the case, then it should be possible to instead inform the canvas aspect ratio based on the grid's size + the peripherals.