Chart (experimental) example

With margin bottom

The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale. It defaults to having a bottom margin of 15px.

How it looks (preview)

Page views chart

This chart is a visual representation of the data available in the table.

Data table

	1st	2nd	3rd	4th	5th	6th	7th
January 2015	5	119	74	117	33	89	79
January 2016	3	8	37	82	118	85	80

How to call this example

<%= render "govuk_publishing_components/components/chart", {
  chart_heading: "Page views chart",
  h_axis_title: "Day",
  v_axis_title: "Views",
  margin_bottom: 9,
  keys: [
    "1st",
    "2nd",
    "3rd",
    "4th",
    "5th",
    "6th",
    "7th"
  ],
  rows: [
    {
      label: "January 2015",
      values: [
        5,
        119,
        74,
        117,
        33,
        89,
        79
      ]
    },
    {
      label: "January 2016",
      values: [
        3,
        8,
        37,
        82,
        118,
        85,
        80
      ]
    }
  ]
} %>