Govspeak content example

Negative charts

Charts can contain positive and negative values if the ‘mc-negative’ class is added to the table.

How it looks (preview)

Calorie Gain/Loss by Superhero
Hulk6000
Thor5000
Spiderman-2000
Iron ManNo data
Black Widow-1500

How to call this example

<%= render "govuk_publishing_components/components/govspeak", {} do %>
  <table class='js-barchart-table mc-auto-outdent mc-negative'>
  <caption>Calorie Gain/Loss by Superhero</caption>
  <tbody>
    <tr>
      <td>Hulk</td><td>6000</td>
    </tr>
    <tr>
      <td>Thor</td><td>5000</td>
    </tr>
    <tr>
      <td>Spiderman</td><td>-2000</td>
    </tr>
    <tr>
      <td>Iron Man</td><td>No data</td>
    </tr>
    <tr>
      <td>Black Widow</td><td>-1500</td>
    </tr>
  </tbody>
</table>
<% end %>