Chart (experimental) example

With line colours and styles

Note that this only works on line charts. Supported line style options are solid or dotted. Supported colours are CSS colour names (e.g. red, turquoise) and CSS hex codes (e.g. “#FF0000”).

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"
January 2015 January 2016 January 2017
1st 110 71 21
2nd 119 68 42
3rd 105 75 18

How to call this example

<%= render "govuk_publishing_components/components/chart", {
  line_colours: [
    "orange",
    "blue",
    "#88AA11"
  ],
  line_styles: [
    "solid",
    "dotted",
    "solid"
  ],
  heading: "Page views chart",
  h_axis_title: "Day",
  v_axis_title: "Views",
  description: "This chart shows page views for January in different years.",
  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
      ]
    }
  ]
} %>