kirjs/react-highcharts

React wrapper for Highcharts library

react-highcharts

Highcharts 6.x.x component for react. For highcharts 5.x.x use v. 13.0.0

Demos

react-highcharts | react-highcharts/more | react-highcharts/highstock | react-highcharts/highmaps

You can also see Code for the demo and run demo locally

Installation

npm install react-highcharts --save

Licensing

The React-Highcharts repository itself is MIT licensed, however note that this module is dependent on Highcharts.js. For commercial use, you need a valid Highcharts license.

Usage

Webpack/Browserify

npm install react-highcharts highcharts react --save

const React = require('react');
const ReactDOM = require('react-dom');

const ReactHighcharts = require('react-highcharts'); // Expects that Highcharts was loaded in the code.

const config = {
  /* HighchartsConfig */
};

ReactDOM.render(<ReactHighcharts config = {config}></ReactHighcharts>, document.body);

Optional after-render callback

const afterRender = (chart) => { /* do stuff with the chart  */ };
<ReactHighcharts config = {config} callback = {afterRender}></ReactHighcharts>

Passing properties to the wrapping DOM element

<ReactHighcharts config = {config} domProps = {{id: 'chartId'}}></ReactHighcharts>

Accessing Highcharts API After Render

For access to methods & properties from the Highcharts library you can use ReactHighcharts.Highcharts. For example, the Highcharts options are available via ReactHighcharts.Highcharts.getOptions().

Highcharts provides an API for manipulating a chart after the initial render. See the Methods and Properties in the documentation. Here's how you access it:

class MyComponent extends React.Component {
  componentDidMount() {
    let chart = this.refs.chart.getChart();
    chart.series[0].addPoint({x: 10, y: 12});
  }

  render() {
    return <ReactHighcharts config={config} ref="chart"></ReactHighcharts>;
  }
}

Limiting Highchart Rerenders

Rerendering a highcharts graph is expensive. You can pass in a isPureConfig option to the ReactHighcharts component, which will keep the highcharts graph from being updated so long as the provided config is referentially equal to its previous value. There is also neverReflow property.

Rendering on the server with node

See this recipe

Using highmaps (demo)

const ReactHighmaps = require('react-highcharts/ReactHighmaps');

Using highstock (demo)

const ReactHighstock = require('react-highcharts/ReactHighstock')

Using highcharts modules/add-ons like exporting, data, etc. (demo)

Use highcharts-more npm package.

const ReactHighcharts = require('react-highcharts')
require('highcharts-more')(ReactHighcharts.Highcharts)

You can find the full list here

Passing Highcharts instance manually

const ReactHighcharts = require('react-highcharts').withHighcharts(ReactHighstock)

For Contributors

Running tests

Run npm test

Running demo

git clone https://github.com/kirjs/react-highcharts.git
cd react-highcharts && npm install
npm run demo

Point your browser at http://localhost:8080

react-highcharts's Issues

5.0.0 already published but package.json at 4.0.0

https://www.npmjs.com/package/react-highcharts seems to have 5.0.0 already while the package.json in master states 4.0.0.

Would it be possible to add git tags for those versions that have been pushed to npm, in order to see what has changed?

Proposal: New module structure

Problem

Due to the complex structure of Highcharts there has been a lot of confusion around how to get the right combination of Highcharts modules into the codebase.

Also for every additional module or variation of Highcharts a separate pull request has to be created, each of them following some different structure, making using/contributing to react-highcharts more and more confusing.

Issues #18, #32, #33, #38, #39 and #40 are still open because of that.

Proposed solution

Below I propose the new module structure, which would hopefully bring in understandable and predictable module structure, and will make react-highcharts easier to use and to contribute to.

Default

require('react-highcharts')
By default only the React component should be required, expecting that Highcharts was required independently, and a global variable exists.

This is a breaking change, and addresses #40.

Bundles

require('react-highcharts/bundles/highcharts'); // Acts as require('react-highcharts') now
require('react-highcharts/bundles/highmaps');
require('react-highcharts/bundles/highstock');
Bundled versions come with their own version of Highcharts/Highmaps/Highstocks/Highwhatever.

