TSDEV-REACT-PIE-CHART

ReactJS component for data visualization

Installation

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

Import & Usage

import { TsdevPieChart } from 'tsdev-react-pie-chart';

...

<TsdevPieChart 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-pie-chart-{Date.now()}' | yes | | innerLabelColor | string | '#ffffff' | no | | innerLabelSize | number | 12 | no | | innerLabelType | string | 'value' | 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