Chart Card

The chart card component displays chart visualisations, including details and meta data in a card view. The charts a switched between using tabs.

The component uses Chart.js to generate the visualisations

Open this example in a new window

HTML

Nunjucks

    <div class="dpr-chart-card">
      <div class="chart-tabs-container">
    
        <p class="govuk-body">No data
        <p>
    
        <div class="chart-tabs-details">
    
          <div id="dpr-[object Object]-tooltip-details" class="chart-tabs-details__item chart-tabs-details__item--tooltip">
            <h3 id="dpr-[object Object]-label" class="govuk-heading-s dpr-chart-details-label">init</h3>
            <p id="dpr-[object Object]-value" class="govuk-body dpr-chart-details-value">init</p>
          </div>
    
          <div id="dpr-[object Object]-headline-values" class="chart-tabs-details__item chart-tabs-details__item--headlines">
          </div>
    
          <div class="chart-tabs-details__item chart-tabs-details__item--meta">
          </div>
        </div>
    
      </div>
    </div>

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-card/view.njk" import dprChartCard -%}
    
    {{ dprChartCard({
        id: 'multi_chart-1',
        title: 'Finds Incidents',
        description: 'Total finds during this time period',
        type: ['bar', 'doughnut'],
        details: {
          headlines: [
            {
              label: 'Total',
              value: 51,
              legend: 'No. of Finds'
            }
          ],
          meta: [
            {
              label: 'Data for Period',
              value: '6th Aug 2024 - 6th Sept 2024'
            },
            {
              label: 'Source data refreshed',
              value: 'Friday, 6 September 2024'
            }
          ]
        },
        data: {
          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 view data using charts and want to include descriptions and meta data.