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