Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-highcharts

Package Overview
Dependencies
Maintainers
1
Versions
49
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-highcharts

React wrapper for highcharts

  • 5.0.2
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
2.9K
decreased by-77.23%
Maintainers
1
Weekly downloads
 
Created
Source

react-highcharts

Build Status

Highcharts component for react.

Demo

You can find the full code for the examples here

To run the demo:

  1. Clone the repo
  2. run:
    npm install
    npm run demo
    
  3. Point your browser at http://localhost:8080

Installation

If you are using React@0.14 just do this:

npm install react-highcharts --save

For React@0.13 use:

npm install react-highcharts@^3.0.0 --save

Usage

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

var config = {
  /* HighchartsConfig */
};
React.render(<ReactHighcharts config = {config}></ReactHighcharts>, document.body);
Bundled Usage (includes Highcharts)
var React = require('react');
var ReactHighcharts = require('react-highcharts/bundle/highcharts'); // Highcharts is bundled 

var config = {
  /* HighchartsConfig */
};
React.render(<ReactHighcharts config = {config}></ReactHighcharts>, document.body);
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.

Using highmaps

Require Highmaps first, and then require('react-highcharts/highmaps'); Or use bundled version: require('react-highcharts/bundle/highmaps');

Using highstock

Require Highstock first, and then require('react-highcharts/highstock'); Or use bundled version: require('react-highcharts/bundle/highstock');

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

Everything related to modules was moved out of react-highcharts. Now every highcharts module is published as a separate npm package. You can find the full list list here

For Contributors

Update Highcharts Version

  1. Install new highcharts version.

    npm unistall highcharts-release --save-dev
    npm install highcharts-release --save-dev
    
  2. Increment the react-highcharts version such that a patch, minor release, or major release of Higcharts is reflected in a corresponding version increase for react-highcharts.

Running tests

Run npm tests

Keywords

FAQs

Package last updated on 14 Nov 2015

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc