Pie charts

Notes for developers

Setting values for the chart

For the multi-segment chart, a list of comma separated numbers must be specified in the data-amount attribute. The values do not need to be percentages.

<div class="m-doughnut-chart m-doughnut-chart--pie m-doughnut-chart--multisegment" data-module="m-doughnut-chart" data-amount="67,153,32,396,256" >

Multi-segment charts with highlight segments

To use highlight segments, set up a standard multi-segment chart, with the addition of a data-color attribute. Within this, list out each segment as either 'on' (coloured) or 'off' (background colour); for example, to highlight the second segment in a three-segment chart, the attribute would read: data-color="off,on,off"; to highlight the third and fourth segments of a five segment chart, the attribute would read: data-color="off,off,on,on,off". In addition, a m-chart-summary__bullet--segment[ Modifier ] class should be used on the list item for the bullet point in the chart summary so that the bullet colour matches the highlighted segment colour, for example, m-chart-summary__bullet--segment2 if highlighting the second segment.

Extending the config

The default settings for the pie chart can be extended to change the colours available to themes. Note that the colours selected must meet accessibility standards.

For more information on this, see how to extend component configurations within JavaScript and what options are available for change.

document.addEventListener( 'frameworkready', function () {
	FRAMEWORK.require([ 'blocks/m-doughnut-chart' ], function ( mDoughnutChartModule ) {
		var mDoughnutChartEl = document.querySelector( '#chart' ),
			mDoughnutChartInstance = mDoughnutChartModule.initInstance( mDoughnutChartEl );		mDoughnutChartInstance.setSettings({
			accentSegmentColors : {
				'accent-dark-1' : '#1a61bd', // Light blue
				'accent-dark-2' : '#001647', // Dark blue
				'accent-dark-3' : '#0e573f', // Dark green
				'accent-dark-4' : '#87378e', // Light purple
				'accent-dark-5' : '#421b67', // Dark purple
				'accent-dark-6' : '#c01b83', // Pink
				'accent-dark-7' : '#00788a', // Teal
				'accent-dark-8' : '#413e45', // Dark grey
			}
		});
	});
});

Updating chart values after load

It is possible to update the values displayed by a particular chart after initial load. To do this, the function setSettings should be called from the m-doughnut-chart element with a JavaScript object containing settings in the same format as below being passed into the function:

For example:

document.addEventListener( 'frameworkready', function () {
	FRAMEWORK.require([ 'blocks/m-doughnut-chart' ], function ( mDoughnutChartModule ) {
		var mDoughnutChartEl = document.querySelector( '#chart' ),
			mDoughnutChartInstance = mDoughnutChartModule.initInstance( mDoughnutChartEl );			mDoughnutChartInstance.setSettings({
				'amount' : '10,15,20,25,30',
		});
	});
});

Note: The key associated with the chart will not be updated, this function only redraws the chart itself.

Non-JavaScript fallback

If no image fallback is available, only the key should be shown; in this instance, add the .o-chart--no-image to the main .o-chart div to ensure font sizes are scaled up accordingly to meet design requirements. If no fallback image is supplied ensure no whitespace,comments etc are included within the m-doughnut-chart element to maintain correct styling.

• Pie charts must not be used on dark accent colours.

Extension component

This component forms part of the 'charts' extension and so requires an additional stylesheet to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheet:

<link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/charts.css" rel="stylesheet" />

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.