Improve this doc View source

pfDonutChart
directive in module patternfly.charts

Description

Component for rendering a donut chart which shows the relationships of a set of values to a whole. When using a Donut Chart to show the relationship of a set of values to a whole, there should be no more than six categories.



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

Usage

as element:
<pf-donut-chart
       config="{object}"
       data="{object}"
       chart-height="{number}">
</pf-donut-chart>

Parameters

ParamTypeDetails
configobject

configuration properties for the donut chart:

  • .chartId - the unique id of the donut chart
  • .centerLabelFn - user defined function to customize the text of the center label (optional)
  • .onClickFn(d,i) - user defined function to handle when donut arc is clicked upon.
dataobject

an array of values for the donut chart.

  • .key - string representing an arc within the donut chart
  • .value - number representing the value of the arc
chartHeightnumber

height of the donut chart

Example

Source













Demo