React-svg-doughnut NPM

React SVG doughnut

A flexible, lightweight React component for SVG doughnut graphics made easy!

Installation

React SVG doughnut can be downloaded with yarn:

yarn add react-svg-doughnut

Or via NPM:

npm install react-svg-doughnut --save

Example of basic Usage:

import React from 'react';
import ReactDOM from 'react-dom';
import SvgDoughnut from 'react-svg-doughnut';

class Example extends React.Component {
    render() {
        const settings = {
            value: 100,
            labelText: 'Awesome!',
            size: 180,
            thickness: 5,
            animationDuration: 1000
        };

        return(
            <div>
                <SvgDoughnut {...settings}/>
            </div>
        );
    }
};

ReactDOM.render(
    <Example />,
    document.getElementById('app')
);

Configuration

React SVG doughnut uses the following props to build the graphic.

Prop	Type	Default Value	Description
value	Number	0	Value to be displayed in the centre of a graphic
size (px)	Number	150	Width and height of the graphic in pixels
thickness (px)	Number	5	Thickness of the graphic ring in pixels
animationDuration (ms)	Number	-	Optional duration of the generation animation in milliseconds. No animation is triggered when set to undefined.
primaryColour	String	'#e7534f'	Colour of the percentage and completion path of the graphic (valid css colour string).
ringColour	String	'#DDD'	Colour of the ring path of the graphic (valid css colour string).
labelText	String	-	Optional label text displayed under the percentage value.
labelColour	String	'#333'	Colour of the optional label text (valid css colour string).
labelPosition	String	'bottom'	Position of the optional label. 'top' or 'bottom'
labelFontSize (px)	Number	14	Label font size in pixels.
labelFontWeight	String	'normal'	Label font weight (valid css fontWeight string).
percentageFontSize (px)	Number	28	Percentage font size in pixels.
percentageFontWeight	String	'bold'	Percentage font weight (valid css fontWeight string).
ceiling	Number	100	The ceiling used to calculate the percentage / fraction
format	String	'percentage'	The format displayed. 'percentage' or 'fraction'