Chart libraries: don't
When creating a chart, your first instinct is usually to reach for a JavaScript library. While that's a great starting point, it often leads to unnecessary complications.
Let's explore why.
In a hurry
You're building an impressive app and need to add a barplot. You'll need rectangles, axes, labels, a title, and maybe even a tooltip—all responsive and well-designed.
The good news?
There are plenty of JavaScript dataviz libraries that can handle this perfectly:
Let's try with Nivo (I used it for a client recently).
All you have to do is to npm install the lib, import it ResponsiveBar component and use it with the 3 required arguments: data, keys and indexBy.
// Import lib
import { ResponsiveBar } from '@nivo/bar';
// Make a barchart
<ResponsiveBar data={data} keys={['value']} indexBy="country"/>
Just like that, you've created a fantastic barplot! Time to celebrate.
A basic barplot made using the Nivo library in 3 minutes.
Oh no! 😱
This lesson isn’t available just yet.
Take a look at the status badges next to each lesson in the sidebar to see when it’s coming out.
Thanks for your patience! 🙏