react-highcharts alternatives and similar libraries
Based on the "Chart" category.
Alternatively, view react-highcharts alternatives based on common mentions on social networks and blogs.
-
victory
A collection of composable React components for building interactive data visualizations -
react-chartjs-2
React components for Chart.js, the most popular charting library -
react-chartjs
Common react charting components using chart.js. -
react-sparklines
Beautiful and expressive Sparklines React component -
react-google-charts
A thin, typed, React wrapper over Google Charts Visualization and Charts API. -
react-timeseries-charts
Declarative and modular timeseries charting components for React -
chartify
๐ ๐ ๐ React.js plugin for building charts using CSS -
rumble-charts
React components for building composable and flexible charts -
react-sigmajs
Lightweight React library for drawing network graphs built on top of SigmaJS -
d3-react-squared
Lightweight event system for (d3) charts and other components for ReactJS. -
react-sparkline
React component for rendering simple sparklines -
react-micro-bar-chart
React component for micro bar-charts rendered with D3 -
Flowchart React
Lightweight flowchart & flowchart designer for React.js. -
JSCharting for React
Official JSCharting React Plugin & Examples -
essential js 2 charts
Beautiful and interactive charts & graphs for react.
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of react-highcharts or a related project?
README
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
*Note that all licence references and agreements mentioned in the react-highcharts README section above
are relevant to that project's source code only.