Created
May 4, 2020 02:16
-
-
Save victorouse/e9396b970869cf94d1c845f59f58d43e to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ## Charts | |
| - [Recharts](http://recharts.org/en-US/) | |
| - [Victory](https://formidable.com/open-source/victory/) | |
| - [React-vis](https://uber.github.io/react-vis/) | |
| - [Nivo](https://nivo.rocks/) | |
| - [VX](https://vx-demo.now.sh/) | |
| - [ChartJS](https://github.com/jerairrest/react-chartjs-2) | |
| ### Requirements | |
| - 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 | |
| ### Nice to haves | |
| - *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 `options` object than spits out a graph to a dom node | |
| - *SVG-backed implementation*: canvas graphing libraries more often than not, suck | |
| ### Disqualified | |
| - React-vis | |
| - No official Typescript definitions (https://github.com/uber/react-vis/issues/636) | |
| - Nivo | |
| - `onMouseEnter` / `onMouseLeave` properties not exported in Typescript definitions (https://github.com/plouc/nivo/issues/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.. | |
| ## Comparisons / thoughts: | |
| ### Recharts | |
| #### Pros | |
| - API is very simple | |
| - API is easily composable (all chart elements are children of the parent chart) | |
| #### Cons | |
| - Sometimes math is required (radians, angles, calculating radii, label placement) | |
| - API docs are okay, but could use a lot more context | |
| ### Victory | |
| #### Pros | |
| - 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](https://github.com/FormidableLabs/victory-native) | |
| #### Cons | |
| - `onMouse` events 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 | |
| ### VX | |
| #### Pros | |
| - Incredibly flexible and composable, mostly helpers around low-level svg primitives - can pretty much make *anything* with this | |
| #### Cons | |
| - Docs are incredibly lacking | |
| - Maybe too low level to be ergonomic | |
| - Sometimes math | |
| ## Screenshots | |
| ### Recharts | |
|  | |
| ### Victory | |
|  | |
| ### VX | |
|  |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment