Govspeak content example

Stacked chart

How it looks (preview)

Colours	Fruits	Vegetables	Beans	Nuts	Total
Red	23	9	2	1	35
Green	5	33	8	0	46
Yellow	2	10	0	15	27

How to call this example

<%= render "govuk_publishing_components/components/govspeak", {} do %>
  <table class="js-barchart-table mc-stacked mc-auto-outdent">
  <thead>
    <tr>
      <th scope="col">Colours</th>
      <th scope="col">Fruits</th>
      <th scope="col">Vegetables</th>
      <th scope="col">Beans</th>
      <th scope="col">Nuts</th>
      <th scope="col">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Red</td>
      <td>23</td>
      <td>9</td>
      <td>2</td>
      <td>1</td>
      <td>35</td>
    </tr>
    <tr>
      <td>Green</td>
      <td>5</td>
      <td>33</td>
      <td>8</td>
      <td>0</td>
      <td>46</td>
    </tr>
    <tr>
      <td>Yellow</td>
      <td>2</td>
      <td>10</td>
      <td>0</td>
      <td>15</td>
      <td>27</td>
    </tr>
  </tbody>
</table>
<% end %>