1.1.0 • Published 1 year ago

react-pie3d v1.1.0

Weekly downloads
48
License
MIT
Repository
github
Last release
1 year ago

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

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)

NameTypeDefault ValueDescription
anglenumber40Angle of the chart
fixednumber2Floating point precision
heightnumber40Hight of the walls
irnumber0.6Inner radius in %
moveDistancenumber0.2How far the slice can move in % (0 means no move on click)
onClickfunction(index: number) => nullcustom function on slice click
showLabelsbooleantrueshow labels on chart
showLabelPercentagebooleantrueshow percentage value on chart
showTooltipsbooleantrueShow tooltip on slice hover
sizenumber0.8Size in % of the container
strokestring'#fff'Color of the stroke
strokeWidthnumber1width of stroke in px
tooltipShowNamebooleantrueshow label in tooltip
tooltipShowPercentagebooleantrueshow percentage value in tooltip
textSizenumber12size of labels font in pixels
tooltipShowValuebooleantrueshow value in tooltip

License

MIT License 2019 © woles

1.1.0

1 year ago

1.0.0

5 years ago

0.1.0

5 years ago

0.0.3

7 years ago

0.0.2

7 years ago

0.0.1

7 years ago