How To Use Highcharts With React With An Example

In this article, You are going to learn how to use Highcharts with React with an example.

Highcharts is one of the best javascript charting engines which helps you to visualize the data in a much more understandable way. This is a very vast library where you have different visual designs like Line Charts, Area Charts, Bar Charts, Pie Charts and many more.

In this article, I am going to give you a basic understanding of how we can use Highcharts in react applications.

Let’s start our demo.

I am create-react-app for this demo. So let’s create our project

npx create-react-app react-highcharts-demo

We have created our demo project with the name react-highcharts-demo. Let’s add highcharts and its related librarires to the project.

Here we need to two libraries

1. highcharts
2. highcharts-react-official(official highcharts package for react)

Let’s install those libraries

npm install highcharts highcharts-react-official --save

We have installed highchart libraries to our project. Now update App.js file with the following code.

import React from 'react'
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'

const options = {
  title: {
    text: 'My chart'
  },
  series: [{
    data: [1, 10, 3, 10]
  }]
}

const App = () => <div>
  <HighchartsReact
    highcharts={Highcharts}
    options={options}
  />
</div>

export default App;

If you see the above code, we have imported Highcharts and HighChartsReact components from libraries. We have rendered component with two mandatory properties.

1. options – This is a configuration object for highcharts.
2. highcharts – This is an instance of highcharts we need to pass to our component. If It is not passed, our component will try to get the Highcharts from the window.

This is what you see as output.

This is a very basic example on how to use highcharts in react applications. You can learn more it from highcharts-react docs and Highcharts documentation.