ChartJS should be a top contender for any data visualization endeavor in React (and in other frameworks). While D3 is a power house of possibilities, and other worthwhile options exist — ChartJS solves most data visualization needs.

What about using the React-ChartJS-2 Wrapper?

If you are a React developer exploring ChartJS — chances are you’ve found the really friendly and easy to use wrapper. If you have a simple dataset with few customization tweaks, it’s a great solution. However, as your data visualization and customization needs grow — the more you’ll benefit from getting under the hood of ChartJS. We can refer directly to the ChartJS documentation and customize as much as we need.

Using ChartJS in React

I’ll be walking you through my implementation and customization of ChartJS in React: addressing the initial set up, common customizations, and working with custom tooltips. By the end of this article, you should feel comfortable working with ChartJS and implementing a custom design in a React project.

🚀 Initial Setup

You can set up your own boilerplate for the project however you’d like. The main focus here is the component where we are creating and customizing a chart.

Following Along

You can clone down my repo if you’d like to skip the tedious boilerplate work and get to the good stuff. There are two main folders: views and components. Each folder has my code (./Dashboard) and a folder for your own work (./MyDashboard).

Incorporating into Your Own Project

I provide extensive gists that make it easier to incorporate into your own project. The only additional step you’d need to take is to install ChartJS: