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

ParamTypeDetails
configobject

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'
chartDataobject

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