graph-donut

React Donut Graph

A simple donut graph for React.JS.

---

---

Install npm i donut-graph --save Or Yarn Yarn add donut-graph

Use import DonutGraph from 'graph-donut

let PropTypes = {
    data: React.PropTypes.array, // array of objects to use for data points | Default []
    valuelabel: React.PropTypes.string, // label for the chart  | Default ('ValueLabel')
    text: React.PropTypes.string, // text inside the chart | Default ('')
    size: React.PropTypes.number, // diameter of chart | Default (150)
    strokewidth: React.PropTypes.number, // width of chart line | Default (20)
    donutchartTextValStyle: React.PropTypes.object, //React CSS Object for Text Value | Default ({})
    donutchartTextLabelStyle: React.PropTypes.object, //React CSS Object for Text Label | Default ({})
    donutchartTextStyle: React.PropTypes.object //React CSS Object for Text | Default ({})
}

---

Example Usage

import DonutGraph from 'graph-donut';
import React from 'react';
 
let data = [
    {
        "value": 10, // number out of 100
        "stroke": "blue",
        "offset": 0
    }
]
 
React.render(<DonutGraph data={data} valuelabel={"TICKETS ENTERED"} text={`${10}/100`} />, document.getElementById('main'))