Use Highcharts to create charts in React

Posted by Highsoft | 30 comments

Post categories:

Highcharts react-wrapper logo

 

Update: Since the original publication of this post, Highsoft has released a React wrapper.

React has taken the world by storm, and once you first try it out it is easy to understand why. It is simple, fast and facilitates reusable code. This article will show how to create your favorite charts in React. It presumes that you have a basic knowledge about React. If this is not the case then you should start by getting familiar with the React documentation.

INSTALL THE HIGHCHARTS NPM PACKAGE

First install Highcharts in your project. Open a command line terminal and run the following: npm install highcharts --save It will install Highcharts as a node module, and save highcharts as a dependency in package.json. If you are planning to use Highcharts only in your development environment, then you can use –save-dev as an alternative to –save.

REQUIRE AND LOAD HIGHCHARTS IN NPM

React is isomorphic and can therefore be run both on a server and the client. Because of this there is two different procedures to load Highcharts in React.

On a client side React application Highcharts can be loaded as the following example:

// Load Highcharts
var Highcharts = require('highcharts');

// Load a module
require('highcharts/modules/funnel')(Highcharts);

However with an isomorphic application the code will also be run on a server. Highcharts relies on a window to function properly, and on the server it does not exist. In this case Highcharts will wait to execute until the code runs on the client.

With an isomorphic application Highcharts should be loaded like in this example:

var Highcharts = require('highcharts'),
    addFunnel = require('highcharts/modules/funnel');
// After window is present, normally on componentDidMount or in the callback of ReactDOM.render
addFunnel(Highcharts);

You will learn more about how to use Highcharts in an isomorphic React application later on.

CREATE YOUR FIRST CHART IN REACT

There are two different methods of rendering a chart in React. The simplest is using ReactDOM.render with a callback. Second method is about creating a React component to hold the logic for your charts. We will show you an example of both cases.

CREATE A CHART WITH CALLBACK IN REACTDOM.RENDER

This example will show how to create a funnel chart in an isomorphic React application.

var React = require('react'),
    ReactDOM = require('react-dom'),
    Highcharts = require('highcharts'),
    addFunnel = require('highcharts/modules/funnel');
var element = React.createElement('div', { id: 'chart' });
ReactDOM.render(element, document.getElementById('react-app'), function () {
    // Apply funnel after window is present
    addFunnel(Highcharts);
    // Construct the chart
    Highcharts.chart('chart', { /*Options*/ });
});

CREATE A CHART WITH A SIMPLE REACT COMPONENT

The following example will show how it is possible to incorporate Highcharts in a React component. It is a very basic example and will only show you how to get started:

var React = require('react'),
    Highcharts = require('highcharts');
module.exports = React.createClass({
    // When the DOM is ready, create the chart.
    componentDidMount: function () {
        // Extend Highcharts with modules
        if (this.props.modules) {
            this.props.modules.forEach(function (module) {
                module(Highcharts);
            });
        }
        // Set container which the chart should render to.
        this.chart = new Highcharts[this.props.type || "Chart"](
            this.props.container, 
            this.props.options
        );
    },
    //Destroy chart before unmount.
    componentWillUnmount: function () {
        this.chart.destroy();
    },
    //Create the div which the chart will be rendered to.
    render: function () {
        return React.createElement('div', { id: this.props.container });
    }
});

Afterwards you are able to use this component in your React application:

var React = require('react'),
    ReactDOM = require('react-dom'),
    Chart = require('./components/Highcharts.react'),
    options = { /*Highcharts options*/ },
    element;

// Create and render element
element = React.createElement(Chart, { container: 'chart', options: options });
ReactDOM.render(element, document.getElementById('react-app'));

GOING A STEP FURTHER WITH COMPONENTS

Something which can be practical and help keep your code cleaner, is to put all your charts including their options and data in separate components. Continuing on what is previously done in this article, then a chart component could look something like this:

var React = require('react'),
    Chart = require('./Highcharts.react'),
    Funnel = require('highcharts/modules/funnel.src'),
    options = { /*Highcharts options*/};

 // Add additional module required to render a treemap.
module.exports = React.createClass({
    render: function () {
        return React.createElement(Chart, { container: 'chart-funnel', options: options, modules: [Funnel] });
    }
});

As mentioned previously this is just a simple use case. It might not suit all your needs, but it will get you started.