Govspeak content example

Chart with colours

How it looks (preview)

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

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>
    </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>
    </tr>
    <tr>
      <td>Numbers outside bar</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>1</td>
      <td>2</td>
      <td>1</td>
    </tr>
  </tbody>
</table>
<% end %>