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