Improve this doc View source

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

## Description

Directive for rendering a percentage used donut/radial chart. The Used Percentage fill starts at 12 o’clock and moves clockwise. Whatever portion of the donut not Used, will be represented as Available, and rendered as a gray fill. 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.

The directive will calculate the Available Percentage (Total - Used), and display it as a grey radial fill.

See http://c3js.org/reference.html for a full list of C3 chart options.

## Usage

as attribute

    <ANY pf-donut-pct-chart
         config="{object}"
         data="{object}"
         [center-label="{string}"]
         [chart-height="{int}"]>
       ...
    </ANY>

#### Parameters

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

config

object

configuration properties for the donut chart:

- .chartId - the unique id of the donut chart
- .units - unit label for values, ex: 'MHz','GB', etc..
- .thresholds - warning and error percentage thresholds used to determine the Usage Percentage fill color (optional)
- .tooltipFn(d) - user defined function to customize the tool tip (optional)
- .centerLabelFn - user defined function to customize the text of the center label (optional)
- .onClickFn(d,i) - user defined function to handle when donut arc is clicked upon.

data

object

the Total and Used values for the donut chart. Available is calculated as Total - Used.

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

center-label
(optional)

string

specifies the contents of the donut's center label.
Values:

- 'used' - displays the Used amount in the center label (default)
- 'available' - displays the Available amount in the center label
- 'percent' - displays the Usage Percent of the Total amount in the center label
- 'none' - does not display the center label

chartHeight (optional) | int | height of the donut chart

## Example

#### Source

#### Demo