React/ReactJS: Rendering Highcharts

Highcharts is an excellent charting library developed in JavaScript by Highsoft, a company founded by Torstein H√łnsi, who is also the main creator of Highcharts. It was first released in 2009.

Highcharts is capable of rendering various types of graphs, from basic line and column charts to 3D and heatmaps. You can go through all the different kinds of charts supported by Highcharts here.

In this tutorial, we will learn how to use/render Highcharts in ReactJS.

reactjs highcharts

The first step is to install the react-highcharts npm package.

				
				npm install react-highcharts --save-dev
				
			

After installation, the package will be inside the node_modules directory. We will create a separate component to display our charts, say, Graph.js, and import Highcharts there.

				
				import React from 'react';
				import Highcharts from 'highcharts';
				
			

As an example, let us pick a pie chart and illustrate the composition of the Earth's atmosphere with it: Nitrogen (78.1%), Oxygen (20.9%), Argon (0.9%) and Trace Gases (0.1%). We will render this chart within the <div> element with id atmospheric-composition.

				
				  render() {
				    return (
				    	<div id="atmospheric-composition">
				    	</div>    	
				    );
				  }
				
			

Let us create a state variable, say series, and assign an array to it consisting of Earth's atmospheric composition data structured in the following way inside the constructor().

				
				constructor(props) {
				    super(props);
				    this.state = {	
						series: [{
							  name: 'Gases',
						      data: [
						        {
						          name: 'Argon',
						          y: 0.9,
						          color: '#3498db'
						        },
						        {
						          name: 'Nitrogen',
						          y: 78.1,
						          color: '#9b59b6'
						        },
						        {
						          name: 'Oxygen',
						          y: 20.9,
						          color: '#2ecc71'
						        },
						        {
						          name: 'Trace Gases',
						          y: 0.1,
						          color: '#f1c40f'
						        }
						      ]
						    }]
					}
				}
				
			

A Highcharts chart is initialized using the Highcharts.chart() constructor. The whole object (within braces) passed as a parameter to it is known as the options object; and chart, title and plotOptions are objects whereas series is an array. For easy handling, the Highcharts.chart() constructor is placed inside the highChartsRender() function so that we can just call the function to initialize the constructor. Inside the chart object, the value pie corresponding to the type property indicates that the chart is a pie chart, and the string value atmospheric-composition corresponding to the renderTo property is the id of the element inside which the chart will be rendered. And to make our pie chart look like a donut/doughnut, the innerSize option inside the pie object of the plotOptions wrapper object is set to 70%. The last object series is assigned the state variable this.state.series, which is an array.

				
				highChartsRender() {
					Highcharts.chart({
					    chart: {
					      type: 'pie',
					      renderTo: 'atmospheric-composition'
					    },
					    title: {
					      verticalAlign: 'middle',		      
					      floating: true,
					      text: 'Earth\'s Atmospheric Composition',
					      style: {
					      	fontSize: '10px',
					      }
					    },
					    plotOptions: {
					      pie: {
					      	dataLabels: {
					      		format: '{point.name}: {point.percentage:.1f} %'
					      	},		      	
					        innerSize: '70%'
					      }
					    },
					    series: this.state.series
				  	});
				}
				
			

Since we need to render the chart soon after the Graph.js component is inserted into the DOM tree, we will be invoking the highChartsRender() function inside componentDidMount().

				
				  componentDidMount() {
				    this.highChartsRender();
				  }
				
			

Here is the full code.

				
				import React from 'react';
				import Highcharts from 'highcharts';

				class Donut extends React.Component {
				    constructor(props) {
				        super(props);  
				        this.state = {
				            series: [{
				                name: 'Gases',
				                data: [
				                    {
				                      name: 'Argon',
				                      y: 0.9,
				                      color: '#3498db'
				                    },
				                    {
				                      name: 'Nitrogen',
				                      y: 78.1,
				                      color: '#9b59b6'
				                    },
				                    {
				                      name: 'Oxygen',
				                      y: 20.9,
				                      color: '#2ecc71'
				                    },
				                    {
				                      name: 'Trace Gases',
				                      y: 0.1,
				                      color: '#f1c40f'
				                    }
				                ]
				            }]
				        }
				    }

				    highChartsRender() {
				        Highcharts.chart({
				            chart: {
				              type: 'pie',
				              renderTo: 'atmospheric-composition'
				            },
				            title: {
				              verticalAlign: 'middle',
				              floating: true,
				              text: 'Earth\'s Atmospheric Composition',
				              style: {
				                fontSize: '10px',
				              }
				            },
				            plotOptions: {
				              pie: {
				                dataLabels: {
				                    format: '{point.name}: {point.percentage:.1f} %'
				                },
				                innerSize: '70%'
				              }
				            },
				            series: this.state.series
				        });
				    }

				    componentDidMount() {
				        this.highChartsRender();
				    }

				   	render() {
				       	return (
				            <div id="atmospheric-composition">
				            </div>
				       	);
				   	}
				}

				export default Donut;

				
			

Import the Graph.js component inside your index.js file.

				
				import Graph from './graph';
				
			

And finally, render the imported component.

				
				ReactDOM.render(<Graph/>, document.getElementById('root'));
				
			

We get our donut chart as below.

reactjs highcharts donut A donut/doughnut chart generated by Highcharts