Product Name

Donut

Donut charts show the proportional composition of an item.

Donut Chart

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%.
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 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 <a href="/charts/horizontal-bar.html" class="mds-link">Horizontal Bar chart</a> when representing the composition of an item that features both positive and negative values.
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.
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 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.

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