Package detail

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

1. Fork and clone this repo
2. Make your changes
3. Please add a test if possible
4. Ensure that npm test passes
5. Open up a pull request