Chart (experimental) example

With a different heading level

Use a different heading level for the chart heading. It defaults to a H2.

How it looks (preview)

Page views chart

This chart shows page views for January in different years.
This chart is a visual representation of the data available in the table.
Skip to "Page views chart" data table
Data table
Data table for "Page views chart"
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",
  chart_heading_level: 4,
  h_axis_title: "Day",
  v_axis_title: "Views",
  chart_overview: "This chart shows page views for January in different years.",
  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
      ]
    }
  ]
} %>