Highcharts wrapper for React 101

React and Highcharts logos

 

 

The new Highcharts wrapper for React is now available, and it is compatible with React 16.4+.

In this tutorial, we will show you how to get started with the official Highcharts wrapper for React.
we will start with setting up the environment, then jump to create three demos for each Highcharts library: Highcharts, Highstock, and Highmaps.

Set up the environment

For this project, we will use:

  • Create React App tool to focus only on the code and to get the pre-configuration of Webpack and Babel.
  • Visual Studio Code as the main editor to benefit from its awesome features that make writing the code easier.
  • The extension Simple React Snippets to help write fast React code.
  • The extension Prettier to better reformat the code.

Installation

We prefer to install the Create React App tool globally since we use it regularly. To do so, open the terminal and run the following command line with the option -g for global:

$npm install -g create-react-app

To create our application “hcreact”, enter into the terminal window:

$create-react-app hcreact

The previous command line creates a folder with a default project. To install Visual Studio code and the extensions feel free to refer the official documentation. Once the Visual Studio Code installed, open it, drag and drop the folder “hcreact” into the editor.

Let’s run the project as it is to be sure that everything is well set up before starting to change the project.

Return to the terminal to run these command lines:

$ cd hcreact/
$ npm start

The npm start will launch a server on port 3000.

If your result is as the picture below, that means that the basic configuration is working.

Next install Highcharts and the Highcharts React Wrapper. First, stop the running project on the terminal using Ctrl+c, then run this command lines:

$ npm install highcharts
$ npm install highcharts-react-official

Now, let’s prepare our project by removing the default files. Go back to the editor then delete these files:

  • App.css
  • App.js
  • App.test.js
  • index.js
  • index.css
  • logo.svg
  • serviceWorker.js
  • .gitignore

With that out of the way, we are ready to start writing our own code.

Highcharts chart

Inside the folder src, create index.js, open it and import react, react-dom, highcharts, and highcharts-react-official.

import React from 'react';
import { render } from 'react-dom';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

A simple chart to generate to start with is a spline chart with the following data:[1, 2, 1, 4, 3, 6]. To achieve that, we need to create an object (options) then pass the information:

const options = {
  chart: {
    type: 'spline'
  },
  title: {
    text: 'My chart'
  },
  series: [
    {
      data: [1, 2, 1, 4, 3, 6]
    }
  ]
};

The JSX includes the information created above, and here’s how to do it:

const App = () => (
  <div>
    <HighchartsReact highcharts={Highcharts} options={options} />
  </div>
);

Finally, render the whole code using the react render method:

render(<App />, document.getElementById('root'));

The required code is now complete. Go back to the terminal, and run the project:

$ npm start

The result should be an interactive spline chart:

Highstock chart

The same process applies to charts generated using the Highstock library.

Here is an example of a simple interactive stock chart:

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

const options = {
  title: {
    text: 'My stock chart'
  },
  series: [
    {
      data: [1, 2, 1, 4, 3, 6, 7, 3, 8, 6, 9]
    }
  ]
};

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

render(<App />, document.getElementById('root'));

Notice the import of Highstock using this import import Highcharts from 'highcharts/highstock';, and the use of constructorType={'stockChart'} in the JSX.

The result is the demo below:

Highmaps chart

The process for rendering maps using Highmaps is almost similar to the previous demos, except for a few things:

  1. We have to import the map data to display and save it as mapDataAsia.js, in my case the javascript map of Asia from the Highcharts map collection.
  2. Replace the object Highcharts.maps["custom/asia"] by const mapDataAsia.
  3. Export the object export default mapDataAsia;
  4. Import the object in my index.js using import mapDataAsia from './mapDataAsia.js';

And voila, we are ready to use the map and display it.

The index.js will look like the following:

 import React from 'react';
import { render } from 'react-dom';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import mapDataAsia from './mapDataAsia';

// Load Highcharts modules
require('highcharts/modules/map')(Highcharts);

var data = [
  ['ae', 37],
  ['af', 44],
  ['am', 20],
  ['az', 19],
  ['bd', 9],
  ['bh', 12],
  ['bn', 43],
  ['bt', 26],
  ['cn', 70],
  ['cnm', 33],
  ['cy', 48],
  ['ge', 27],
  ['id', 65],
  ['il', 29],
  ['in', 65],
  ['iq', 36],
  ['ir', 70],
  ['jk', 40],
  ['jo', 31],
  ['jp', 100],
  ['kg', 52],
  ['kh', 25],
  ['kp', 45],
  ['kr', 70],
  ['kw', 35],
  ['kz', 28],
  ['la', 38],
  ['lb', 46],
  ['lk', 51],
  ['mm', 13],
  ['mn', 34],
  ['my', 18],
  ['nc', 47],
  ['np', 50],
  ['om', 5],
  ['ph', 1],
  ['pk', 39],
  ['qa', 41],
  ['ru', 70],
  ['sa', 2],
  ['sg', 65],
  ['sh', 17],
  ['sp', 10],
  ['sy', 30],
  ['th', 4],
  ['tj', 22],
  ['tl', 24],
  ['tm', 32],
  ['tr', 65],
  ['tw', 49],
  ['uz', 23],
  ['vn', 21],
  ['ye', 6]
];

const mapOptions = {
  title: {
    text: ''
  },
  colorAxis: {
    min: 0,
    stops: [[0.4, '#ffff00'], [0.65, '#bfff00'], [1, '	#40ff00']]
  },

  series: [
    {
      mapData: mapDataAsia,
      name: 'Asia',
      data: data
    }
  ]
};

// Render app with demo chart
class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Demos</h1>

        <h2>Highmaps</h2>
        <HighchartsReact
          options={mapOptions}
          constructorType={'mapChart'}
          highcharts={Highcharts}
        />
      </div>
    );
  }
}
render(<App />, document.getElementById('root'));

The end result is the demo below:

Now, you know how to use Highcharts React wrapper to create and display charts using the three main Highcharts libraries. Next, we will tackle the Highcharts Gantt library. Stay tuned.

Feel free to share your experience, questions, and comments below.