tsdev-react-polar-pie-chart

ReactJS chart component

Usage no npm install needed!

<script type="module">
  import tsdevReactPolarPieChart from 'https://cdn.skypack.dev/tsdev-react-polar-pie-chart';
</script>

README

TSDEV-REACT-POLAR-PIE-CHART

ReactJS component for data visualization

alt text

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