Skip to main content
Elastic UI
Elastic UI
ComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Elastic Charts as a design system
  • Dashboard good practices
  • Accessibility features
  • Types
    • Categorical
    • Metric chart
    • Time series
    • Part to whole comparisons
  • Sizing
  • Theming
  • EUI
  • Types
  • Part to whole comparisons
@elastic/charts v68.0.2

Part to whole comparisons

Pie and donut charts

A common argument is made that pie charts are not usually the best representation for understanding data. However there are situations where pie charts are useful. Like when:

  • There are a maximum of 6 slices (divisions)
  • The values are around 25%, 50% or 75%
  • One of the categories is much bigger than the others

The guidelines for

donut charts are the same for pie charts. The empty center of donut charts can provide a place to display additional/related information.

Loading...

Slices and labelling

Try to keep the labels within the slices (or just outside) and consider appending their values. However, if there are many small slices or long labels, use a legend, especially one that displays the values in a table format with right aligned values.

Other slices

Again, pie charts should have no more than six slices. However, it can be beneficial to group smaller/overflow slices into a single “Other” category. Careful consideration should be given when doing so as this could end up being the largest category and therefore obscuring the meaning of the chart.

Slice order

The order of the slices should always start from the 12 o’clock position, showing the largest slice in the clockwise position then the rest ordering counterclockwise in descending order. However, categories that have a natural order, should follow this natural order, be it low to high or good to bad.

Sunbursts and treemaps

Multi-level pie charts (also known as sunbursts) and treemaps are great for visualizing hierarchical relationships and for quickly referencing the overall data comparison. However, they’re not meant to represent trends or explicit/detailed value comparison.

Below are some basic examples and how EUI supports them with theming. However, this site will not document the best uses of these chart types. For more guidance, go to the Elastic Charts documentation.

Loading...

Alternatives

Most pie/donut/sunburst chart data can be better explained using bar charts with different configurations. You should definitely not use pie charts when:

  • You want users to compare the size of slices
  • You have more than 6 slices
  • You need multiple pie charts to compare multiple data sets, use part-to-whole bar charts with percentages
  • You have negative values

And under no circumstances should you enlarge or explode slices. This leads to errors in understanding.

Edit this page

Previous
Time series
Next
Sizing
  • Pie and donut charts
    • Slices and labelling
  • Sunbursts and treemaps
  • Alternatives
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic