Improve this doc View source

pfSparklineChart
directive in module patternfly.charts

Description

Component for rendering a sparkline chart.

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

Usage

as element:
<pf-sparkline-chart
       config="{object}"
       chart-data="{object}"
       [chart-height="{int}"]
       [show-x-axis="{boolean}"]
       [show-y-axis="{boolean}"]>
</pf-sparkline-chart>

Parameters

ParamTypeDetails
configobject

configuration settings for the sparkline chart:

  • .chartId - the ID of the container that the chart should bind to
  • .units - unit label for values, ex: 'MHz','GB', etc..
  • .tooltipType - (optional) set the type of tooltip, valid values:
    • 'default' - show the data point value and the data point name.
    • 'usagePerDay' - show the date, percent used, and used value for the data point.
    • 'valuePerDay' - show the date and value for the data point.
    • 'percentage' - show the current data point as a percentage.
  • .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

  • .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
  • .total - (optional) The Total amount, used when determining percentages
  • .dataAvailable - Flag if there is data available - default: true
chartHeight
(optional)
int

height of the sparkline chart

showXAxis
(optional)
boolean

override config settings for showing the X Axis

showYAxis
(optional)
boolean

override config settings for showing the Y Axis

Example

Source





Demo