Doughnut charts

Notes for developers

Setting values for the chart

For the single segment chart, a percentage amount is required and should be specified in the data-amount attribute; this only needs to be the numeric value (the % symbol is not required). The same figure should also be entered as plain text in the m-doughnut-chart-summary__number element, this time with the % symbol included.

<div class="m-doughnut-chart" data-module="m-doughnut-chart" data-amount="67" data-color="accent-dark-5">

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--multisegment" data-module="m-doughnut-chart" data-amount="67,153,32,396,256" >

Setting the colour of the chart segments

For the single segment charts, the default colour for the segment is #1a61bd (accent light blue). The segment colour can be changed to any colour in the Framework accent colour palette described on the style guide colour page by adding the data-color attribute with the appropriate colour name (using a dash instead of a space), for example data-color="accent-dark-5". For Abeille Assurances themes only, Abeille Assurances Yellow ('accent-light-5') and Abeille Assurances Blue ('aviva-blue') are available to use as segment colours.

In addition, a m-chart-summary__bullet--[ Modifier ] class should be used on the list item for the bullet point in the chart summary so that the bullet colour matches the segment colour, for example, m-chart-summary__bullet--accent-dark-5 if the data-color attribute is set to 'accent-dark-5'.

For the multi-segment chart, the colours used for the segments are preset for accessibility reasons and can not be overridden.

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 doughnut 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.

To use legacy theme colours, call the setSettings function from the m-doughnut-chart element with a JavaScript object containing the following:

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

For the single segment chart a fallback image of the chart should be made available is possible. If this is not possible to generate basic fallback image is located at /assets/themes-icons/[ icon library version ]/[ organisation ]/[ theme name ]/placeholder/doughnut-static.svg.

For the multi-segment chart, 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.

• Doughnut 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" />

---

Notes for testers

• For single segment chart ensure that a fallback image is specified and that, if it is not the default, it matches the colour and percentage as on the JavaScript-enabled version.

---

Classes overview

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