React-donut-chart NPM

react-donut-chart

An extendable SVG-based donut chart React component.

Example

Installation

npm install react-donut-chart --save

Usage

import DonutChart from 'react-donut-chart';

// things I would never do:
<DonutChart
  data={[
    {
      label: 'Give you up',
      value: 25,
    },
    {
      label: '',
      value: 75,
      isEmpty: true,
    },
  ]}
/>;

View the demo online

Props

Name	Required	Default	Description
data	true	{ value: 100, label: '', isEmpty:true}	The chart data
className	false	`donutchart`	This is the `className` given to the top-level `svg` element. All subclasses are prefixed from this name: ${className}-arcs accesses the entire graph area${className}-arcs-paths accesses the individual arc paths${className}-innertext accesses all of the text within the inner donut area${className}-innertext-label accesses the label within this area${className}-innertext-value accesses the value within this area${className}-legend accesses the legend component${className}-legend accesses the legend rectangle items${className}-legend-label accesses the labels of the legend items In addition the `selected` class is given to selected items, the `toggled` class to all toggled items, and the `isEmpty` class to all `isEmpty` items. All style (and animations) can be manipulated from the CSS
height	false	`500`	Height of the entire component
width	false	`750`	Width of the entire component. If no legend is specified, then the chart takes up the entire width. If a legend is toggled, then the chart takes up 2/3 of the width, and the legend takes up 1/3
colors	false	`['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722', '#795548', '#607d8b' ]`	An array of colors (could be hex strings or named colors) for the data items. Defaults to an array of Google colors
emptyColor	false	`'#e0e0e0'`	A color for empty data items, defaults to gray
strokeColor	false	`'#212121'`	A color for the stroke around the items in the graph and legend, defaults to black
colorFunction	false	`(colors, index) => colors[(index % colors.length)]`	The default cycles through the array of colors and loops for excess
innerRadius	false	`0.70`	The inner donut radius
outerRadius	false	`0.90`	The outer donut radius
selectedOffset	false	`0.03`	The `outerRadius` offset when an item is selected
emptyOffset	false	`0.08`	The `innerRadius` and `outerRadius` offset on `isEmpty` items
toggledOffset	false	`0.04`	The `innerRadius` and `outerRadius` offset on toggle-clicked items
formatValues	false	(values, total) => `${(values / total * 100).toFixed(2)}%`	Custom format for values displayed in the donut chart's inner text area. By default formats as percentages rounded to two decimal places.
onMouseEnter	false	`(item) => item`	Callback that fires when an item is hovered
onMouseLeave	false	`(item) => item`	Callback that fires when an item is unhovered
onClick	false	`onClick: (item, toggled) => (toggled ? item : null)`	Callback that fires when an item is toggle-clicked
legend	false	`true`	Determines whether or not to create a legend
clickToggle	false	`true`	Determines whether or not to toggle-freeze the graph on the arc that has been clicked
interactive	false	`true`	Determines whether to add interactive handlers