They are meant to simplify the usage of the component, and no to bundles can be loaded simultaneously, as that would bring 2 versions of the highcharts into the codebase.

This would address #18

Modules

require('react-highcharts/modules/more');
require('react-highcharts/modules/exporting');
require('react-highcharts/modules/heatmap');
etc.

Modules will be used as a shortcuts to the modules folder in highcharts-release.
They won't have Highcharts bundled, and can be required in any combinations.

This would address #32, #33, #38, #39,

Can't mix use of index.js and more.js

If one component uses 'react-highcharts' and another (on the same page) uses 'react-highcharts/more' we end up loading Highcharts twice and getting error 16. I'm using Browserify. This is probably related to #4. Thanks!

load on demand

the hightcharts.js is too big. Is there any way load like this?

var Spline = require('react-hightcharts').spline;
var Pie = require('react-hightcharts').pie;

Click event not firing

As title says, my click event is not firing with. The load event is firing (so I know the events object is being passed), however click does not fire. Is there something I'm missing?

I'm establishing it on the page as such:

import $ from "jquery"; // you should probably note in the documentation that jQuery is a dependency
import Highcharts from "react-highcharts";

My config (generified a bit):

var config = {
    chart:{
        events: {
            click: function (event) {
                // this doesn't work
                console.log(this);
            },
            load:function(){
                // this works
                console.log(this);
            }
        },
        // this is ignored
        options3d:{
            alpha:45,
            beta:0,
            enabled:true
        },
        type:"pie"
    },
    plotOptions:{
        pie:{
            cursor:"pointer",
            depth:35,
            dataLabels:{
                enabled:true,
                format:"{point.name}"
            }
        }
    },
    series:[{
        data:zeDataStuffz,
        name:"Le pie",
        type:"pie"
    }],
    title:{
        text:""
    },
    tooltip:{
        pointFormat:"Occurrences: <b>{point.y}</b>"
    }
};

Then its called:

<Highcharts config={config} ref="pieChart"/>>

The data is being passed correctly and the chart renders (although without 3D? minor issue compared to click), however click is not firing.

Add react-highcharts to cdnjs

cdnjs/cdnjs#6317

Use Official Highcharts NPM Package

Looks like HighSlide Software is adding Highcharts to NPM: highcharts/highcharts#3616

The package is here, but appears to still have some issues. Once resolved, it would be great if react-highcharts could use the official package instead of bundling Highcharts.

I'd suggest making Highcharts a peer dependency.

chart.series.addPoint is not a function

Cannot get many functions in Highcharts API to work. Getting errors like 'chart.series.addPoint is not a function' and 'chart.addPoint is not a function' for addPoint, setData, etc.

var chart = this.refs.chart.getChart();
chart.series.addPoint({
    color: "#000",
    name: "Adding A Point",
    value: "$ 1234.00",
    y: 1234.00
});

Add highcharts-more

Hi Kirill,

