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