pie

Create deliciously declarative pie charts with (P)React.
:warning: this is published as an alpha not considered ready for wide use. I'm just playing around :warning:
npm i @nicktomlin/pie
import {Pie, Slice} from '@nicktomlin/pie' // OR @nicktomlin/pie/dist/pie.preact
<Pie>
<Slice percent={0.1} fill='Coral' />
<Slice percent={0.7} fill='CornFlowerBlue' />
<Slice percent={0.2} fill='#00ab6b' />
</Pie>
Features
- <input checked="" disabled="" type="checkbox"> Actually renders a pie chart
- <input checked="" disabled="" type="checkbox"> Preact compatible (vanilla without needing
preact-compat
) - <input checked="" disabled="" type="checkbox"> Doughnut chart
- <input disabled="" type="checkbox"> Top/Bottom Labels
- <input disabled="" type="checkbox"> Hover effects (technically one could just pass props through to
Slice>
and be done with it but we could also make this easier)
Prior Art
- hard things stolen from a simple pie chart in SVG
- Structure stolen from Ryan Florence's "Compound Components" talk
- You should probably just use charts.js or d3
Contributing
- Fork and clone this repo
- Make your changes
- Please add a test if possible
- Ensure that
npm test
passes - Open up a pull request