Research - Rendering Charts in React

[jamescd18]

Research various options to cut development time with rendering charts in the front-end using a package. The package must include support for Gantt charts. Ideally, the package should offer some decent level of features, but nothing overly complex.

A potentially primary option would be react-google-charts, but there definitely are alternatives to explore.

[eshwaribhide]

I think that react-google-charts seems like the best option...it seems pretty easy to use and set up and has Gantt chart support. I tried exploring some alternatives. One was Recharts, which seems like a good and popular option, but I don't think it directly supports Gantt charts. There is another library called Victory, but it also doesn't seem to directly support Gantt charts and might be more complex than we need. I think that if you really want to make a Gantt chart, it seems like you have to make a bar chart and set custom values for y (like literally this is all I found).

I found an open source option called react-gantt, but this is made specifically for Gantt charts, so is not as flexible if we need to also render other types of charts or something for other things.

This is a tangent, and probably you're already familiar with it, but there is also Airbnb's visx (Github repo). In this article, one of the examples they made with visx was a Gantt chart. It's interesting, one article that literally is titled "7 React Chart Libraries For Your Web Projects" listed visx as one of the options, saying it is "well equipped to generate complex charts", but Airbnb makes it explicit that they don't want to call it a charting library per se, saying, "As you start using visualization primitives, you’ll end up building your own charting library that’s optimized for your use case." But anyways, that statement really shows that it has a lot more complexity than necessary, and it's a more low level thing, and there don't really seem to be examples online of building Gantt charts with visx.

[jamescd18]

That's super interesting to hear! I'm glad you were able to both explore alternative options and bring up a very interesting one I'd never heard of before. I think our plan moving forward will be to use react-google-charts, and then if our charting needs become more complex, we can consider visx. Feel free to open a PR linked to this issue to mark it as researched and decided.