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