Charts

Visual charts to help display data content

Overview

We use charts to visually display data. There are a range of chart types and colour palettes to choose from.

Example

Bar chart

Young drivers by district (sample data)

Pie chart

Casualties by class (sample data)

Donut chart

Casualties by class (sample data)

Stacked bar chart

Child casualties by age and class (sample data)
WCMS use
MVC.net use

 

Code

HTML of above bar chart

<dd class="selectables">
                
                        <figure class="row">
            <figcaption class="twelve columns add-bottom">Young casualties</figcaption>
            <div class="">
                <canvas class="chart"
                        id="chart_9c36cf3a-26d2-43b4-9997-cae8efa09b4b"
                        width="400"
                        height="400"
                        data-value-chart-type="bar"
                        data-value-pre=""
                        data-value-post=""
                        data-chart-values="'labels':['Basingstoke','East Hants','Eastleigh','Fareham','Gosport','Hart','Havant','New Forest','Rushmoor','Test Valley','Winchester'],'datasets':[{'data':[40,47,47,35,20,34,35,56,32,40,45],'fillColor':'#BDCA77','highlightFill':'#c59dc3','label':'Casualties'}]"></canvas>
            </div>
        </figure>
Version and status
  • 1
  • current version
  • Concept
  • Alpha
  • Beta
  • Release