Component

Chart (experimental)

The chart component presents a data chart and a tabular version of the same data

This component takes a set of data and presents it as a line graph and a table with one or more rows and lines. The chart relies upon chartkick and renders using JavaScript, so the table is provided as a fallback for a lack of JavaScript, an accessible view on the data for screenreaders, and a simple view of the raw data for all users.

Search for usage of this component on GitHub.

Overview

How it looks (preview) (preview all)

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 component

<%= 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
      ]
    }
  ]
} %>

Accessibility acceptance criteria

Charts must:

  • use line colours with a contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA
  • contain a heading and description so that skip links and semantics are accurate

Links must:

  • accept focus
  • be focusable with a keyboard
  • be usable with a keyboard
  • indicate when they have focus
  • change in appearance when touched (in the touch-down state)
  • change in appearance when hovered
  • be usable with touch
  • be usable with voice commands
  • have visible text
  • have meaningful text

Other examples

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

See all standard options
  • id - accepts a string for the element ID attribute
  • data_attributes - accepts a hash of data attributes
  • aria - accepts a hash of aria attributes
  • classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
  • margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale
  • role - accepts a space separated string of roles
  • lang - accepts a language attribute value
  • open - accepts an open attribute value (true or false)
  • hidden - accepts an empty string, ‘hidden’, or ‘until-found’
  • tabindex - accepts an integer. The integer can also be passed as a string
  • dir - accepts ‘rtl’, ‘ltr’, or ‘auto’
  • type - accepts any valid type attribute e.g. ‘button’, ‘submit’, ‘text’
  • rel - accepts any valid rel attribute e.g. ‘nofollow’
  • target - accepts a valid target attribute e.g. ‘_blank’
  • title - accepts any string
  • draggable - accepts a draggable attribute value (“true” or “false”)

Multiple rows of data (preview)

Where more than one series is shown on a chart, hide_legend will not work.

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 5 5 31
2nd 119 8 81
3rd 74 37 12
4th 82 50 15
5th 27 43 52
6th 45 29 61
7th 11 67 143
8th 21 61 27
9th 67 14 18
10th 43 91 34 
<%= render "govuk_publishing_components/components/chart", {
  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",
    "4th",
    "5th",
    "6th",
    "7th",
    "8th",
    "9th",
    "10th"
  ],
  rows: [
    {
      label: "January 2015",
      values: [
        5,
        119,
        74,
        82,
        27,
        45,
        11,
        21,
        67,
        43
      ]
    },
    {
      label: "January 2016",
      values: [
        5,
        8,
        37,
        50,
        43,
        29,
        67,
        61,
        14,
        91
      ]
    },
    {
      label: "January 2017",
      values: [
        31,
        81,
        12,
        15,
        52,
        61,
        143,
        27,
        18,
        34
      ]
    }
  ]
} %>

Hide legend (preview)

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

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 
<%= 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
      ]
    }
  ]
} %>

With line colours and styles (preview)

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”).

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 
<%= 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
      ]
    }
  ]
} %>

Bar chart (preview)

Hats owned

This chart shows page views for January 2015.

This chart is a visual representation of the data available in the table.
Skip to "Hats owned" data table
View data as a table
Data table for "Hats owned"
Hats owned
Jon 3
Ash 1
James 1
Phil 2 
<%= render "govuk_publishing_components/components/chart", {
  chart_type: "bar",
  heading: "Hats owned",
  h_axis_title: "Day",
  v_axis_title: "Views",
  description: "This chart shows page views for January 2015.",
  hide_legend: true,
  keys: [
    "Jon",
    "Ash",
    "James",
    "Phil"
  ],
  rows: [
    {
      label: "Hats owned",
      values: [
        3,
        1,
        1,
        2
      ]
    }
  ]
} %>

Column chart (preview)

Hats owned

This chart shows page views for January 2015.

This chart is a visual representation of the data available in the table.
Skip to "Hats owned" data table
View data as a table
Data table for "Hats owned"
Hats owned
Jon 3
Ash 1
James 1
Phil 2 
<%= render "govuk_publishing_components/components/chart", {
  chart_type: "column",
  heading: "Hats owned",
  h_axis_title: "Day",
  v_axis_title: "Views",
  description: "This chart shows page views for January 2015.",
  hide_legend: true,
  keys: [
    "Jon",
    "Ash",
    "James",
    "Phil"
  ],
  rows: [
    {
      label: "Hats owned",
      values: [
        3,
        1,
        1,
        2
      ]
    }
  ]
} %>

