Beautiful Visualizations With React and Recharts

React and Recharts example with historical stock data

Matthew Brown
Oct 26 · 5 min read
Image for post
Image for post
Made by the author in Canva

Nothing grabs people’s attention quite like a good visualization. Displaying data on a chart may be quite simple compared to wrangling it into the right format, but it’s the visuals that are going to get all the attention. People are visual creatures and displaying data in graphs and charts makes it much easier for them to understand it.

In this article, we will be building a React application that displays historical stock data from an API. For the charts, we will be using an npm package called Recharts.

I have used Recharts for several work projects and using it is quite simple and interactive visualizations are quite impressive. Also for developers, they are quite simple to use and the documentation makes it easy to figure how to make it do what you want.

Finnhub API

We will use the Finnhub API as the source for the historical stock data we will be using for this example. To use this API, you will need a key that they off for free. To follow along you will need to sign up for a key on their site.

If you want to scope out the docs we will be using specifically the Stock Candles section of the API to pull in data.

Image for post
Image for post
Screenshot by the author

Recharts

Recharts is a library of React Components that you can use to build various types of charts and graphs. It is built on D3. All of the visualizations have a clean and modern look.

Image for post
Image for post
Screenshot by the author

Example Application

To get started we will need to create a new React project with Create React App. Also, we will want to add Recharts to our project’s dependencies. Also, we will want to add a query string module to help us build the API URLs.

Run the following commands in a terminal to create the project and install the required dependencies.

npx create-react-app react-recharts-stock-example
cd react-recharts-stock-example/
yarn add recharts moment query-string
yarn start

The first step in building our application will be hooking up to the Finnhub API. We want to give the user options for viewing data. The user should be able to select from a list of stock symbols to pick the stock they want to view data for. We will also give the user the ability to select from the past 30, 60, 90, or 120 days of data.

Let’s implement this first step in our app. Update the contents of App.css and App.js to match the following.

So starting top to bottom we first declare a group of constant values for:

  • Options for the stock symbol dropdown
  • Options for the “Past Days” drop-down
  • API values (URL, token, resolution value)

We also have a simple helper function for converting a JavaScript date to a Unix timestamp. That is used with useMemo to set values for the to and from values for the API call based on the user selection from the “Past Days” select list.

Next is a useEffect for doing the work of calling the API to fetch data. The to timestamp, from timestamp and selected stock symbol are dependencies for this useEffect, so it will re-run whenever one of those values is updated.

One more step before actually displaying the data in a chart. The data from the API is not quite in the shape we need to display it in the chart. We will need to write a function to transform the API results into what we need.

Pretty simple transformation. We need an open, close, and timestamp value for each object. Now we have what we need to create a chart with the API data.

We build a line chart with our data. It’s easy to see how composable Recharts is. We add the components we want to appear on the chart and it is extremely customizable. For example, by adding the Legend component to our chart we get a legend to provide labels for each line. Also adding the Tooltip component gives us a tooltip to display the values as we hover over the chart.

Have a look at the screen capture below to see the chart in action. Notice the nice animations as we switch the selected values.

Image for post
Image for post
Screen capture by the author

We have a line chart for the API data and that is looking good. What other kinds of charts can we display? There are quite a few possibilities if you look through the Recharts API. For our example let’s also display our stock portfolio allocation using a pie chart.

This is just some hardcoded data in the right format for displaying in the pie chart. Let’s make the chart next.

Our pie chart is pretty simple. All we really need to do is supply the keys for finding the data and name. Then within the Pie component we make a Cell component for each item in the array. For each Cell child component we pass a color prop.

Image for post
Image for post
Screen capture by the author

Just to put it all together for the example code here is the result of App.js.

This is just scratching the surface with Recharts. It’s a great option for adding data visualizations to your React apps simply and quickly. Thanks for reading!

Medium's largest active publication, followed by +730K people. Follow to join our community.

Matthew Brown

Written by

I am a software architect and lead developer. My passions include software development, anything technology related, and cars.

The Startup

Medium's largest active publication, followed by +730K people. Follow to join our community.

Matthew Brown

Written by

I am a software architect and lead developer. My passions include software development, anything technology related, and cars.

The Startup

Medium's largest active publication, followed by +730K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store