- Render a pie chart
- Render labels (either inside or outside the pie - inside labels can be problematic with small slices + potentially render SVGs for the labels
- On hover event handlers
- Render a gap between the active "slice" and the rest of the pie chart
- Grow the active slice larger than the existing slices
- Typescript
- Ergonomic API: balance between low level primitives and high level abstractions (make it easy, but don't lose flexibility)
- Composable API: enable flexibility to compose different chart elements together (pie slices, labels, legends, etc.)
- Component API: uses components rather than wrapping an
optionsobject than spits out a graph to a dom node - SVG-backed implementation: canvas graphing libraries more often than not, suck
- React-vis
- No official Typescript definitions (uber/react-vis#636)
- Nivo
onMouseEnter/onMouseLeaveproperties not exported in Typescript definitions (plouc/nivo#724)
- ChartJS
- Honestly, this API is just incredibly cumbersome and it uses canvas as well - the react wrapper for this lib leaves a lot to be desired..
- API is very simple
- API is easily composable (all chart elements are children of the parent chart)
- Sometimes math is required (radians, angles, calculating radii, label placement)
- API docs are okay, but could use a lot more context
- Simpler API surface (less math)
- Less hands on, more configuration via props
- Docs are pretty extensive
- Backed by fairly large organisation (Formidable Labs)
- Matching React Native lib with almost identical API
onMouseevents are incredibly flexible but can be difficult to reach into to figure out- Generally less composable, end up with fat components and only the surface API to configure
- Incredibly flexible and composable, mostly helpers around low-level svg primitives - can pretty much make anything with this
- Docs are incredibly lacking
- Maybe too low level to be ergonomic
- Sometimes math
