Govspeak content example

Charts

The Government Statistical Service (GSS) guidance recommends a limit of four categories as best practice for basic data visualisations.

Note that charts which have up to 7 categories, chart with colours, for example, will display subsequent bars in #3d3d3d, #a285d1 and the 7th bar in the default colour of #0b0c0c and will still meet the colour contrast requirements for adjacent colours. Charts that have 8 or more categories will display additional bars in the default colour and will not meet colour contrast requirements for adjacent colours.

How it looks (preview)

A table with numerical data

row 1	10
row 2	15
row 3	2
row 4	48

How to call this example

<%= render "govuk_publishing_components/components/govspeak", {} do %>
  <table class='js-barchart-table mc-auto-outdent'>
  <caption>A table with numerical data</caption>
  <tbody>
    <tr>
      <td>row 1</td><td>10</td>
    </tr>
    <tr>
      <td>row 2</td><td>15</td>
    </tr>
    <tr>
      <td>row 3</td><td>2</td>
    </tr>
    <tr>
      <td>row 4</td><td>48</td>
    </tr>
  </tbody>
</table>
<% end %>