Improve this doc View source

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

## Description

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

## Usage

as attribute

    <ANY pf-sparkline-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 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

chartData

object

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