Implementing Highcharts library in a React application

Highcharts is a well-known JavaScript library that enables the development of dynamic charts and graphs. Below is a guide on integrating Highcharts into your React project.

Install the Highcharts

To begin, you need to install the Highcharts React wrapper, which enables Highcharts to be used within a React component. You may utilize npm to install it by executing the subsequent command:

npm install highcharts
npm install highcharts-react-official

Import Highcharts and the Highcharts React wrapper

To import Highcharts and the Highcharts React wrapper into your component, follow these steps after installing the wrapper:

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

Creating a Simple Bar Chart:

Here's an example of creating a basic bar chart using the Highcharts library:

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

function BarChart() {
  const [options, setOptions] = useState({
    chart: {
      type: 'bar'
    },
    title: {
      text: 'Monthly Sales'
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
      title: {
        text: 'Revenue'
      }
    },
    series: [
      {
        name: 'Sales',
        data: [15000, 23000, 20000, 17000, 22000, 25000, 18000, 19000, 21000, 24000, 28000, 32000]
      }
    ]
  });

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

export default BarChart;

In this example, the useState hook is used to set the initial state of the chart options. The options object contains properties such as chart, title, xAxis, yAxis, and series, which define the chart's appearance and data. Finally, the HighchartsReact component is used to render the chart on the page.

Creating a Basic Line Chart:

Here's an example of creating a basic line chart using the Highcharts library:

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

function LineChart() {
  const [options, setOptions] = useState({
    chart: {
      type: 'line'
    },
    title: {
      text: 'Daily Temperatures'
    },
    xAxis: {
      categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
    },
    yAxis: {
      title: {
        text: 'Temperature (°C)'
      }
    },
    series: [
      {
        name: 'High',
        data: [5, 4, 6, 8, 7, 9, 10]
      },
      {
        name: 'Low',
        data: [2, 1, 3, 5, 4, 6, 7]
      }
    ]
  });

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

export default LineChart;

 

In this example, the useState hook is used to set the initial state of the chart options. The options object contains properties such as chart, title, xAxis, yAxis, and series, which define the chart's appearance and data. In this case, the series property contains two objects, each representing a line on the chart. Finally, the HighchartsReact component is used to render the chart on the page.

Creating a Simple Area Chart

Here's an example of creating an area chart using the Highcharts library:

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

function AreaChart() {
  const [options, setOptions] = useState({
    chart: {
      type: 'area'
    },
    title: {
      text: 'Sales by Region'
    },
    xAxis: {
      categories: ['Q1', 'Q2', 'Q3', 'Q4']
    },
    yAxis: {
      title: {
        text: 'Sales ($)'
      }
    },
    series: [
      {
        name: 'North America',
        data: [50000, 70000, 90000, 110000]
      },
      {
        name: 'Europe',
        data: [40000, 60000, 80000, 100000]
      },
      {
        name: 'Asia',
        data: [30000, 50000, 70000, 90000]
      }
    ]
  });

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

export default AreaChart;

 

 

In this example, the useState hook is used to set the initial state of the chart options. The options object contains properties such as chart, title, xAxis, yAxis, and series, which define the chart's appearance and data. In this case, the series property contains three objects, each representing a region's sales data. The type property of the chart object is set to 'area' to create an area chart. Finally, the HighchartsReact component is used to render the chart on the page. 

Also, read: React Performance Optimization: Enhance speed and user experience