React 3d pie/donut chart with typescrpit

SVG 3D pie / donut chart with tooltips and typescript

Demo

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

Installation

npm install react-pie3d

or

yarn add react-pie3d

Usage

import { Pie3D } from 'react-pie3d'

<Pie3D config={config} data={data} />

How to use the types:

React.ComponentProps<typeof Pie3D>

Props:

Data (data)

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' },
]

Config (config)

| 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

MIT License 2019 © woles