Skip to contentSkip to footer
Give feedbackv3.0.2

Charts

Charts are created using Highcharts, which are very well documented on their website. The examples on this page show colouring and label use.

Column charts

<script>
	$(function () {
		var chart = new Highcharts.Chart({
			// Make sure to include this string of brand colours
			colors: ['#f8a980', '#ffbf47', '#b9db9b', '#a5bddc', '#b5afd7', '#81cec6', '#f499be', '#e76568', '#87c3d0'],
			chart: {
				type: 'column',
				renderTo: 'column-chart',
				backgroundColor:'rgba(255,255,255,0)'
			},
			title: {
				text: 'Column chart'
			},
			xAxis: {
				categories: ['Person 1', 'Person 2']
			},
			yAxis: {
				title:
				{
					text: '£ GBP'
				}
			},
			tooltip: {
				formatter: function () {
					return this.series.name + ': <b>£' + this.y + '</b>';
				}
			},
			credits: {
				enabled: false
			},
			series: [{
				name: 'Income',
				data: [250, 450]
			},
					{
				name: 'Spending',
				data: [450, 350]
			},
			{
				name: 'Saving',
				data: [150, 75]
			}],
			navigation: {
				buttonOptions: {
					enabled: false
				}
			}
		});
	});
</script>
<div id="column-chart"></div>

Pie charts

<script>
	$(function () {
		var chart = new Highcharts.Chart({
			// Make sure to include this string of brand colours
			colors: ['#f8a980', '#ffbf47', '#b9db9b', '#a5bddc', '#b5afd7', '#81cec6', '#f499be', '#e76568', '#87c3d0'],
			chart: {
				type: 'pie',
				renderTo: 'pie-chart',
				backgroundColor:'rgba(255,255,255,0)'
			},
			title: {
				text: 'Pie chart'
			},
			tooltip: {
				formatter: function () {
					return this.point.name + ': <b>£' + this.y + '</b>';
				}
			},
			plotOptions: {
				pie: {
					allowPointSelect: false,
					cursor: 'pointer',
					showInLegend: false
				}
			},
			credits: {
				enabled: false
			},
			series: [{
				name: 'Income',
				colorByPoint: true,
				data: [{
					name: 'Source 1',
					y: 144
				}, {
					name: 'Source 2',
					y: 59
				}, {
					name: 'Source 3',
					y: 210
				}, {
					name: 'Source 4',
					y: 64
				}, {
					name: 'Source 5',
					y: 102
				}, {
					name: 'Source 6',
					y: 88
				}, {
					name: 'Source 7',
					y: 31
				}, {
					name: 'Source 8',
					y: 75
				}, {
					name: 'Source 9',
					y: 163
				}],
				dataLabels: {
					formatter: function () {
						return this.point.name + ' £' + this.y;
					}
				}
			}],
			navigation: {
				buttonOptions: {
					enabled: false
				}
			}
		});
	});
</script>
<div id="pie-chart"></div>