Chart (experimental) example

Hide legend

This will only work when there is only one row of data.

How it looks (preview)

Page views chart

This chart shows page views for January 2015.

This chart is a visual representation of the data available in the table.
Skip to "Page views chart" data table
View data as a table
Data table for "Page views chart"
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", {
  hide_legend: true,
  heading: "Page views chart",
  h_axis_title: "Day",
  v_axis_title: "Views",
  description: "This chart shows page views for January 2015.",
  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
      ]
    }
  ]
} %>