React 3d pie/donut chart with typescrpit

SVG 3D pie / donut chart with tooltips and typescript

Demo

!chart

https://woles.github.io/react-pie3d/

Installation

npm install react-pie3d

yarn add react-pie3d

Usage

import { Pie3D } from 'react-pie3d'

How to use the types:

React.ComponentProps

Props:

$3

Data is an array of two possible types:

Raw data (number[])

const data = [10, 20, 30]

Or ({value: number, label?: string, color?: string}[])

const data = [
{ value: 10, label: 'apples', color: 'red' },
{ value: 20, label: 'bananas', color: 'green' },
{ value: 30, label: 'oranges', color: 'blue' },
]

$3

| Name | Type | Default Value | Description |
|----------|:-------------:|----------:|------:|
| angle | number | 40 | Angle of the chart |
| fixed | number | 2 | Floating point precision |
| height | number | 40 | Hight of the walls |
| ir | number | 0.6 | Inner radius in % |
| moveDistance | number | 0.2 | How far the slice can move in % (0 means no move on click) |
| onClick | function | (index: number) => null | custom function on slice click |
| showLabels | boolean | true | show labels on chart
| showLabelPercentage | boolean | true | show percentage value on chart
| showTooltips | boolean | true | Show tooltip on slice hover |
| size | number | 0.8 | Size in % of the container |
| stroke | string | '#fff' | Color of the stroke |
| strokeWidth | number | 1 | width of stroke in px |
| tooltipShowName | boolean | true | show label in tooltip |
| tooltipShowPercentage | boolean | true | show percentage value in tooltip |
| textSize | number | 12 | size of labels font in pixels |
| tooltipShowValue | boolean | true | show value in tooltip|

License

Props:

Data is an array of two possible types:

Raw data (number[])

const data = [10, 20, 30]

Or ({value: number, label?: string, color?: string}[])

const data = [
{ value: 10, label: 'apples', color: 'red' },
{ value: 20, label: 'bananas', color: 'green' },
{ value: 30, label: 'oranges', color: 'blue' },
]