Improve this doc View source

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

## Description

Directive for rendering a trend chart. The trend chart combines overall data with a pfSparklineChart.
See http://c3js.org/reference.html for a full list of C3 chart options.
See also: patternfly.charts.directive:pfSparklineChart

## Usage

as attribute

    <ANY pf-trends-chart
         config="{object}"
         chart-data="{object}"
         [chart-height="{int}"]
         [show-x-axis="{boolean}"]
         [show-y-axis="{boolean}"]>
       ...
    </ANY>

#### Parameters

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

config

object

configuration settings for the trends chart:

- .chartId - the unique id of this trends chart
- .title - (optional) title of the Trends chart
- .layout - (optional) the layout and sizes of titles and chart. Values are 'large' (default), 'small', 'compact', and 'inline'
- .trendLabel - (optional) the trend label used in the 'inline' layout
- .timeFrame - (optional) the time frame for the data in the pfSparklineChart, ex: 'Last 30 Days'
- .units - unit label for values, ex: 'MHz','GB', etc..
- .valueType - (optional) the format of the latest data point which is shown in the title. Values are 'actual'(default) or 'percentage'

chartData

object

the data to be shown in the sparkline charts

- .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

chartHeight (optional) | int | height of the sparkline chart
showXAxis (optional) | boolean | override sparkline config settings for showing the X Axis
showYAxis (optional) | boolean | override sparkline config settings for showing the Y Axis

## Example

#### Source

#### Demo