Doughnut Graph
Customizable doughnut graph for react
Installation
npm i stark-doughnut-graph
Usage
Import this component in page where you want to display graph.
import Doughnut from 'stark-doughnut-graph';
import React, { useEffect, useRef, useState } from 'react'
Use this in your page
// declare variable
const graphData = [
{ x: 'Cats', y: 35 },
{ x: 'Dogs', y: 55 },
{ x: 'Birds', y: 10 }
]
// declare state
const [data, setData] = useState([]);
const [centerPercentage, setCenterPercentage] = useState('');
let graphref = useRef();
//declare methods
useEffect(() => {
const graphData = [{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]
setData([...graphData]);
let cnt = 1;
const interval = setInterval(() => {
setCenterPercentage(`${(cnt * 10)}%`)
if (cnt === 10) clearInterval(interval)
cnt += 1;
}, 1000);
}, [])
// some code
render() {
return (
<>
<Doughnut
ref={graphref}
// optional
id='dougnut'
// required : data in array of object
data={data}
// optional: String : to show text in center
subTitle=""
// optional: String : to show text in center bold
title={centerPercentage}
// optional : height for graph
height='200'
// optional : width for graph
width='200'
// optional : to use as constrain to visible area
constrainToVisibleArea='true'
// optional : to overirde tooltip message
labels={({ datum }) => `${datum.x}: ${datum.y}%`}
// optional : horizontal or vertical
legendOrientation='vertical'
// optional : left, right, top, buttom to show legends
legendPosition='right'
// optional : to show legends, also u can specify color by symbol inside fill color
legendData={[
{ name: 'Cats 20%', symbol: { fill: 'red' } },
{ name: 'Dogs 50%', symbol: { fill: 'yellow' } },
{ name: 'Birds 30%', symbol: { fill: 'green' } },
]}
// optional : to custom legends color
legends={{
colorScale: ['red', 'yellow', 'green']
}}
// optional : to manage legends based on height and width
padding={{
bottom: 0,
left: 10,
right: 10, // Adjusted to accommodate legend
top: 0
}}
// optional : to custom color on radious
colorScale={['red', 'yellow', 'green']}
// optional : wrapper size in px or percentage
wrapperSize={{ height: '300px', width: '100%' }}
/>
</>
)
}
### dependencies package
* react-boostrap
* boostrap
* @patternfly/react-charts
* @patternfly/react-core