Highcharts and React

Introduction

React has drastically simplified front-end development and now it’s widely used, and for good reason. It’s a flexible and lightweight framework that’s easy to learn. Combining React with powerful libraries such as Highcharts is a perfect fit, given the power of data visualisation and React’s ease of use. This article covers how to integrate Highcharts data visualisation library with React, from building simple components to accessing the more advanced functionalities, as well as providing tips on testing your components.

Useful Links

API Reference: https://api.highcharts.com/highcharts/chart
Another Great Article: https://medium.com/@Mahdi_Haris/highcharts-implementation-in-react-project-2c09349a6329

Introduction to React and Highcharts integration

Highcharts (a pure JavaScript charting library with more chart types than you could shake a stick at) has been embedded easily into the application thanks to the modern CSS and JavaScript frameworks such as React. The charts are encapsulated in React components, so they’re easy to keep up to date and under control.

Building a basic Highcharts component in React

We’ll start by showing how to build a simple line chart using Highcharts in a React application. First, install the necessary packages as dependencies via npm: npm install highcharts react-highcharts –save.

Then, import these packages in to a React component and bootstrap a basic chart:

import React from ‘react’; 
import Highcharts from ‘highcharts’; 
import HighchartsReact from ‘highcharts-react-official’; 

const LineChart = () => { 

const options = { title: { text: ‘Simple Line Chart’ }, series: [{ name: ‘Sample’, data: [1, 2, 3, 4, 5] }] }; 

return <HighchartsReact highcharts={Highcharts} options={options} />;

} 

export default LineChart;

This little bit of code will render a simple line chart for you inside your React application.

Using Highcharts APIs in React for dynamic data visualization

With React’s state and lifecycle methods — think, as an example, of events such as mounting and unmounting (or, just as important, updating) — you can hook Highcharts APIs to dynamically create charts. For instance, if you were to get data from an API and plot it in the chart, your React code might look like this:

import React from ‘react’; 
import useEffect, useState from ‘react’; 
import Highcharts from ‘highcharts’; 
import HighchartsReact from ‘highcharts-react-official’; 

const DynamicChart = () => {  const [data, setData] = useState([]);  

useEffect(() => {  fetch("https://api.example.com/data").then(response => response.json()) .then(data => setData(data));  
}); 

const options = { series: [{ data }] }; return <HighchartsReact highcharts={Highcharts} options={options} />; }

export default DynamicChart;

And that would be it; your chart is now updated when new data comes in.

Testing Highcharts components in React applications

Testing is a vital component of any application; for the Highcharts integrated React components, you can use testing tools such as Jest and React Testing Library. Here is a basic test to determine whether your chart is being rendered as intended:
JSX tested components.

import React from ‘react’; 
import { render } from ‘@testing-library/react’; 
import LineChart from ‘./LineChart’; 

test(‘renders line chart’, () => {  

const { container } = render(<LineChart />);  
expect(container.querySelector(‘.highcharts-container’)).toBeInTheDocument(); 

}); 

Such tests maintain the integrity of your charts in an application.

Best practices for integrating Highcharts with React

It might be a bit verbose but, following recommended practices for integrating Highcharts with React will result in good performance and maintainability. Isolate chart configurations: Try to keep Highcharts configurations in separate files if possible, to make it easier to manage them latter.Use React hooks for dynamic data: It’s a good idea to use useEffect and useState hook to manage and render data in a dynamic way. Avoid unnecessary re-renders: Using React.memo is a common way to prevent unnecessary re-renders of the chart.Keep your theme consistent: It’s a good idea to keep your theme consistent across the application.

Conclusion

With React, you can enrich your Highcharts solutions with modern JavaScript features and create powerful data visualisations that adapt to the web page, settings and user behavior.