Is it possible to require highcharts-more (http://www.highcharts.com/component/content/article/2-articles/news/46-gauges-ranges-and-polar-charts-in-beta) to allow us to use beta features like gauge?

Thk

unmount -> didmount, highcharts component has no any properties!

hi @kirjs:

I use react-router to change my page, after I went to another page and go back Chart Page, the highcharts obj's properties is gone, my code as follows:

and google console log:

have any good solution?

How can I set global?

like:

Highcharts.setOptions({
    global: {
        // timezoneOffset: +1,
        useUTC: false
    }
});

Uncaught TypeError: Cannot set property 'HighchartsAdapter' of undefined

When I add import of bundled react-highchart, like this:

import Highcharts from 'react-highcharts/dist/bundle/highcharts';

I receive following error in chrome's console:

Uncaught TypeError: Cannot set property 'HighchartsAdapter' of undefined

It's source this line of code:

    /******/return __webpack_require__(0); /******/})( /************************************************************************/ /******/[ /* 0 */function(module,exports,__webpack_require__){ /* WEBPACK VAR INJECTION */(function(global){'use strict';if(!Highcharts){global.HighchartsAdapter = __webpack_require__(1);var Highcharts=__webpack_require__(2);}module.exports = __webpack_require__(3); /* WEBPACK VAR INJECTION */}).call(exports,(function(){return this;})()); /***/}, /* 1 */function(module,exports){ /**

I've installed 4.0.0 version of react-highcharts.

Install with npm causes error

Hi, I use npm to install react-highcharts with [email protected]. And the error says:

npm ERR! peerinvalid The package react does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react@*

So how can I use react-highcharts with [email protected]？

How to prevent redraw when parent state change during click event

Hi,
I use click events on a chart to signal my parent component what point was clicked. This in turn updates the parent's state which get sent over to the highcharts component. This causes always a redraw of the graph lines, which is something I don't want. How could I control when to redraw and when not? I tried checking if the value-table from the paren'ts state changes or not, but still the chart redraws itself no matter what.

Having trouble with highcharts-more

I've tried every possible combination of imports that I can think of but no luck. Here is what I think should work:

import Highcharts from 'highcharts-release/highcharts.src.js';
import 'highcharts-release/highcharts-more.src.js';
import 'highcharts-release/modules/exporting.src.js';
import ReactHighcharts from 'react-highcharts';

Uncaught SyntaxError: Invalid regular expression: /<(.|\n)*?>/: Stack overflow

I'm trying to add point to a rendered chart but getting the following error :

Uncaught SyntaxError: Invalid regular expression: /<(.|\n)*?>/: Stack overflow

code looks like this :

      var chart = this.refs.renderedchart.getChart();
      chart.series[0].addPoint([1447603399058, 0.94646]);

config looks like this :

      config: {
        chart: {
          backgroundColor: '#000'
        },
        credits: {
          enabled: false
        },
        colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',
        '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],
        rangeSelector: {
          enabled: false
        },
        title: {
          text: '',
          style: { 'color': '#fff', 'fontSize': '18px' }
        },
        series: [{
          type: 'area',
          data: [],
          tooltip: {
            enabled: false
          }
        }]
      }

really tried everything but was unable to debug.
thanks in advance for your help.

It's not working - how to implement highcharts?

Sory for no description but I've double click enter :/

Use with React 0.14.X causes warnings

These were specifically found on React 0.14.0-alpha3

Warning: require("react/addons") is deprecated.
Access using require("react/addons/{addon}") instead.

Warning: DIV.getDOMNode(...) is deprecated. Please use React.findDOMNode(instance) instead.

This is more of a warning/heads up, than an actual issue. I'm sure you were planning on making the appropriate changes once 0.14 is out of alpha+beta.

How can we format HighChart tooltip?

Hi,

Can we use something like

Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});

As using config

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

So, Please let me know how to use setOptions in HighCharts.

Is there a way to update the chart

Is there a way to update the chart, cause if I understand the code you can only create a new chart. But after that the chart was rendered the first time it should be possible to just update the chart data like this:

chart.series[0].setData(data,true);

"example of using react-highcharts/highstock" returns 404 Not Found

The readme has a link for "example of using react-highcharts/highstock" to http://kirjs.github.io/react-highcharts/highstock.html but it returns 404 Not Found

Server-side render issue?

When I try to import Highcharts from 'react-highcharts', I got this error.
error given was: ReferenceError: document is not defined **/node_modules/react-highcharts/index.js:138:9

Since document is a kind of client-side stuff or I misunderstand it ?

Access to Highcharts.getOptions().colors?

Hi,

I'm working through a Highcharts example and using React with your excellent project here.

Unfortunately I'm really struggling to access Highcharts.getOptions().colors. Can I do it from a standard import like:

var Highcharts = require('react-highcharts');

Or do I have to import the highcharts library separately? I'm afraid my understanding of node's modules is not good enough to figure it out, though hopefully it is simple.

Any help would be much appreciated,
Michael

No need to use getDOMNOde in React 0.14

Related with #8

Now that React 0.14 is the main release, the DOM node refs can be accessed with the DOM component. blog patch

Just replace renderTo: this.refs.chart.getDOMNode() for renderTo: this.refs.chart in chartsFactory.jsx:23 :)

How can I destroy highchart?

I found some big ploblems:

when I change the source or remove chart from my charts,

event.target will return null

Does it means I need reassign new loadedCallback for highchart??

Weird Character on index.js

    visibilitySetter: function (value, key, element) {
        // IE9-11 doesn't handle visibilty:inherit well, so we remove the attribute instead (#2881, #3909)
        if (value === 'inherit') {
            element.removeAttribute(key);
        } else {
            element.setAttribute(key, value);
        }
    },

The problem is between the "} else" it shows up as

Not sure what is causing this maybe an IDE issue? Maybe it is clashing with Babelify or Browserify or Gulp... but I think cleaning spaces in all your files and converting tabs to spaces before pushing to npm.

Feature request -- add export module

Thanks for this module! It's made my job so quick and easy. I know that my PM will want exporting soon, so I am thinking adding the exporting module (found here: http://code.highcharts.com/) will be a nice addition.

I intend to just try to add it here myself and then file a PR, but if someone beats me to it, I will send you a beer!

heatmap support?

Thanks for releasing react-highcharts. According to http://www.highcharts.com/docs/chart-and-series-types/heatmap a heatmap requires modules/heatmap.js from the highcharts distribution. Sample code http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/heatmap/

Is it possible to make this work with react-highcharts?

Update react-highlight

Once this is merged in: akiran/react-highlight#9
akiran/react-highlight#8 (comment)

Don't import Highcharts if it already exists

When Highcharts is already defined globally on a webpage an exception is thrown.
Would it be possible to conditionally require Highcharts to stop this issue?

ReferenceError: document is not defined

doc = document,
                  ^
ReferenceError: document is not defined

Seems to be an issue when trying to run this using an isomorphic app

[BUG] Highcharts already defined in the page

I am trying to use both react-highcharts/more & react-highcharts/highstock on the same page, this causes the following error message:

http://www.highcharts.com/errors/16

This maybe similar to this issue, #9 although I thought this had been fixed?

I am using webpack to bundle my code.

Highmap

Is it possible to draw map with react-highcharts?

Pie Chart error

I have implemented my compnent in following way:

var React = require('react');
var HighCharts = require('react-highcharts');
var Theme = require('../settings/Theme');

var HighChartsComponent = React.createClass({

    componentWillMount: function(){
        this.setTheme();
    },

    getChart: function(){

      if(this.refs.chart != undefined){
          return this.refs.chart.getChart();
      }else {
          throw new Error('Chart is only available when chart didMount');
      }
    },

    /**
     * This method sets theme to Highcharts
     */
    setTheme: function () {
        HighCharts.Highcharts.theme = Theme;
        HighCharts.Highcharts.setOptions(HighCharts.Highcharts.theme);
    },


    render: function () {
       return (
           <HighCharts
               config={this.props.data}
               ref={"chart"}
               style={{width: '100%', height: '100%', position: 'absolute'}}
               />
       );
    }
});

module.exports = HighChartsComponent;

Other chart types, like - area, column, etc is working fine, but when i try to implement following pie chart demo http://www.highcharts.com/demo/pie-legend, chart is not rendered at all, although it have received props :

What i'm doing wrong, or what can cause the problem?

Chart is getting entirely re-drawn on AddPoints

Following my precedent issue, i'm now facing a new one.
When i add a new point to the data serie using AddPoint, my chart is getting entirely re-drawn instead of just adding the new data point.

Here's the config :

this.data = {
      config: {
        chart: {
          backgroundColor: '#000'
        },
        credits: {
          enabled: false
        },
        colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',
        '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],
        rangeSelector: {
          enabled: false
        },
        title: {
          text: '',
          style: { 'color': '#fff', 'fontSize': '18px' }
        },
        series: [{
          type: 'line',
          data: [],
          tooltip: {
            enabled: false
          }
        }]
      }

The Store updating the rate :

init: function() {
    this.data = {
      rate: 0,
      chartrate: []
    };
  },

  getInitialState: function() {
    return this.data;
  },

  onGetNewRate: function(id) {
    $.ajax({
      url: '/instruments/' + id,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.data.rate = data.currentrate;
        var rate = data.currentrate;
        var timestamp = (new Date()).getTime();
        this.data.chartrate = [timestamp, rate];
        this.trigger(this.data);
      }.bind(this)
    });
  }

and the the component listening to the previous store :

  render: function() {
    if (this.refs.renderedchart) {
      if (this.state.chartrate[0] !== undefined) {
        var chart = this.refs.renderedchart.getChart();
         chart.series[0].addPoint(this.state.chartrate);
      }
    }
    return (
      <Highchart ref='renderedchart' className="Chart" config={this.props.config}></Highstock>
    );
  }

please note that the config is coming from a totally different store, as you can see it as props and not as state.

Uncaught TypeError: Cannot set property 'HighchartsAdapter' of undefined

I'm trying this example: http://kirjs.github.io/react-highcharts/ but I'm getting the JS error:

Uncaught TypeError: Cannot set property 'HighchartsAdapter' of undefined

I'm using webpack in my project.

Consequences of upgrading high charts?

At the moment, react-highcharts depends on highcharts 2.x, and 4.x has been out now with a lot of improvements and changes. I'd guess there's work to be done for migrating, but I wanted to know if this was going to be prioritized at all.

Explore better ways to allow highcharts to render on node

Stock Chart

Is it possible to use the Stock chart functionality?

http://api.highcharts.com/highstock#Highcharts.StockChart

I see in the code it is currently hard coded for Chart https://github.com/kirjs/react-highcharts/blob/master/src/Highcharts.jsx#L22

How to update series data without rerender highchart component?

I want to pass data from parent component, but how could I stop reinit highchart every I passed the data?

Why Highcharts.Highcharts?

For access to methods & properties from the Highcharts library you can use Highcharts.Highcharts. For example, the Highcharts options are available via Highcharts.Highcharts.getOptions().

Why the extra level?

Highcharts Bundled Path Documentation

The documentation shows -

var Highcharts = require('react-highcharts/bundle/highcharts'); // Highcharts is bundled

But I believe this should be -

var Highcharts = require('react-highcharts/dist/bundle/highcharts'); // Highcharts is bundled

Help with react-highcharts

Hello,

I was hoping you could help me quickly with an issue I'm having with React and Highcharts. I'm new to both, which is why I don't understand how to fix the problem. Any help you can lend would be greatly appreciated.

Here is the error I am seeing:

ReferenceError: document is not defined
at /home/bob/DEV/vynosny-web/node_modules/commonjs-highcharts/index.js:72:9

Here is my code:

import React, { PropTypes, Component } from 'react';
import styles from './ChartPage.css';
import withStyles from '../../decorators/withStyles';
import Highstock from 'commonjs-highcharts';

const data = [[1220832000000, 22.56], [1220918400000, 21.67], [1221004800000, 21.66], [1221091200000, 21.81], [1221177600000, 21.28], [1221436800000, 20.05], [1221523200000, 19.98], [1221609600000, 18.26], [1221696000000, 19.16], [1221782400000, 20.13], [1222041600000, 18.72], [1222128000000, 18.12], [1222214400000, 18.39], [1222300800000, 18.85], [1222387200000, 18.32], [1222646400000, 15.04], [1222732800000, 16.24], [1222819200000, 15.59], [1222905600000, 14.3], [1222992000000, 13.87], [1223251200000, 14.02], [1223337600000, 12.74], [1223424000000, 12.83], [1223510400000, 12.68], [1223596800000, 13.8], [1223856000000, 15.75], [1223942400000, 14.87], [1224028800000, 13.99], [1224115200000, 14.56], [1224201600000, 13.91], [1224460800000, 14.06], [1224547200000, 13.07], [1224633600000, 13.84], [1224720000000, 14.03], [1224806400000, 13.77], [1225065600000, 13.16], [1225152000000, 14.27], [1225238400000, 14.94], [1225324800000, 15.86], [1225411200000, 15.37], [1225670400000, 15.28], [1225756800000, 15.86], [1225843200000, 14.76], [1225929600000, 14.16], [1226016000000, 14.03], [1226275200000, 13.7], [1226361600000, 13.54], [1226448000000, 12.87], [1226534400000, 13.78], [1226620800000, 12.89], [1226880000000, 12.59], [1226966400000, 12.84], [1227052800000, 12.33], [1227139200000, 11.5], [1227225600000, 11.8], [1227484800000, 13.28], [1227571200000, 12.97], [1227657600000, 13.57], [1227830400000, 13.24], [1228089600000, 12.7], [1228176000000, 13.21], [1228262400000, 13.7], [1228348800000, 13.06], [1228435200000, 13.43], [1228694400000, 14.25], [1228780800000, 14.29], [1228867200000, 14.03], [1228953600000, 13.57], [1229040000000, 14.04], [1229299200000, 13.54]];

const chartConfig = {
title: {
text: 'AAPL stock price by minute',
},

subtitle: {
text: 'Using ordinal X axis',
},

xAxis: {
gapGridLineWidth: 0,
},

rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h',
}, {
type: 'day',
count: 1,
text: '1D',
}, {
type: 'all',
count: 1,
text: 'All',
}],
selected: 1,
inputEnabled: false,
},

