# react-highcharts

> React wrapper for highcharts

Latest version **16.1.0** (published 2019-09-23) · 0 weekly downloads

## Install

```sh
npm install react-highcharts
pnpm add react-highcharts
yarn add react-highcharts
bun add react-highcharts
```

## Health

**Score 23/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 16.1.0 |
| Published | 2019-09-23 |
| First published | 2015-02-28 |
| Weekly downloads | 0 |
| TypeScript types | separate (@types/react-highcharts) |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 8.4 MB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1244 |
| Author | Kirill Cherkashin |
| Maintainers | ilyjs, kirjs |
| Keywords | chart, react, highcharts, graph |

## Links

- npm: https://www.npmjs.com/package/react-highcharts
- Repository: https://github.com/kirjs/react-highcharts
- Homepage: https://github.com/kirjs/react-highcharts#readme
- Issues: https://github.com/kirjs/react-highcharts/issues
- npm.io page: https://npm.io/package/react-highcharts

## Dependencies (1)

- [highcharts](https://npm.io/package/highcharts.md) ^6.0.4

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 16.1.0 (latest) — 2019-09-23
- 16.0.2 — 2018-01-28
- 16.0.1 — 2018-01-15
- 16.0.0 — 2018-01-13
- 15.0.0 — 2017-11-16
- 13.0.0 — 2017-10-11
- 12.0.0 — 2017-04-27
- 11.5.0 — 2017-01-03
- 11.0.0 — 2016-10-22
- 10.0.0 — 2016-08-01
- 9.0.0 — 2016-07-12
- 8.4.2 — 2016-07-12
- 8.4.1 — 2016-06-28
- 8.4.0 — 2016-06-26
- 8.3.3 — 2016-06-11
- … 34 more at https://npm.io/package/react-highcharts/versions

## README

react-highcharts
================

[![Build Status](https://travis-ci.org/kirjs/react-highcharts.svg?branch=master)](https://travis-ci.org/kirjs/react-highcharts)

[Highcharts 6.x.x](https://www.highcharts.com/documentation/changelog) component for react.
For highcharts 5.x.x use v. 13.0.0

## Demos
[react-highcharts](http://kirjs.github.io/react-highcharts/)
| [react-highcharts/more](http://kirjs.github.io/react-highcharts/more.html)
| [react-highcharts/highstock](http://kirjs.github.io/react-highcharts/highstock.html)
| [react-highcharts/highmaps](http://kirjs.github.io/react-highcharts/highmaps.html)

You can also see [Code for the demo](https://github.com/kirjs/react-highcharts/tree/master/demo) and
 [run demo locally](https://github.com/kirjs/react-highcharts#running-demo)

## Installation

```bash
npm install react-highcharts --save
```

## Usage
#### Webpack/Browserify

```bash
npm install react-highcharts highcharts react --save
```

```jsx
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
```jsx
const afterRender = (chart) => { /* do stuff with the chart  */ };
<ReactHighcharts config = {config} callback = {afterRender}></ReactHighcharts>
```

#### Passing properties to the wrapping DOM element
```jsx
<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](http://api.highcharts.com/highcharts). Here's how you access it:

```jsx
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators) to its previous value.
There is also `neverReflow` property.

#### Rendering on the server with node
See this [recipe](https://github.com/kirjs/react-highcharts/blob/master/recipes.md#rendering-react-highcharts-on-node)

## Using highmaps ([demo](http://kirjs.github.io/react-highcharts/highmaps.html))

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

## Using highstock ([demo](http://kirjs.github.io/react-highcharts/highstock.html))
```javascript
const ReactHighstock = require('react-highcharts/ReactHighstock')
```

## Using highcharts modules/add-ons like exporting, data, etc. ([demo](http://kirjs.github.io/react-highcharts/more.html))
Use `highcharts-more` npm package.
```javascript
const ReactHighcharts = require('react-highcharts')
require('highcharts-more')(ReactHighcharts.Highcharts)
```

You can find the full list [here](https://github.com/kirjs/publish-highcharts-modules/blob/master/modules.md)

## Passing Highcharts instance manually
```javascript
const ReactHighcharts = require('react-highcharts').withHighcharts(ReactHighstock)
```


## For Contributors
#### Running tests

Run `npm test`

#### Running demo

```bash
git clone https://github.com/kirjs/react-highcharts.git
cd react-highcharts && npm install
npm run demo
```
Point your browser at [http://localhost:8080](http://localhost:8080)

---
_Source: https://npm.io/package/react-highcharts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._