Background
Result of spike T369863. Charts currently can be any size. This creates problems on mobile where charts will scale to the size of the screen. We think it would be sensible going forward to support 2 chart sizes: full screen and floated (for elements on the side)
User story
As a reader I want to be able to consume charts regardless of screen size without having to open the SVG in a separate tab or switching to desktop mode.
Requirements
- Width and height options are defined
- Behavior at various breakpoints is defined
Design
We will provide two width options:
- Full - 100% of container width
- Partial - 512px max-width (then 100% of container width)
Legends should become horizontal and wrap on screens which force the chart to be less than 512px wide.
We will provide a height default of 448px. Height can be customized to a pixel amount, with a min-height of 256px and a max-height of 896px. For pie charts, which are square in nature, they should be centered within a full page width option, maxing out at the default height of 448px.
Open questions
Might someone want to display two charts side by side on larger screens?
This would be done as a part of the template and within page containers, not the charts themselves. Ideally, the full width option would fit inside side-by-side containers to make this work. We should test this in T375240: Limit size of charts to make sure this works as intended and responds gracefully down to smaller screens.
Acceptance criteria
- Two width options are provided: full and partial
- Responsive behavior is implemented
- Default height is set and made customizable with min and max defined