Utilization Bar Chart

The Utilization Bar Chart can be used to show a visual relationship between the total available amount of a resource, and the percentage of that resource that has been utilized. For example, it would be appropriate to use a Utilization Bar Chart to show the user how much storage he has used in context of the total amount of storage he has purchased.

It is recommended that you pair this chart with a label or heading to tell the users which data points are represented. No specified pattern is prescribed for this label, so style it in a way that makes sense for your use. You may find the Utilization Bar Card pattern useful.

The Utilization Bar Chart differs slightly from the Progress Bar Widget, which is used to show the percentage of a process or set of tasks that have been completed.

Currently, PatternFly has not collected user research data on this pattern. If you’d like to contribute to this documentation, please see our Get Started guide for details.

Utilization Bar Chart Example

Utilization Bar Chart Example

Utilization Bar Chart

#callout-1

  1. Used Value - The used value bar shows the percentage (out of 100%) that has been consumed. The width and color of this bar can change according to the data. - Chart Fill:
    • The fill color can change to indicate that the data has surpassed a threshold. These include an orange warning and red error threshold, which can be used to indicate to a user that their consumption is nearing capacity.
    • When no thresholds are specified, the used value bar is blue.
    • When thresholds exist but have not been surpassed, the used value bar is green.
  2. Total Value -The total value bar is static in width and color. It represents the total available amount of a resource, and serves as a point of reference for the user as they study the chart.
    • The background color is grey (#d1d1d1).
  3. Tooltip: The chart does not effectively show precise values in its original state, so it is recommended that you display a tooltip on hover with the exact percentage value of the used value.

Warning Threshold (optional)

Utilization Bar Chart Example

This chart provides for an warning threshold that you may use when desired. When a warning threshold is active, the chart fill is blue until it reaches the warning threshold. Once it exceeds the warning threshold the chart fill is orange. 75% is the typical default value for activating a warning threshold, but you may configure this threshold to a custom value.

  • The warning threshold fill is orange (#ec7a08).

Error Threshold (optional)

Utilization Bar Chart Example

This chart provides for an error threshold that may be used when applicable. When there is an error threshold, the chart fill is red once the value exceeds the error threshold. 90% is the typical default value for an error threshold, but you may configure this threshold to a custom value.

  • The error threshold fill is red (#cc0000).

Utilization Bar Chart

25% Used
75% Available

Reference Markup

<script src="components/c3/c3.min.js"></script>
<script src="components/d3/d3.min.js"></script>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;" data-toggle="tooltip" title="25% Used">
    <span class="sr-only">25% Used</span>
  </div>
  <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;" data-toggle="tooltip" title="75% Available">
    <span class="sr-only">75% Available</span>
  </div>
</div>
<script>
  // Initialize Tooltip
  jQuery(document).ready(function() {
    jQuery('[data-toggle="tooltip"]').tooltip();
  });
</script>