0

GitHub - woles/react-pie3d

 1 year ago
source link: https://github.com/woles/react-pie3d
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

React 3d pie/donut chart with typescrpit

SVG 3D pie / donut chart with tooltips and typescript

chart

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

Installation

npm install react-pie3d

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK