Improve this doc View source

pfLineChart
directive in module patternfly.charts

Description

Directive for rendering a line chart.

See http://c3js.org/reference.html for a full list of C3 chart options.

Usage

as attribute
<ANY pf-line-chart
     config="{object}"
     chart-data="{object}"
     [show-x-axis="{boolean}"]
     [show-y-axis="{boolean}"]
     [set-area-chart="{boolean}"]>
   ...
</ANY>

Parameters

ParamTypeDetails
configobject

configuration settings for the line chart:

  • .chartId - the ID of the container that the chart should bind to
  • .units - unit label for values, ex: 'MHz','GB', etc..
  • .tooltipFn - (optional) override the tooltip contents generation functions. Should take a data point and return HTML markup for the tooltip contents. Setting this overrides the tooltipType value.
  • .area - (optional) overrides the default Area properties of the C3 chart
  • .size - (optional) overrides the default Size properties of the C3 chart
  • .axis - (optional) overrides the default Axis properties of the C3 chart
  • .color - (optional) overrides the default Color properties of the C3 chart
  • .legend - (optional) overrides the default Legend properties of the C3 chart
  • .point - (optional) overrides the default Point properties of the C3 chart
chartDataobject

the data to be shown as an area chart
First and second Array elements, xData and yData, must exist, next data arrays are optional.

  • .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
  • .yData1 - Array, Y Values for the data points, first element must be the name of the data
  • .[...] - Array, Y Values for the data points, first element must be the name of the data
showXAxis
(optional)
boolean

override config settings for showing the X Axis

showYAxis
(optional)
boolean

override config settings for showing the Y Axis

setAreaChart
(optional)
boolean

override config settings for showing area type chart

Example

Source













Demo