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, you may use a Utilization Bar Chart to show a user how much storage has been used in context of the total amount of storage available.

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

#callout-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 default used value fill color is blue (#39a5dc).
  - Thresholds (optional): The fill color can change to indicate that the data has surpassed a threshold. These include orange (#ec7a08) warning and red (#cc0000) error thresholds, which can be used to indicate to a user that their consumption is nearing capacity. When thresholds exist but have not been surpassed, the used value fill color is green (#3f9c35).
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).
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 used.

Threshold Examples

Warning Threshold

Utilization Bar Chart Example

This chart provides for a warning threshold that may be used when applicable. When there is a warning threshold, the chart fill is orange (#ec7a08) once the value exceeds the warning threshold. 75% is the typical default value for a warning threshold, but you may configure this threshold to a custom value.

Error Threshold

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 (#cc0000) 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.

PatternFly Core Example

Utilization Bar Chart

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>