Chart

The chart card component displays a chart visualisation

The component uses Chart.js to generate the visualisations

Open this example in a new window

Contents

    <div id="the-chart-id-chart-wrapper" class="dpr-chart dpr-bar-chart" data-dpr-module="bar-chart" data-dpr-chart-data="{
      &quot;labels&quot;: [
        &quot;Drugs&quot;,
        &quot;Phones&quot;,
        &quot;Weapons&quot;,
        &quot;Alcohol&quot;
      ],
      &quot;datasets&quot;: [
        {
          &quot;label&quot;: &quot;No. of finds&quot;,
          &quot;data&quot;: [
            12,
            19,
            3,
            5
          ],
          &quot;total&quot;: 39
        }
      ]
    }" data-dpr-chart-type="bar" data-dpr-chart-unit="" data-dpr-chart-timeseries="">
      <div class="dpr-canvas-wrapper"><canvas id="the-chart-id" class="chart-canvas"></canvas></div>
      <div id="js-legend-the-chart-id" class="dpr-chart-legend"></div>
    </div>
    

Nunjucks macro options

Name	Type	Required	Description
id	string	Yes	The chart ID
type	string	Yes	The chart type. Valid values: bar, line, doughnut
data	object	Yes	The data to create the visualisation. See Chart

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

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

When to use

Use this component to use a chart to visualise a dataset.