@vasturiano/pie-chart NPM

Pie Chart

An interactive pie chart for representing categorical data.

Quick start

import Pie from '@vasturiano/pie-chart';

or using a script tag

<script src="//unpkg.com/@vasturiano/pie-chart"></script>

then

const myChart = Pie();
myChart(<myDOMElement>)
    .data(<myData>);

API reference

Method	Description	Default
data(array)	Getter/setter for the pie chart data, as an array of series objects, each representing a pie slice.	`[]`
width(number)	Getter/setter for the chart width in px.	<window width>
height(number)	Getter/setter for the chart height in px.	<window height>
label(string or fn)	Getter/setter for a series object label accessor, used to display labels on the slices and their tooltips.	`name`
size(string or fn)	Getter/setter for a series object size accessor, used to compute the angular length of the slices.	`value`
color(string or fn)	Getter/setter for a series object color accessor, used to color the slices.	`() => 'grey'`
sort(fn)	Getter/setter for the compare method used to sort the series. A value of `null` (default) maintains the existing order found in the input data structure. This method receives two arguments representing two series objects and expects a numeric return value (`-1`, `0` or `1`) indicating the order. For example, to order slices by size, use: `(a, b) => b.size - a.size`.	<existing order>
showLabels(boolean)	Getter/setter for whether to show labels in the slices. Regardless of this setting, labels too large to fit within a slice's boundaries are automatically hidden.	`true`
tooltipContent(fn)	Getter/setter for a series object tooltip content accessor function. Use this to specify extra content in each of the slice's tooltips in addition to the series name that's included by default.	<value (%)>
onClick(fn)	Callback function for click events. Includes the series object as single argument.
onHover(fn)	Callback function for mouse hover events. Includes the series object (or `null` if hovering outside the pie area) as single argument.