Responsive chart margins

[charlesons]

As an further iteration towards responsive charts that display well on mobile devices make an experimental implementation of responsive chart margins.

• [ ] Use a resize observer to capture the parent container's width

• [ ] Calculate the margins as a proportion of the margins as specified at full page width based on the fraction of the current container width with respect to the full page width.

[charlesons]

Analysed the options and documented implementation recommendations. To be discussed with team to decide the best approach to take.

https://github.com/GSS-Cogs/chart-builder/wiki/Responsive-charts

[charlesons]

Moving to sprint backlog until team have agreed the best approach to take.

[TahaRana97]

Put some time in the diary to discuss next steps

[charlesons]

Added to agenda for discussion at the DD-CMS design meeting on 04/07/2022 at 14.30

[charlesons]

The issue of optimising the amount of space taken up by the margins of charts and figure blocks has now been resolved by changes in the figure design and in the best practice applied to creating charts.

1. The latest figure block design no longer has a shaded background which in turn means there's no need to create left and right padding for that background to look balanced. The net result is more space for chart display.

2. In terms of best practice in creating charts we are encouraging authors to keep the left and right margins as small as possible whilst retaining clear readability of the Y axis label. For most charts in the Climate Change 2 portal a left margin of 50px is sufficient to keep the Y axis label separated from the Y axis tick labels. The net result is more space for chart series to be plotted - and a better overall appearance on mobile.

With the above points in mind we are closing this issue, but are aware that further improvements are possible in the general goal of creating responsive charts.