series: [{
name: 'AAPL',
type: 'area',
data: data,
gapSize: 5,
tooltip: {
valueDecimals: 2,
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1,
},
stops: [
[0, Highstock.getOptions().colors[0]],
[1, Highstock.Color(Highstock.getOptions().colors[0]).setOpacity(0).get('rgba')],
],
},
threshold: null,
}],
};

@withStyles(styles)
class ChartPage extends Component {
static contextTypes = {
onSetTitle: PropTypes.func.isRequired,
};
componentDidMount() {
const chart = this.refs.chart.getChart();
chart.series[0].addPoint({x: 10, y: 12});
}
render() {
const title = 'Chart';
this.context.onSetTitle(title);
return (

);
}

}

export default ChartPage;

How do i use highcharts and highstock on the same page?

Im unable to use highcharts and highstock on the same page. im getting error 16:
http://www.highcharts.com/errors/16

Highcharts already defined in the page

This error happens the second time Highcharts or Highstock is loaded in the same page, so the Highcharts namespace is already defined. Keep in mind that the Highcharts.Chart constructor and all features of Highcharts are included in Highstock, so if you are running Chart and StockChart in combination, you only need to load the highstock.js file.

im using the react-highcharts libraries like this:

var Highstock = require('react-highcharts/dist/bundle/highstock');
var Highcharts = require('react-highcharts/dist/bundle/highcharts');

