Charting into new React territories
Are you looking for an interactive way to display data on a React app in the form of a line chart, bar chart, or pie chart? This is the perfect article for you then! Of course, you could always use an image to display a chart. Wouldn’t it be cooler if a user could hover over the chart and interact with it? Or what if you need the chart to update constantly with new information?
Welp, if you weren’t persuaded before I hope you are now! Let’s dive in!
As I mentioned before, this article will focus on creating charts for React applications. I already created a React app as a demonstration example for this article. I named my application ‘chart-blog-example’. If you forgot the command to create a new React app, I’ll provide it below.
npx create-react-app my-app
cd my-appThese two commands will create the React app and change the directory to the newly created app. I then created a component called “Chart.js”. Normally I would create a components folder to organize all of my components, but for this example I created the file in the src folder(same as App.js and index.js). The Chart.js file is very simple as of now. I will provide a screenshot of my code below for my current Chart.js file.
The only other file I configured was the App.js. I deleted everything provided inside of the div in the return, and replaced it with the Chart component. Below is a screenshot of my App.js file.
So when I run the following command, “npm start” in my terminal my browser looks like the image below.
We now have a very simple setup to begin the chart demonstration. We will be using a chart package I discovered on Google called, “React Chartkick”. You can view the official documentation here. Time to shut down the server with the command “Ctrl + C” in the terminal, and run the following command to install “React Chartkick”.
npm install react-chartkick chart.jsAfter the command is finished running, we can start the server back up with “npm start”. React Chartkick offers a variety of different charts and graphs to use. We are going to build 3: a line chart, a bar chart, and a pie chart. Feel free to check out all of the options at the official documentation. I’m going to start with the line graph first. All of the data used in these examples will be completely fabricated.
At the top of the Chart.js file we will add our imports. They look like such,
import { LineChart } from 'react-chartkick'
import 'chart.js'Next, let’s create some data to play and interact with. My data in this example will be static, but free feel to make it dynamic by using state or hooks. You can also use fetched data from an API, and the charts even come with an option called, “refresh={n}” that allows the chart to refresh its data every n seconds. Pretty sweet! Back to the data though. Below is a snippet of my data object.
const data = {
"Jan 2020": 300,
"Feb 2020": 428,
"Mar 2020": 466,
"Apr 2020": 494,
"May 2020": 464,
"Jun 2020": 579,
"Jul 2020": 572,
"Aug 2020": 647
}We will pretend this object contains total monthly oil changes for a garage. So in January the garage did a total of 300 oil changes for the month. I added this constant inside of my Chart component above the return statement. All we have to do now is add our LineChart component and set the data property to our data object. Below is a screenshot of my code with all of these updates.
And if we check out the browser where our app is running, our browser looks like this screenshot.
We now have a line chart displaying our oil changes! We will customize a few properties before moving on to the bar chart. I will use a select few, but you can view all of the properties on the official documentation. Below is a screenshot of newly updated line chart. I will also explain what each property is.
data — is the object the chart will use for data
width — width of the chart
height — height of the chart
curve — if the line in the chart should curve or not.
colors — color of the line chart
xtitle — is the title on the x-axis
ytitle — is the title on the y-axis
id — is the id for customizing the component in CSS
With all of these new changes, our browser now looks like the screenshot below.
That is it for our first chart! Not too shabby. The next two charts will go a little quicker now that we have an idea of whats going on. We will also create a new data object, but we will use the same object for both of the last two examples. Next up the bar chart!
The data object we will use will look like the object below.
const data = {
"Strawberry": 11,
"Blueberry": 9,
"Orange": 5,
"Watermelon": 10,
}We will pretend this object contains the favorite popsicle flavors for a second grade classroom. We will use this object to replace the existing data object located in the Chart.js file. We will also replace the component name LineChart with BarChart. I’ll remove the curve property and change the color to something different. Lastly, I’ll change the x-axis and y-axis titles accordingly. Below is a screenshot of my updated Chart.js file.
Once the file is saved, we can see the results in the browser. My browser looks like the screenshot below.
Just like that we have a bar chart now! Time for the finale! The pie chart!
We will start off by updating the Chart.js file. I will change the component name BarChart to Piechart, and I’ll change the colors. That is literally it for the last example! Instead of one color, I’ll include 4(One for each category). Different colors will be rendered by default if no custom colors are supplied. Save the file, and check out our browser. Below is a screenshot of my browser.
I will also include a screenshot of my final Chart.js file that is currently rendering the above image in my browser. You can find the code below.
We successfully created 3 charts! There are plenty of more charts to check out and create on the official documentation, as this article just gives you a little taste of it.
I hope you found this article helpful and easy to follow. Please feel free to connect with me on LinkedIn, or check out my portfolio site! Thanks for reading!!
