Chart (pie)

Pie charts are used to show percentage-based data. Data is shown in segments of different colours, with the sum total equalling 100%.

Legend placement variants

The side-by-side version positions the legend to the side of the pie chart. This version is used when horizontal space isn’t an issue, for example, on wide viewports like desktops.

The stacked version positions the explanation below the pie chart. Best use when horizontal space is restricted, for example, on a narrow viewport like a mobile or when the pie chart is displayed within a card or a narrow column.

Pie chart with legend below

Pie chart with legend below

Pie chart with side-by-side legend

Pie chart with side-by-side legend

 

Mini pie chart

The Mini Pie chart can be used to conserve space in appropriate situations, for example in tables or cards. Unlike the regular Pie chart, they only display one single value and have no gaps or open ends.