Any ideas or is this not possible?

How to set the chart title

Hi,

Thanks for this cool component.

I just would like to know how to set a custom chart title. I tried to add a props 'title' or to add a 'title' key in my config object but without success.

customizing the Highcharts theme

I'd like to be able to change the Highcharts theme. I patched the source to add the below at the start of renderChart:

if (this.props.theme) {
  Highcharts.theme = this.props.theme;
  Highcharts.setOptions(Highcharts.theme);
}

This works fine when used like so:

<Highcharts config = {highchartsConfig} theme = {HighchartsTheme.dark}></Highcharts>

Is there a simpler/better way to customize the theme? If not, could you add the code above?

Highcharts Error #16

In the same page, I would like to using highchart & highstock in same time,
but it has error as follows:

Highcharts Error #16

Highcharts already defined in the page

This error happens the second time Highcharts or Highstock is loaded in the same page, so the Highcharts namespace is already defined. Keep in mind that the Highcharts.Chart constructor and all features of Highcharts are included in Highstock, so if you are running Chart and StockChart in combination, you only need to load the highstock.js file.

How can I use the highchart base on highstock component? thx!

Find a way to automatize testing

Outdated version

Running npm install react-highcharts --save pulls in what seems to be an outdated version of this package. Can you please push a new version?

Thanks

Global Highcharts not lazily accessed as expected

As an extension to #40; We are currently seeing the same warning after upgrading to v3.

From a quick investigation of 965da2b#diff-06d73f0df0c20a3ee847700bbde19f74R1, I believe that this line should be

if (!global.Highcharts) {