Doughnut Chart

Similar to a Pie Chart except for the hole, which is used to show data on hover. The Doughnut Chart does not use a key, so it makes better use of smaller spaces. The data should usually have a clear story behind it, so that it makes sense without a key.

Interactions

Hovering on a segment shows the core data in the centre of the doughnut. Clicking on a segment selects it for comparison - the data in the centre is frozen and the segment angle highlighted; the user can then hover on another segment for comparison.

If your data is quite crowded, the Pie Chart will group the smallest segments into an ‘other’ segment which, on click, will bloom to reveal all of the data.

Usage

The first column represents the names of the Segments; the second column represents the size of each segment.

Example

Options

The following data attributes are available for a Doughnut Chart.

data-fm-value-prefix

Adds a prefix to the values. For example, you may wish to add the ‘£’ symbol before each number

data-fm-value-suffix

Adds a suffix to each of your values. For example, you may wish to add the ‘$’ symbol after each number

data-fm-height

Enforces an explicit height. Expects a value with CCS syntax, e.g. "250px" (see sizing guide)

data-fm-width

Enforces an explicit width. Expects a value with CCS syntax, e.g. "800px" (see sizing guide)

data-fm-enable-spillover

If "true", the doughnut chart will draw some transient elements outside of its configured height and width (see layout guide)

Customizing colours

You can customize the colours for the sections of your doughnut chart. This is achieved by applying a data-fm-color attribute to the <tr> element that relates to the section you want to colour. The attribute will accept any valid CSS colour: