Donut Chart

Donut Chart

The most common use case for a Donut Chart are:

  • Show progress completion as a percentage.
  • Show utilization for an object as a percentage.
  • Show the relationship of a set of values to a whole.

Jump to Utilization, Relationship of a Set of Values to a Whole or Small Donut Chart

Utilization

When using a Donut Chart to show utilization, the entire donut should add up to 100% and the fill represents a percentage of that. You can show that a threshold has been reach by using red, orange or green colors. Otherwise, use the blue color when thresholds are not present. Consider using the Utilization Bar Chart to show utilization in more limited spaces.

donut-chart-example-1

Relationship of a Set of Values to a Whole

When using a Donut Chart to show the relationship of a set of values to a whole, the pieces must add up to 100% and there should be no more than six categories. Sections within a Donut Chart may be hard to compare to each other so you should use a Donut Chart when you want to compare an individual section to the whole. Consider using a Bar Chart if you would like to compare one category to another.

donut-chart-example-1

Small Donut Chart

#donut-chart-example-3

Donut Chart

Utilization

#donut-chart-callout-1

  1. Donut Chart Fill: - The background color is grey (#d1d1d1) - The fill starts at 12 o’clock and moves clockwise. The fill color depends on the thresholds.
    • When no thresholds exist the indicator is blue (#0088ce).
    • When a threshold exists and the percentage has not surpassed any thresholds, the indicator is green (#3f9c35).
    • When the utilization percentage has surpassed the warning threshold, but not the error threshold, the indicator is orange (#ec7a08)
    • When the utilization percentage has surpassed the error threshold, the indicator is is red (#cc0000).
  2. Label or Icon (optional): - When the Donut Chart is a part of a dashboard tile, there is a label in the center of the chart. - The label may be omitted or replaced by an icon if the chart is used in an object blade or card. - The label in the center of the chart should show one of the following:
    • The used value in a large font size followed by “ Used” on a second row.
    • The available value in a large font size followed by “ Available” on a second row.
    • The current percentage in a large font size followed by a “of ” on a second row.

  3. Tooltip (optional): When the Donut Chart is used to represent utilization, the percentage is displayed in a tooltip on hover.

  4. Warning Threshold Indicator (optional): If a warning threshold exists, that may be visually indicated on the chart. 75% is the typical default value for a warning threshold but some products may have configurable thresholds (design not currently shown, visuals are still TBD).

  5. Error Threshold Indicator (optional): If an error threshold exists, that may be visually indicated on the chart. 90% is the typical default value for an error threshold but some products may have configurable thresholds (design not currently shown, visuals are still TBD).

Relationship of a Set of Values to a Whole

#donut-chart-callout-2

  1. Donut Chart Fill: - Interaction (optional):
    • If drill down behavior is supported, clicking on a segment of the donut will navigate to the appropriate page.
    • If supported, right clicking on a segment of the Donut Chart will bring up a menu with associated actions.
    • Color: For recommendations on fill colors, see the Color Palette.

  2. Label or Icon: When the Donut Chart is contained within a dashboard card, there is a label defining what the Donut Chart represents. The label may be shown either inside or outside of the Donut Chart.

  3. Total Value (optional): The total value of the data set may be shown in the center of the Donut Chart. It should be represented as a [total numeric value] + [data set label], for example: “8 Animals.” The label may wrap to a second line if necessary. If the information does not fit in the center of the doughnut, do not resize or otherwise modify the presentation. In that case leave the center empty and consider presenting the data in either the chart labels, a title, or tooltips.

  4. Set of Values (optional): It is recommended to show the values for each piece of the Donut Chart using the legend and in a tooltip on hover.

  5. Tooltip (optional): We recommend that the name and value are displayed on hover.

  6. Legend: - It is recommended to include a legend to show values and define the colors on the 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
  7. Interactive Legend (optional): Clicking on a series in the legend should toggle the visibility of the series in the chart.

PatternFly Core Example


Jump to Utilization, Relationship of a Set of Values to a Whole or Small Donut Chart

Utilization

60 MHz of 100 MHz used
60 MHz of 100 MHz used
60 MHz of 100 MHz
60 MHz of 100 MHz used
60 MHz of 100 MHz used
60 MHz of 100 MHz

Reference Markup

<script src="components/c3/c3.min.js"></script>
<script src="components/d3/d3.min.js"></script>
<div id="donut-chart-31" class="example-donut-chart-utilization"></div>

<div class="pct-donut-chart-pf example-donut-chart-utilization">
  <div class="pct-donut-chart-pf-chart">
    <div id="donut-chart-32"></div>
  </div>
  <span class="pct-donut-chart-pf-label">
    60 MHz of 100 MHz used
  </span>
</div>

<div class="example-donut-chart-utilization">
  <span class="pct-donut-chart-pf pct-donut-chart-pf-left">
    <div class="pct-donut-chart-pf-chart">
      <div id="donut-chart-33"></div>
    </div>
    <span class="pct-donut-chart-pf-label text-right">
      60 MHz of 100 MHz used
    </span>
  </span>
</div>

<div class="example-donut-chart-utilization">
  <span class="pct-donut-chart-pf pct-donut-chart-pf-right">
    <div class="pct-donut-chart-pf-chart">
      <div id="donut-chart-34"></div>
    </div>
    <span class="pct-donut-chart-pf-label text-left">
      60 MHz of 100 MHz
    </span>
  </span>
</div>

<script>
  var c3ChartDefaults = $().c3ChartDefaults();

  // Donut configuration 1
  var donutConfig1 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig1.bindto = '#donut-chart-31';
  donutConfig1.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40],
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig1.size = {
    width: 180,
    height: 180
  };

  donutConfig1.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig1);
  $().pfSetDonutChartTitle("#donut-chart-31", "60", "MHz Used");

  // Donut configuration 2
  var donutConfig2 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig2.bindto = '#donut-chart-32';
  donutConfig2.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig2.size = {
    width: 180,
    height: 180
  };

  donutConfig2.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig2);
  $().pfSetDonutChartTitle("#donut-chart-32", "60", "MHz Used");

  // Donut configuration 3
  var donutConfig3 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig3.bindto = '#donut-chart-33';
  donutConfig3.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig3.size = {
    width: 140,
    height: 140
  };

  donutConfig3.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig3);
  $().pfSetDonutChartTitle("#donut-chart-33", "60", "MHz Used");

  // Donut configuration 4
  var donutConfig4 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig4.bindto = '#donut-chart-34';
  donutConfig4.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig4.size = {
    width: 140,
    height: 140
  };

  donutConfig4.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig4);
  $().pfSetDonutChartTitle("#donut-chart-34", "60", "MHz Used");
</script>

Relationship of a Set of Values to a Whole

Reference Markup

<script src="components/c3/c3.min.js"></script>
<script src="components/d3/d3.min.js"></script>
<div id="donut-chart-51" class="example-donut-chart"></div>
<div id="donut-chart-52" class="example-donut-chart-right-legend"></div>
<div id="donut-chart-53" class="example-donut-chart-bottom-legend"></div>
<script>
  var c3ChartDefaults = $().c3ChartDefaults();

  var donutData = {
    type : 'donut',
    columns: [
      ['Dogs', 2],
      ['Cats', 2],
      ['Fish', 3],
      ['Hamsters', 1]
    ],
    onclick: function (d, i) { console.log("onclick", d, i); },
    onmouseover: function (d, i) { console.log("onmouseover", d, i); },
    onmouseout: function (d, i) { console.log("onmouseout", d, i); }
  };

  // Donut Chart without Legend
  var donutChartConfig = c3ChartDefaults.getDefaultRelationshipDonutConfig();
  donutChartConfig.bindto = '#donut-chart-51';
  donutChartConfig.tooltip = {show: true};
  donutChartConfig.data = donutData;
  donutChartConfig.size = {
    width: 200,
    height: 171
  };
  donutChartConfig.tooltip = {
    contents: $().pfDonutTooltipContents
  };

  var donutChartNoLegend = c3.generate(donutChartConfig);
  $().pfSetDonutChartTitle("#donut-chart-51", "8", "Animals");

  // Right Legend
  var donutChartRightConfig = c3ChartDefaults.getDefaultRelationshipDonutConfig();
  donutChartRightConfig.bindto = '#donut-chart-52';
  donutChartRightConfig.tooltip = {show: true};
  donutChartRightConfig.data = donutData;
  donutChartRightConfig.legend = {
    show: true,
    position: 'right'
  };
  donutChartRightConfig.size = {
    width: 251,
    height: 161
  };
  donutChartRightConfig.tooltip = {
    contents: $().pfDonutTooltipContents
  };

  var donutChartRightLegend = c3.generate(donutChartRightConfig);
  $().pfSetDonutChartTitle("#donut-chart-52", "8", "Animals");

  // Donut Chart Bottom Legend
  var donutChartBottomConfig = c3ChartDefaults.getDefaultRelationshipDonutConfig();
  donutChartBottomConfig.bindto = '#donut-chart-53';
  donutChartBottomConfig.tooltip = {show: true};
  donutChartBottomConfig.data = donutData;
  donutChartBottomConfig.legend = {
    show: true,
    position: 'bottom'
  };
  donutChartBottomConfig.size = {
    width: 271,
    height: 191
  };
  donutChartBottomConfig.tooltip = {
    contents: $().pfDonutTooltipContents
  };

  var donutChartBottomLegend = c3.generate(donutChartBottomConfig);
  $().pfSetDonutChartTitle("#donut-chart-53", "8", "Animals");
</script>

Small Donut Chart

Animals

Reference Markup

<script src="components/c3/c3.min.js"></script>
<script src="components/d3/d3.min.js"></script>
<div id="donut-chart-7" class="donut-chart-pf example-donut-chart-mini"></div>
<div style="text-align: center; width: 220px;">Animals</div>
<script>
  var c3ChartDefaults = $().c3ChartDefaults();

  var donutData = {
    type : 'donut',
    columns: [
      ['Dogs', 2],
      ['Cats', 2],
      ['Fish', 3],
      ['Hamsters', 1]
    ],
    onclick: function (d, i) { console.log("onclick", d, i); },
    onmouseover: function (d, i) { console.log("onmouseover", d, i); },
    onmouseout: function (d, i) { console.log("onmouseout", d, i); }
  };

  // Small Donut Chart
  var donutChartSmallConfig = c3ChartDefaults.getDefaultRelationshipDonutConfig('8');
  donutChartSmallConfig.bindto = '#donut-chart-7';
  donutChartSmallConfig.tooltip = {show: true};
  donutChartSmallConfig.data = donutData;
  donutChartSmallConfig.legend = {
    show: true,
    position: 'right'
  };
  donutChartSmallConfig.size = {
    width: 250,
    height: 115
  };
  donutChartSmallConfig.tooltip = {
    contents: $().pfDonutTooltipContents
  };

  var donutChartSmall = c3.generate(donutChartSmallConfig);
</script>