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.

#react #javascript #programming #recharts