Chart (experimental) example

With padding

Moves the heading and items beneath the chart inwards. Useful where the chart is contained in an element where these items would otherwise touch the sides.

How it looks (preview)

Page views

This is a graph of views per day
This chart is a visual representation of the data available in the table.
Skip to "Page views" data table
Data table
Data table for "Page views"
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

Download chart data

How to call this example

<%= render "govuk_publishing_components/components/chart", {
  chart_heading: "Page views",
  h_axis_title: "Day",
  v_axis_title: "Views",
  padding: true,
  link: "https://www.gov.uk",
  chart_overview: "This is a graph of views per day",
  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
      ]
    }
  ]
} %>