1. Component Guide
  2. Govspeak content
  3. Chart with colours
Govspeak content example

Chart with colours

How it looks (preview)

Number position Apples Oranges Bananas Pears Grapes Strawberries Plums Apricots Pineapples
Numbers inside bar 16 48 39 50 24 10 62 29 81
Numbers outside bar 2 1 2 1 1 3 3 1 2

How to call this example

<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <table class="js-barchart-table mc-auto-outdent">
  <thead>
    <tr>
      <th scope="col">Number position</th>
      <th scope="col">Apples</th>
      <th scope="col">Oranges</th>
      <th scope="col">Bananas</th>
      <th scope="col">Pears</th>
      <th scope="col">Grapes</th>
      <th scope="col">Strawberries</th>
      <th scope="col">Plums</th>
      <th scope="col">Apricots</th>
      <th scope="col">Pineapples</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Numbers inside bar</td>
      <td>16</td>
      <td>48</td>
      <td>39</td>
      <td>50</td>
      <td>24</td>
      <td>10</td>
      <td>62</td>
      <td>29</td>
      <td>81</td>
    </tr>
    <tr>
      <td>Numbers outside bar</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>1</td>
      <td>3</td>
      <td>3</td>
      <td>1</td>
      <td>2</td>
    </tr>
  </tbody>
</table>
<% end %>