# TSDEV-REACT-DONUT-CHART

ReactJS component for data visualization

![alt text](https://lh3.googleusercontent. )

## 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
```