Visualizing Stock Data: Stock Price Charts With React-Vis

One of my favorite things to do as a Front-End Engineer is work with big data and translate it into something that the user can conceptualize. Recently, I have been working on a React cryptocurrency project and wanted to implement different price charts for different spans of time(1day, 7day, 1month etc…). There are multiple great chart libraries available to developers but I landed on react-vis. React-vis was created by Uber, and offers great API documentation support. They offer a wide range of charts, you can check out the library here. In this blog I am going to create a price/date XY Plot graph but the logic can be used for any XY Plot. The examples on react-vis mainly deal with hardcoding your graph data so I am going to walk through my process of iterating through my price data and injecting it into the graph. This solution solved my problem of an inflexible number of x-coordinates for the chart, and allowed for charting regardless of my data input size.

Getting Started

npm install react-vis

XY Plot graphs allow you to create line charts, area charts, heat maps etc….

I am going to be creating a simple line chart reflecting X: price of bitcoin over Y: span of time.

My Data:

My app is powered by the CoinGecko API, this is a portion of the data returned from the last 7 day price movement(recorded hourly) of Bitcoin. Each element in the array consists of a UNIX timestamp and a price that correlates. Perfect for the chart. If your data only consists of prices thats okay, you will still be able to create your price chart it just wont have date info on x-axis.

Graph Data

To inject our data to our graph we need to understand how the XY Plots utilize data. They consume an array of objects, each object with a {x:, y:} key value pair. Looks like this:

Setting Up Our Chart

This are the imports you will need to structure a basic XY chart. If you are implementing a time chart make sure to establish xType=“time”. The axes in your chart will automatically adjust to your input data which is really nice. The tickFormat is a prop passed to axes that will format the values of your tick marks. In my case my y-axis tick values were 55,000, 56,000, 57,0000 etc... I formatted the values to read 56K, 57K, 58K(just personal preference). Axis also take a title prop which labels the axis. The LineSeries is the actual line that will use and represent our data. Now let’s look at how we iterate through our data and turn it into usable coordinates.

Looping Through Our Data

Now that we understand the format of our graph points, and have our chart imported, we can work with our prices data. Note: If you don’t have timestamps in your data you can simply set x:i.

I create a function in my component responsible for turning my data into coordinates. You want to loop through your array or state that holds your data, in my case I am iterating through my ‘prices’ state.

We know we need an array of objects containing key value pairs of x and y. If you remember our data elements are an array with a timestamp and a price. In each iteration, I am pushing an object into my data array where x= to the first element(timestamp), but I am creating a date object so my chart can read it correctly. As for y, I set it equal to the second element which is the price. My data array now looks like this:

I have a lot more data points as my 7 day span is recorded with hourly data to give a more precise chart, this is just an example of the format. Our graph can now use this data to construct the LineSeries on our chart.

No we set our data equal to this function we just created so if your data changes our graph can adjust accordingly. Let’s take a look at our graph!

That’s it! Now there are lots of customizable features to implement to your chart which can all be found in the documentation. I encourage you to enhance your graph as much as possible for user experience but I will leave that up to your imagination! I hope this was useful!