Set chart widths dynamically

[greg-does-weather]

Description

In the first implementation of our charts, they are fixed at the width of their containers and all of the available data is smooshed into the charts. For charts showing longer periods of time, this can make the chart difficult to read.

Instead of fixing the chart's width to its container, we would like to dynamically determine the chart's width based on two factors:

• an explicit width for the hours on the X axis
• the number of hours being displayed

The chart container should clip the horizontal part of the container that extends beyond the container itself, and the container should support scrolling. Scrolling will also be accompanied by scroll buttons similar to the hourly details table.

The width of a single hour on the X axis should be variable based on which screen width break points we're currently in, and per type of chart. As a result, when the screen crosses break point thresholds, the chart width needs to be recomputed and the chart needs to be redrawn accordingly.

Chart type	mobile	tablet	desktop
line
bar

Acceptance criteria

• [ ] Charts are sized appropriately according to the descriptions above
• [ ] Changes have been tested for accessibility

[greg-does-weather]

tbd: we'll figure out what the widths should be and fill those in