Format axis labels (preview)

Axis labels can be forced into date or currency format as shown.

‘currency’ will add a currency symbol (£) at the start of the labels.

‘percent’ will add a percent (%) to the end of the labels.

‘date’ will force a standard date format of YYYY-MM-DD to the labels, where they are in an undesirable date format. This can be useful if there are a lot of labels on the axes because the chart can do strange truncation sometimes.

Cost per day

This chart shows cost per day.

This chart is a visual representation of the data available in the table.
Skip to "Cost per day" data table
View data as a table
Data table for "Cost per day"
Cost
2024 Jan 1 14
2024 Jan 2 29
2024 Jan 3 45
2024 Jan 4 63
2024 Jan 5 54
2024 Jan 6 22 
<%= render "govuk_publishing_components/components/chart", {
  v_axis_format: "currency",
  h_axis_format: "date",
  heading: "Cost per day",
  h_axis_title: "Day",
  v_axis_title: "Cost",
  description: "This chart shows cost per day.",
  keys: [
    "2024 Jan 1",
    "2024 Jan 2",
    "2024 Jan 3",
    "2024 Jan 4",
    "2024 Jan 5",
    "2024 Jan 6"
  ],
  rows: [
    {
      label: "Cost",
      values: [
        14,
        29,
        45,
        63,
        54,
        22
      ]
    }
  ]
} %>

Horizontal table (preview)

Reorient the table to better suit the output of some data sets.

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 4th 5th 6th 7th
January 2015 5 119 74 117 33 89 79
January 2016 3 8 37 82 118 85 80 
<%= render "govuk_publishing_components/components/chart", {
  table_direction: "horizontal",
  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",
    "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
      ]
    }
  ]
} %>

Scale y axis based on data (preview)

By default the Y-axis will always start at zero, but this may not always be required.

If there are empty items in the data the chart line will either discontinue or leave a gap, as shown.

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 1,500
2015-01-02 1,190
2015-01-03 1,740
2015-01-04 1,820
2015-01-05 1,270
2015-01-06
2015-01-07
2015-01-08 1,450
2015-01-09 1,110
2015-01-10 1,210
2015-01-11 1,670
2015-01-12 1,430
2015-01-13 1,352 
<%= render "govuk_publishing_components/components/chart", {
  y_axis_auto_adjust: true,
  heading: "Page views chart",
  h_axis_title: "Day",
  v_axis_title: "Views",
  description: "This chart shows page views for January 2015.",
  hide_legend: true,
  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",
    "2015-01-11",
    "2015-01-12",
    "2015-01-13"
  ],
  rows: [
    {
      label: "January 2015",
      values: [
        1500,
        1190,
        1740,
        1820,
        1270,
        null,
        null,
        1450,
        1110,
        1210,
        1670,
        1430,
        1352
      ]
    }
  ]
} %>

With a different heading level (preview)

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

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
1st 5 3
2nd 119 8
3rd 74 37
4th 117 82
5th 33 118
6th 89 85
7th 79 80 
<%= render "govuk_publishing_components/components/chart", {
  heading_level: 4,
  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",
    "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
      ]
    }
  ]
} %>

With a different height (preview)

Sets a height in pixels for the chart, defaulting to 400. This is useful where the chart might appear in a narrow column and the default height would be too tall.

The component is not currently responsive.

Page views

This is a graph of views per day

This chart is a visual representation of the data available in the table.
Skip to "Page views" data table
View data as a table
Data table for "Page views"
January 2015 January 2016
1st 5 3
2nd 119 8
3rd 74 37
4th 117 82
5th 33 118
6th 89 85
7th 79 80 
<%= render "govuk_publishing_components/components/chart", {
  heading: "Page views",
  h_axis_title: "Day",
  v_axis_title: "Views",
  description: "This is a graph of views per day",
  height: 200,
  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
      ]
    }
  ]
} %>