Chart Tabs

The chart card component displays chart visualisations that can be switched between using tabs

The component uses Chart.js to generate the visualisations

HTML

Nunjucks

    <p class="govuk-body">No data
    <p>

Nunjucks macro options

Name	Type	Required	Description
id	string	Yes	The chart ID
title	string	Yes	The chart title
description	string	no	The chart desciption
type	enum[]	Yes	The chart type. Valid values: `bar`, `line`, `doughnut`
details	object	No	Meta data about the chart. See Details
data	object	Yes	The data to create the visualisation. See Data

Data

Name	Type	Required	Description
chart	string	Yes	The chart data. See Chart
table	string	Yes	The table data. See gov.uk table component

Chart

Name	Type	Required	Description
labels	string[]	Yes	The chart labels
datasets	Array	Yes	The dataset for the visualisation. See Datasets

Datasets

Name	Type	Required	Description
label	string	Yes	The label for the dataset
data	number[]	Yes	The data for visualisation
total	number	No	The sum total of the data

Details

Name	Type	Required	Description
headlines	Array	Yes	Array of headlines. See Headline
meta	Array	Yes	Array of meta data. See Meta

Headline

Name	Type	Required	Description
label	string	Yes	The headline label
value	number	Yes	The headline value
legend	string	No	The legent value

Meta

Name	Type	Required	Description
label	string	Yes	The meta label
value	number	Yes	The meta value

    {%- from "dpr/components/_charts/chart-tabs/view.njk" import dprChartTabs -%}
    
    {{ dprChartTabs(
      'the-id', 
      ['bar', 'doughnut'], 
      {
        chart: {
          labels: ['Drugs', 'Phones', 'Weapons', 'Alcohol'],
          datasets: [
            {
              label: 'No. of finds',
              data: [12, 19, 3, 5],
              total: 39
            }
          ]
        },
        table: {
          head: [{ text: 'Colours' }, { text: 'No. of finds' }],
          rows: [
            [{ text: 'Drugs' }, { text: '12' }],
            [{ text: 'Phones' }, { text: '19' }],
            [{ text: 'Weapons' }, { text: '3' }],
            [{ text: 'Alcohol' }, { text: '5' }]
          ]
        }
      }
    ) }}

When to use

Use this component to use different chart types against the same dataset.