Donut

Donut charts show the proportional composition of an item.

Donut

Guidelines

Use When

  • Showing how an item is composed of various parts, with all the parts totaling 100%.
Do use a Donut chart when showing how an item is composed of various parts, with all the parts totaling 100%.
Don‘t use a Vertical Bar or Horizontal Bar chart when showing how an item is composed of various parts, with all the parts totaling 100%.

Don′t Use When

  • Representing the composition of an individual item that features both positive and negative values, that may or may not total 100%. Instead, use a Horizontal Bar chart.
Do use a Horizontal Bar chart when representing the composition of an item that features both positive and negative values.
Don‘t use a Donut chart when representing the composition of an item that features both positive and negative values.

Visual Language

Responsiveness

  • Donut charts will resize to fill the available space. Avoid using them at widths below 200px and heights below 150px.
  • Donut charts retain their aspect ratio regardless of the width of their container, flexing their size fluidly to become larger or smaller. The legend exists in a separate container, donut-legend-container, allowing teams to determine their own responsive behavior.

Editorial

  • Strive for short, succinct axis labels and legend items that clearly describe the data.

Code Reference

Necessary code documentation can be found in the MBC repository.

©2019 Morningstar, Inc. All rights reserved. Terms of Use