Pie Chart

The Pie Chart represents data relatively, as proportional slices of the pie.

Interactions

Hovering on a segment shows a tooltip with the core data. Clicking on a segment selects it for comparison - all of it’s data is shown where the key would normally be and the user can 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.

If you put data in columns 3+ it will show up in the key area when a user clicks on a segment.

Example

Options

The following data attributes are available for a Pie 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-max-key-entries

Specifies a maximum number of entries to display in the key

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 pie 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 pie 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 hex codes and RGB colour values, but not colour names: