Implement Highcharts library in a React application

Highcharts is a popular JavaScript library for creating interactive charts and graphs. Here's how you can use it in a React application:

Installing the Highcharts React Wrapper:

The first step is to install the Highcharts React wrapper, which allows you to use Highcharts in a React component. You can install it using npm by running the following command:

npm install highcharts-react-official

Importing Highcharts and the Wrapper in Your Component:

Once you have installed the wrapper, you can import Highcharts and the Highcharts React wrapper in your component like this:

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

Creating a Simple Bar Chart:

Here's an example of how to create a simple bar chart in React using Highcharts:

import React, { useState } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

function App() {
  const [options, setOptions] = useState({
    chart: {
      type: 'bar'
    },
    title: {
      text: 'Fruit Consumption'
    },
    xAxis: {
      categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
      title: {
        text: 'Fruit eaten'
      }
    },
    series: [
      {
        name: 'Jane',
        data: [1, 0, 4]
      },
      {
        name: 'John',
        data: [5, 7, 3]
      }
    ]
  });

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

export default App;

You can also read more charts using High Charts

Implementing Highcharts library in a React application

I hope this will help you understand High Charts Library

Blog

Implement Highcharts library in a React application

Aashish Kasma

Join Our Newsletter. No Spam, Only the good stuff.

Related