tsdev-react-donut-chart

TSDEV-REACT-DONUT-CHART

ReactJS component for data visualization

Installation

npm install --save-dev tsdev-react-donut-chart

Import & Usage

import { TsdevDonutChart } from 'tsdev-react-donut-chart';

...

<TsdevDonutChart id="my-chart">

Properties

name	type	default	required
backgroundColor	string	'transparent'	no
backgroundColorLegend	string	'transparent'	no
colorRange	array	>>> read more >>>	no
dataSet	array	>>> read more >>>	no
decimals	number	2	no
endAngle	number	360	no
height	number	250	no
id	string	'tsdev-donut-chart-{Date.now()}'	YES
innerLabelColor	string	'#ffffff'	no
innerLabelSize	number	12	no
innerLabelType	string	'value'	no
innerRadius	number	60	no
labelLineColor	string	'#000000'	no
labelLineDotColor	string	'#000000'	no
labelLineDotRadius	number	2	no
labelLineWidth	number	1	no
legendColor	string	'transparent'	no
legendHeight	number	70	no
onSegmentClick	func	>>> read more >>>	no
outerLabelColor	string	'#000000'	no
outerLabelOffset	number	5	no
outerLabelSize	number	12	no
outerLabelType	string	'label'	no
radius	number	120	no
rotation	number	0	no
showInnerLabels	bool	false	no
showLabelLine	bool	false	no
showLabelLineDot	bool	false	no
showLegend	bool	false	no
showOuterLabels	bool	false	no
showSortedValues	bool	false	no
showTooltips	bool	false	no
sortDirection	string	'asc'	no
startAngle	number	0	no
strokeColor	string	'#ffffff'	no
strokeWidth	number	1	no
subClass	string	''	no
tooltipType	string	'labelValue'	no
width	number	250	no
xOffset	number	0	no
yOffset	number	0	no

Layout

• '/dist/styles.css'

Static Storybook

• open with browser '/storybook-static/index.html'

Functions

onSegmentClick(obj) => {
	console.log(obj);
}

colorRange

 colorRange: ['#85c7f1', '#549bf1', '#3329eb', '#0800a2', '#000000']

dataSet

 // !!! AVOID negative values !!!

 dataSet: [
        {
            label: 'one',
            value: 10
        },
        {
            label: 'two',
            value: 40
        },
        {
            label: 'three',
            value: 20
        },
        {
            label: 'four',
            value: 20
        },
        {
            label: 'five',
            value: 10
        }
    ]

innerLabelType

value
label
labelValue
percent
labelPercent

outerLabelType

value
label
labelValue
percent
labelPercent

tooltipType

value
label
labelValue
percent
labelPercent