Responsive charts - GSS-Cogs/chart-builder GitHub Wiki

Fundamentals

  • Charts with large numbers of visual elements are always going to be challenging to display on small viewports. Some factors that can increase the number of visual elements are:

    • Large number of series
    • Large number of x axis points (e.g. points in time or categories)
    • Long axis labels or tick labels

  • We have configured Plotly to work in responsive mode which gives us the following behaviours:

    • Chart dimensions adjust to changes in the container dimensions
    • The number/density of axis ticks and labels adjusts to changes in the chart's size
    • Legend content will overflow to occupy multiple lines where there is not enough space

  • Plotly is not able to do the following responsively:

    • Reduce the number of series shown
    • Reduce the density of data points shown
    • Prevent the legend from overlaying other visual elements like the x axis label
    • Adjust the chart margins to change in proportion to changes in dimension

  • The figure block (where we typically contain charts in DD-CMS) has left and right margins of 32px and padding 24px which do not currently reduce at small viewports.

  • We have experimented with setting responsive chart height (in a locked aspect ratio with chart width) but found some issues with the legend overlaying the x axis label. Presently chart height is user specified

Solutions

Two complimentary solutions to the responsive charts in DD-CMS are as follows:

  1. The author designs charts with small viewports as priority. What works on a small viewport will typically scale effectively up to larger viewports. To achieve this the default chart preview could be set to show in a mobile viewport

  2. A progressive enhancement approach whereby a Figure block is able to take two items and will render the one most appropriate to the viewport:

    • a chart, sparkline or image to display on small viewports (all smartphones)
    • a fullsize responsive chart to display on larger viewports (tablet and above)

Option 1 is a simpler process for the author and would work well for simpler charts (short time series, one or two series to show, no long axis or tick labels, etc. )

Option 2 would be best for more complex charts for which a simplified alternative would be clearer for mobile users

The example chart below was created using chrome dev tools to show it in a mobile viewport. The result displays well on mobile.

image

Other optimisations

The figure block padding/margins could be made responsive to increase the available space at small viewports.

image