Posted by & filed under Data Visualization.

PatternFly defines the use case for using the Donut Chart for utilization or progress. However, we also need to address the use case of showing the relationship of a set of values to a whole using the donut chart.

This blog post addresses the initial concepts and approaches for the Donut Chart – Relationship of a Set of Values to a Whole. Some of the outstanding questions I have about this pattern are related to where this documentation should live on the site. If you were looking for this type of donut chart, how would you expect to find it? Would you navigate to:

  1. A page called “Donut Chart” and expect to see all the use cases for a donut chart in one place.
  2. A page that addressed the specific use case of the relationship of a set of values to a whole. This may include other visualizations in addition to the donut chart.
  3. A page called “Donut Chart – Relationship of a Set of Values to a Whole” meaning each donut chart would have its own page.
  4. Other?

Please leave comments in the blog about how you would expect to navigate to this pattern as well as any other comments that you might have about the current direction.




  1. Donut Chart Fill:
    • Interaction (optional):
      • If drill down behavior is supported, clicking on an item will navigate to the appropriate page.
      • If supporting, right clicking on an item will bring up a menu with associated actions.
    • Color: For recommendations on fill colors, see the Color Palette.
  2. Total value: The total value is shown in the middle of the donut chart.
  3. Label or Icon (optional): When the donut chart is a part of a dashboard tile, there is a label defining what the donut chart represents. The label may be shown in the inside or outside of the donut chart.
  4. Set of Values: It is recommended to show the set of values on the donut chart. This may be shown:
    • On the chart
    • In the legend
  5. Tooltip: We recommend that the name and value or percentage are displayed on hover.
  6. Legend: It is recommended to include a legend to define the colors on the chart. Optionally, you may opt to make the legend interactive meaning that you could toggle the visibility of the series in the chart. On the bar chart, there are a couple of locations for the legend:
    • Left aligned and centered underneath the chart.
    • Left aligned and to the right of the chart.

One Response to “Donut Chart – Relationship of a Set of Values to a Whole”

  1. Have you considered calling this something other than donut chart? Maybe something like summation chart? And then maybe there could be the chart shape: donut. That leaves open the option to also include a bar style chart in the future and possibly more. I think of the use case of the chart first before the shape.


Leave a Reply

(will not be published)