Improve this doc View source

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

## Description

Directive for rendering a utilization trend chart. The utilization trend chart combines overall data with a pfDonutPctChart and a pfSparklineChart. Add the options for the pfDonutChart via the donutConfig parameter. Add the options for the pfSparklineChart via the sparklineConfig parameter.
See http://c3js.org/reference.html for a full list of C3 chart options.

## Usage

as attribute

    <ANY pf-utilization-trend-chart
         config="{object}"
         donut-config="{object}"
         sparkline-config="{object}"
         chart-data="{object}"
         [donut-center-label="{string}"]
         [sparkline-chart-height="{int}"]
         [show-sparkline-x-axis="{boolean}"]
         [show-sparkline-y-axis="{boolean}"]>
       ...
    </ANY>

#### Parameters

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

config

object

configuration settings for the utilization trend chart:

- .title - title of the Utilization chart
- .units - unit label for values, ex: 'MHz','GB', etc..

donutConfig | object | configuration settings for the donut pct chart, see pfDonutPctChart for specifics
sparklineConfig | object | configuration settings for the sparkline chart, see pfSparklineChart for specifics

chartData

object

the data to be shown in the donut and sparkline charts

- .used - number representing the amount used
- .total - number representing the total amount
- .xData - Array, X values for the data points, first element must be the name of the data
- .yData - Array, Y Values for the data points, first element must be the name of the data
- .dataAvailable - Flag if there is data available - default: true

donutCenterLabel
(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

sparklineChartHeight (optional) | int | height of the sparkline chart
showSparklineXAxis (optional) | boolean | override sparkline config settings for showing the X Axis
showSparklineYAxis (optional) | boolean | override sparkline config settings for showing the Y Axis

## Example

#### Source

#### Demo