How to Recharts

[beamalsky]

Background

We have an old how-to card in which @jeancochrane wrote up some problems with our current go-to charting library, Highcharts:

• Very large filesize
• Restrictive license
• Bloated API and docs (difficult to get a quick chart off the ground)
• Difficult to customize charts
• Doesn't play well with reactive frameworks like React

As DataMade now has several projects using Gatsby, a React-based framework, we have an opportunity to reevaluate our charting library. The courts project is using Recharts, for which I've already done some development and will need to do more, so it makes sense to start with that one.

Proposal

I'd like to take an investment day to step back and explore the possibilities of Recharts. To do this, I'll set up a simple Gatsby app in a separate repo and set up a series of visualizations using either generated sample data or an external API. I'll use that repo to track the documentation I find useful and any useful patterns I land on.

[jeancochrane]

I'm really excited to see the results of this. Recharts looks fun, and having a go-to charting library is an important step in wider adoption of React/Gatsby.

In addition to the problems above, I'm curious to hear how Recharts compares to Highcharts in terms of data transformation, i.e., how much work is required to get data out of the data layer and into the chart? Highcharts/Django has always been particularly painful on this point because you have to serialize models to JSON in the view, parse the JSON in the template, and then transform the JSON to match the spec required by the series.data attribute. (These days it seems like you can actually load into Highcharts from CSV, which could make the transformation a bit easier, but the overall process is still cumbersome.)

I also recall David mentioning that the English docs for Recharts are sometimes sparse because the project is primarily maintained by developers in China. I would find that somewhat surprising for a project with such wide support, but it might be useful to keep track of how easily you're able to find answers to your questions.

[beamalsky]

Great question, I'll keep that in mind! So far for the courts project we've done all the data transformations on the backend with make and raw SQL, so that the tables in the database are already arranged in a way that they're easy to load into Recharts. That won't always be possible, so I'll investigate what data transformation options we have with this stack.

[beamalsky]

Here's the repo where I set this up with Gatsby: https://github.com/datamade/how-to-recharts

Here's what it looks like:

I started the process of pulling in data through an external API using the gatsby-source-graphql plugin but didn't finish. I'd like to pick that up again sometime to investigate the transformation question.

Overall: Recharts was pretty fast to set up and get going, and would be even easier if we incorporated it into a DataMade Gatsby starter cookiecutter. It offers easier customization than Highcharts. The documentation isn't huge, but answered any questions I ran into. I'd definitely like to try out this library with a more complex visualization to see how it does with more customization needs.

[jeancochrane]

We'll document this similarly to how we document Django packages in the django/ folder.