chartjs / chartjs/Chart.js

Add ability to lock aspect ratio of the grid, ignoring title and labels

Open
#11,783 1 comment 2 reactions 0 assignees View on GitHub
type: enhancement
Dominant language
JavaScript
Stars
67.7k
Forks
11.9k
Avg merge
7h 39m
Merged PRs (30d)
5

Description

### 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 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.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.