TSDEV-REACT-POLAR-PIE-CHART
ReactJS component for data visualization
Installation
npm install --save-dev tsdev-react-polar-pie-chart
Import & Usage
import { TsdevPolarPieChart } from 'tsdev-react-polar-pie-chart';
...
<TsdevPolarPieChart 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-polar-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