Improve this doc View source

# `pfUtilizationBarChart`
directive in module `patternfly.charts`

## Description

Directive for rendering a utilization bar chart There are three possible fill colors for Used Percentage, dependent on whether or not there are thresholds:

- When no thresholds exist, or if the used percentage has not surpassed any thresholds, the indicator is blue.
- When the used percentage has surpassed the warning threshold, but not the error threshold, the indicator is orange.
- When the used percentage has surpassed the error threshold, the indicator is is red.

## Usage

as attribute

    <ANY pf-utilization-bar-chart
         chart-data="{object}"
         [chart-title="{object}"]
         [chart-footer="{object}"]
         [layout="{object}"]
         [footer-label-format="{string}"]
         [units="{object}"]
         [threshold-error="{string}"]
         [threshold-warning="{string}"]>
       ...
    </ANY>

#### Parameters

Param | Type | Details
--- | --- | ---

chartData

object

the data to be shown in the utilization bar chart

- .used - number representing the amount used
- .total - number representing the total amount
- .dataAvailable - Flag if there is data available - default: true

chart-title (optional) | object | The title displayed on the left-hand side of the chart
chart-footer (optional) | object | The label displayed on the right-hand side of the chart. If chart-footer is not specified, the automatic footer-label-format will be used.

layout
(optional)

object

Various alternative layouts the utilization bar chart may have:

- .type - The type of layout to use. Valid values are 'regular' (default) displays the standard chart layout, and 'inline' displays a smaller, inline layout.
- .titleLabelWidth - Width of the left-hand title label when using 'inline' layout. Example values are "120px", "20%", "10em", etc..
- .footerLabelWidth - Width of the right-hand used label when using 'inline' layout. Example values are "120px", "20%", "10em", etc..

footer-label-format
(optional)

string

The auto-format of the label on the right side of the bar chart when chart-footer has not been specified. Values may be:

- 'actual' - (default) displays the standard label of '(n) of (m) (units) Used'.
- 'percent' - displays a percentage label of '(n)% Used'.

units (optional) | object | to be displayed on the chart. Examples: "GB", "MHz", "I/Ops", etc...
threshold-error (optional) | string | The percentage used, when reached, denotes an error. Valid values are 1-100. When the error threshold has been reached, the used donut arc will be red.
threshold-warning (optional) | string | The percentage usage, when reached, denotes a warning. Valid values are 1-100. When the warning threshold has been reached, the used donut arc will be orange.

## Example

#### Source

#### Demo