Chart (experimental) example

With a different height

Sets a height in pixels for the chart, defaulting to 400. This is useful where the chart might appear in a narrow column and the default height would be too tall.

The component is not currently responsive.

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
View data as a table
Data table for "Page views"
January 2015 January 2016
1st 5 3
2nd 119 8
3rd 74 37
4th 117 82
5th 33 118
6th 89 85
7th 79 80

How to call this example

<%= render "govuk_publishing_components/components/chart", {
  heading: "Page views",
  h_axis_title: "Day",
  v_axis_title: "Views",
  description: "This is a graph of views per day",
  height: 200,
  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
      ]
    }
  ]
} %>