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.
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.
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.
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
yarn add recharts moment query-string
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)
useMemo to set values for the
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
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.
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.
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!