Chart (experimental) example

With line colours and styles

Note that line styles and colours currently only work on line charts.

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
View data as a table
Data table for "Page views chart"
1st 2nd 3rd
January 2015 110 119 105
January 2016 71 68 75
January 2017 21 42 18

How to call this example

<%= render "govuk_publishing_components/components/chart", {
  chart_heading: "Page views chart",
  h_axis_title: "Day",
  v_axis_title: "Views",
  chart_overview: "This chart shows page views for January in different years.",
  line_colours: [
    "orange",
    "blue",
    "#88AA11"
  ],
  line_styles: [
    "solid",
    "dotted",
    "solid"
  ],
  keys: [
    "1st",
    "2nd",
    "3rd"
  ],
  rows: [
    {
      label: "January 2015",
      values: [
        110,
        119,
        105
      ]
    },
    {
      label: "January 2016",
      values: [
        71,
        68,
        75
      ]
    },
    {
      label: "January 2017",
      values: [
        21,
        42,
        18
      ]
    }
  ]
} %>