Highcharts React Wrapper

I like React. It is a simple and powerful JavaScript library for building user interfaces. It offers many advantages such as fast dynamic web pages (thanks to the virtual DOM), reusable components, easy to write with JSX, etc.

Given how many Highcharts users are also React users, we decided to create a Highcharts React wrapper to make developers’ lives even easier.

Here is a short tutorial on how it works!

This tutorial has two sections. In the first section, I will set up the demo and run it, and then I will explain how the demo’s code works.

Remark

Basic knowledge of NodeJS and ES6 is recommended to follow along.

Part 1. Setting up the demo

The first thing to do is to create a folder to save the demo, e.g., I created HighchartsReactDemo, then clone or download the demo from this Github link and save it to the folder created earlier. Navigate to your folder (e.g., HighchartsReactDemo), and write the following command to install the dependencies:

npm install

Use this command to build the demo

npm run build-demo

Now, it is time to see the result. Go to the demo folder, then click on the index.html.

The result should be as shown in this GIF:

Part 2. Explanations

The main file that you have to care about is the demo.jsx under the folder demo.

The first section of the file is to import react and the highcharts library:

import React from 'react'
import { render } from 'react-dom'
import Highcharts from 'highcharts/highstock'
import HighchartsReact from 'highcharts-react'

The second section holds the main options of the charts, such as the title, data set, etc.

const options = {
  title: {
    text: 'My stock chart'
  },
    
  series: [{
    data: [[Date.UTC(2013,5,2),0.7695],
[Date.UTC(2013,5,3),0.7648],
...
[Date.UTC(2013,5,24),0.7623],]
  }]
}

And finally, I use a container and the API to wrap the chart:

const App = () => <div>
   <HighchartsReact
    highcharts={Highcharts}
    constructorType={'stockChart'}
    options={options}
  />
</div>

That is it! Now you know how to use Highcharts React wrapper 🙂

If you have any questions or you want more details, feel free to share it in the comments below.