Real-time cryptocurrency visualisations using React, Websockets and ChartJS

Real-time cryptocurrency visualisations using React, Websockets and ChartJS

on June 8, 2018 in Tutorials

As cryptocurrency continues to rise in prominence, so do the needs for accurate monitoring of related information. In this tutorial we will create stunning real-time visualisations of cryptocurrency market data updates using the most popular libraries and technologies.

In this tutorial we will be connecting a ReactJS app to a live Websocket feed in order to gain access to real-time market data. The data will be rendered on screen using a charting Javascript library. The end result can be seen above.

We will be using create-react-app in order to scaffold a React demo app quickly and easily. Basic ReactJS and NPM knowledge is assumed for the reader.

First, open a terminal and type the following commands in order to create your React app and start a local server:

npx create-react-app my-app
cd my-app
npm start

Having created your app, it’s time to install the dependencies and libraries that we will use for our charting app. For our purposes the very popular ChartJS library was chosen. We will also install a wrapper for ChartJS in order to make it easier to use with React. Last but not least, we will use Material UI in order to style our chart. Using your terminal, type the following under your new app’s directory:

npm install chart.js react-chartjs-2 @material-ui/core — save

Once the dependencies are installed, we will have to add the necessary files to our project. We will need 3 files under the src directory of our app:

  • index.js: Bootstraps React and creates a Material theme for our app. Also inserts our application component to the dom.
  • app.js: Main application component. Handles the application logic. Connects to the Websocket feed and passes the received market data to the nested charting component described below.
  • chart.js: Charting component. Renders a chart using the data passed to it from the application component

Now that we have a grasp of how our file structure looks, lets take a deeper dive into the details of each file.

The purpose of index.js is to bootstrap our application. The MuiThemeProvider is used to inject our Material theme into the application components. All MuiThemeProvider’s components will have the theme passed down to them. That means that our App component is now themeable!
Furthermore, passing arguments to the createMuiTheme function allows one to customise the generated theme. For verbosity we did not, but those interested can find more information here.

Let’s break down the above code into easily digestible bits.
Our application component stores the chart configuration and data in it’s own state. The data are updated through the Websocket connection and eventually passed down as props to the chart component that handles the rendering. Every time the app gets new data the state gets updated with the new data, triggering a re-rendering of the chart.
The following code describes our application’s state structure:

Two things of interest in the above code:

  • Notice that the data array is initially empty. It will get gradually updated once the app establishes a connection to the Websocket feed.
  • We set the chart colours in the same dataset object that holds our data. The colours are coming from the Material theme that we created in our index.js file

Now that we configured how our chart is going to look, it’s time to connect to the feed and get actual data. The code below handles connecting to and disconnecting from the feed, as well as updating the app’s state with the newly fetched data:

The subscribe object configures the type of connection we want to establish. GDAX feed also needs to know which cryptocurrency updates it needs to send back to us. In our demo we only request the latest bitcoin values in US dollars, but we could request multiple values here.
On every data update from the Websocket, we create a copy of the lineChartData state object, we push the new data to it, and re-save it. Every time we call setState our chart is re-rendered!
Last but not least, once our app component unmounts, we close the connection to the GDAX feed.
The rendering function is pretty straightforward. The chart will appear inside a container with a fixed height. Notice that as we mentioned before, the state objects that configure the chart are passed as props to the chart component:

The chart component turns out to be quite simple! It’s a presentational component, which means that it just renders whatever the props passed to it dictate, without having it’s own state. Every time it’s props change, a re-render is triggered:

You can view all the source code here on GitHub.
That was it! We hope you enjoyed this tutorial and find it helpful. Implementations of the functionality demonstrated in this tutorial can be found in our latest admin template Portal, which includes Angular, React and HTML admin panel templates. Take a look!

Leave a reply

Your email address will not be published. Required fields are marked *