Chart (experimental) example

Default

How it looks (preview)

Chart showing page views on the website in January 2015

This chart shows page views for January 2015.

This chart is a visual representation of the data available in the table.
Skip to "Chart showing page views on the website in January 2015" data table

Source: GOV.UK

View data as a table
Data table for "Chart showing page views on the website in January 2015"
January 2015
2015-01-01 500
2015-01-02 1,190
2015-01-03 740
2015-01-04 820
2015-01-05 270
2015-01-06 450
2015-01-07 110
2015-01-08 210
2015-01-09 670
2015-01-10 430

How to call this example

<%= render "govuk_publishing_components/components/chart", {
  heading: "Chart showing page views on the website in January 2015",
  h_axis_title: "Day",
  v_axis_title: "Views",
  description: "This chart shows page views for January 2015.",
  source: "GOV.UK",
  keys: [
    "2015-01-01",
    "2015-01-02",
    "2015-01-03",
    "2015-01-04",
    "2015-01-05",
    "2015-01-06",
    "2015-01-07",
    "2015-01-08",
    "2015-01-09",
    "2015-01-10"
  ],
  rows: [
    {
      label: "January 2015",
      values: [
        500,
        1190,
        740,
        820,
        270,
        450,
        110,
        210,
        670,
        430
      ]
    }
  ]
} %>