simple-react-donut-chart

React Donut Chart

This is a dead simple donut chart component implemented in React.

To use it simply install it via npm:

npm i --save simple-react-donut-chart

demo

You can see this component in action here.

usage

This is an example how can you use this component in your project(s)

    import DonoutChart from 'simple-react-donut-chart'
    import 'simple-react-donut-chart/src/style.css'

Yes, in this version you have to include the compiled d css also

Using the component:

<DonoutChart
    percentage={30}
    colorOn="#510E80"
    colorOff="#8217CC"
    labelOff="Me"
    labelOn="You"
    circleColor="#ffffff"
    baseClass="customize"
    textStyle={{
        color: '#ff0000',
    }}
    labelStyle={{
        off: {
            fontSize: '16px',
        },
        on: {
            fontSize: '18px',
        },
    }}
/>

props

name	isRequired	type	default	example	description
percentage	yes	Number	0	percentage={10}	the percentage the donut chart should show
colorOn	yes	String	null	colorOn="#ff0000"	the color that matches with the percentage on the chart
colorOff	yes	String	null	colorOff="#ffff00"	the color that matches the rest of the donut part on the chart
labelOn	yes	String	null	labelOn="On"	the text will be shown with the percentage on the chart
labelOff	yes	String	null	labelOff="Off"	the text will be shown with the rest of the donut part on the chart
circleColor	yes	String	"#ffffff"	circleColor="#444444"	the color the circle should have on the middle of the donut chart
labelStyle	no	Object	{}	labelStyle={{ off: {,fontSize: '16px',}, on: {,fontSize: '18px',} }}	styleObject passed to the labels of the donut chart
textStyle	no	Object	{}	textStyle={{ color: '#fff', }}	styleObject passed to the explanation text of the donut chart
baseClass	no	String	null	baseClass={styles.chartBase}	Providing a baseClass will be applied on every domNode the donut chart has. See more at the styleing section

Styleing

By providing the baseClass props, you are able to customize the chart as you wish, with CSS.

Here is a quick example how it works:

<DonoutChart
    percentage={30}
    ...
    baseClass="customize"
/>

Given the customize as the value of baseClass the following will happen.

The donutContainer class will be assigned another class, which is the baseClass prop itself.

<div class="donutContainer customize">
    ...
</div>

The rest of the dom will be suffixed with the baseClass prop's value.

className	extended
donutContainer	className={`donutContainer ${baseClass}`}
details	className={`details details--${baseClass}`}
indicator off	className={`indicator off indicator-off-${baseClass}`}
indicator on	className={`indicator on, indicator-on-${baseClass}`}

More might come later if there's a need.

contribution

If you encountered an issue, or a bug, or want to request a feature, please use the issues section.

If you want to modify something yourself, feel free to fork this project, create a new branch for your feature, then send a PR and I will be happy to review and merge it. 😉

dependencies

This package depends on styled-components

Misc

1. this package is licenced under MIT