Meteor + React + Highchart

Question

I'm using Meteor 1.3(beta.5) and trying to use react optimized npm highchart package called kirjs/react-highcharts (https://github.com/kirjs/react-highcharts).

However I couldn't successfully display highchart graph on my page. For example, how do you translate code below into meteor 1.3 way?

var config = {
  /* HighchartsConfig */
};
React.render(<ReactHighcharts config = {config}></ReactHighcharts>, document.body);

Your help would be really appreciated. Thank you.

Answer 1

Here is a step-by-step guide...

First, you need to install two Meteor packages:

meteor add meteorhacks:npm
meteor add cosmos:browserify

NOTE: Browserify adapts NPM modules for use on the client side.

Next, run meteor once.

meteor

Now stop meteor with Ctrl-C (windows)

Meteor has now added a packages.json file in the root of your project.

In packages.json add the following NPM dependencies:

{
  "externalify": "0.1.0",
  "react-highcharts" : "7.0.0"
}

Meteor requires you specify an exact version number. Above are the latest versions at the time of writing.

Next, creates a folder called "lib" in the root of your project (next to "client" and "server").

Inside lib, create a folder called "browserify"

Inside browserify, create 2 files:

app.browserify.js
app.browserify.options.json

It should look like this:

Inside app.browserify.js paste this code:

ReactHighcharts = require('react-highcharts/bundle/ReactHighcharts');

This will create a global variable which can be used on the client side.

The code above uses the Highcharts version which is bundled with the ReactHighcharts library. If you'd like to use a different Highcharts version, you can use the following code:

ReactHighcharts = require('react-highcharts');

Now inside app.browserify.options.json paste the following:

{
  "transforms": {
    "externalify": {
      "global": true,
      "external": {
        "react": "React.require",
        "react-dom": "React.require"
      }
    }
  }
}

This code means that ReactHighcharts will use Meteor's React package, rather than downloading the standard React package from NPM.

Using Meteor's React package is important so you can use reactive data.

By adding this code, all React-related NPM modules you add to Browserify will also use Meteor's React package.

NOTE: Externalify lets you define an external library to use for NPM / Browserify dependencies.