https://github.com/xlsdg/react-highcharts-v5
React.js(v16.x+) component wrap for HighCharts.js(v6.x+)
https://github.com/xlsdg/react-highcharts-v5
chart highcharts library react react-component react-highcharts visualization
Last synced: 2 months ago
JSON representation
React.js(v16.x+) component wrap for HighCharts.js(v6.x+)
- Host: GitHub
- URL: https://github.com/xlsdg/react-highcharts-v5
- Owner: xlsdg
- License: mit
- Created: 2018-01-24T06:09:30.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-12-01T13:21:30.000Z (over 7 years ago)
- Last Synced: 2025-06-04T16:49:36.270Z (about 1 year ago)
- Topics: chart, highcharts, library, react, react-component, react-highcharts, visualization
- Language: JavaScript
- Homepage: https://xlsdg.github.io/react-highcharts-v5-demo/
- Size: 292 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-highcharts-v5
> React.js(v16.x+) component wrap for HighCharts.js(v6.x+)
## Installation
```bash
$ npm install --save highcharts react-highcharts-v5
```
## Usage
0. Change webpack config
For webpack 1.x:
```diff
{
test: /\.jsx?$/,
loader: 'babel',
include: [
- path.join(prjRoot, 'src')
+ path.join(prjRoot, 'src'),
+ path.join(prjRoot, 'node_modules/react-highcharts-v5/src')
],
- exclude: /node_modules/
+ exclude: /node_modules(?![\\/]react-highcharts-v5[\\/]src[\\/])/
},
```
For webpack 2.x+:
```diff
{
test: /\.jsx?$/,
loader: 'babel-loader',
- include: [resolve('src'), resolve('test')]
+ include: [resolve('src'), resolve('test'), resolve('node_modules/react-highcharts-v5/src')]
}
```
1. Import HighCharts
```javascript
import IHighCharts from 'react-highcharts-v5/src/HighCharts.js';
export default () => {
const options = {};
return (
);
};
```
2. Import HighMaps
```javascript
import IHighCharts from 'react-highcharts-v5/src/HighMaps.js';
export default () => {
const options = {};
return (
);
};
```
3. Import HighStock
```javascript
import IHighCharts from 'react-highcharts-v5/src/HighStock.js';
export default () => {
const options = {};
return (
);
};
```
## propTypes
```javascript
className: PropTypes.string,
style: PropTypes.object,
loading: PropTypes.oneOfType([
PropTypes.string,
PropTypes.bool
]),
theme: PropTypes.object,
resizable: PropTypes.bool,
options: PropTypes.object.isRequired,
onLoad: PropTypes.func,
onResize: PropTypes.func
```
## defaultProps
```javascript
className: 'react-highcharts',
style: {
width: '100%',
height: '100%'
},
loading: false,
theme: null,
resizable: false,
onLoad: () => {},
onResize: (w, h) => {}
```
## Demo
[react-highcharts-v5-demo](https://github.com/xlsdg/react-highcharts-v5-demo)
# License
MIT