Picking a Charting Packages

[mattkrick]

Soon we'll have our first graphs within the app & we need to pick a library.

Today's use cases:

• bar chart/line graph to show users how many meetings their team/org has run
• light interaction (mouse over a datapoint to see the actual value)

methodology

Options: - Google Charts https://developers.google.com/chart/interactive/docs/quick_start. This is what PQLs see today (via Data Studio) - Chartjs - D3 - Recharts, which is built on top of D3 (https://github.com/recharts/recharts) - web assembly high-frequency charting like https://github.com/finos/perspective. i don't think web assembly is necessary because our data isn't that high frequency. Resources: - https://www.freecodecamp.org/news/charting-the-waters-pt-2-a-comparison-of-javascript-charting-libraries-96e9fb79b856/ Observations: - D3 offers high flexibility with a steep learning curve - Chartjs offers simplicity at the sacrifice of flexibility - Recharts is a layer on top of D3 that adds simplicity My gut tells me that this won't be the last time we make a visualization. We want to avoid multiple charting libraries, and we want the flexibility to build new things. That makes me lean towards D3 with an abstraction on top of it, so we should dig deeper into libraries built on top of D3: - https://airbnb.io/visx/gallery - https://github.com/recharts/recharts - https://c3js.org/gettingstarted.html (used before, just OK) - https://charts.carbondesignsystem.com/react/?path=/story/simple-charts-bar-floating--horizontal-floating-bar-time-series - http://uber.github.io/react-vis/examples/showcases/plots - https://formidable.com/open-source/victory/ - https://nivo.rocks/bar/ (nice animations!) - https://naver.github.io/billboard.js/demo/#Chart.StackedAreaChart out of these, 2 rise to the top: nivo & recharts. recharts has been around for longer, nivo is more actively maintained & has more chart options: https://www.npmtrends.com/@nivo/core-vs-nvd3-vs-react-vis-vs-recharts-vs-victory-vs-@visx/shape Funnily enough, npmtrends.com uses chartjs & I really like that chart! The code is pretty simple, too: https://github.com/johnmpotter/npm-trends/blob/aa83fa6890b2454cd64208cdeae3a2fcd2d7ba14/components/_chart/TrendGraph.tsx I looked through all the issues to see if people are leaving 1 package for another, etc. seems like folks prefer nivo over recharts because it has more charts. chart.js gets a BUNCH of love from reddit. enough to make me question going for them. so if it's between nivo & chart.js: - nivo is built on D3, so if we want to build something really complex, we can do that later on - chart.js is its own thing, but it looks to be the simpler, cleaner solution - nivo is ~300KB minified, whereas chart.js is 200KB minified (https://bundlephobia.com/package/@nivo/core@0.79.0) so, we have a bet to make: - will we be making super complex charts in the future? if so, we should go with nivo & later build with D3 - do we want to have something that covers today's use cases, but is simple? if we do decide to make something complex, it'll cost us 200KB to include D3.

After all this, my suggestion is going with chart.js, maybe using the wrapper for react https://github.com/reactchartjs/react-chartjs-2

[Dschoordsch]

One thing we might want to use which I saw on nivo but not chartjs was a calendar usage graph like GitHub has https://nivo.rocks/calendar/

[mattkrick]

oh man get out of my head 🤣 i was thinking the same thing, then i found this & it looks even more githuby https://github.com/kurkle/chartjs-chart-matrix

[jordanh]

@mattkrick may we close this?