stark-doughnut-graph

    0.1.5 • Public • Published

    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
    
    

    Install

    npm i stark-doughnut-graph

    DownloadsWeekly Downloads

    19

    Version

    0.1.5

    License

    none

    Unpacked Size

    9.33 kB

    Total Files

    5

    Last publish

    Collaborators

    • starkreact