Implementing Highcharts library in a React application

Aashish Kasma|3/6/2023, UTC|5 MIN READ|
Play
//Implementing Highcharts library in a React application

Share

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

Aashish Kasma

Co-founder & CTO

Looking for

Development

Solutions?

Lets Discuss

Why Lucent...

innovatio

Learning

Learning comes not only with training but it comes as we facilitate the learning of the organization as well as individuals and the clients continuously refurbishing ourselves.

innovatio

Innovation

We believe in Innovation and have started our company based on that concept. When you don't transform you become stagnant.
Innovation arrow Transformation
arrow Growth.

innovatio

Team Work

We work efficiently as a team. We self-monitor. We deliver results efficiently with the help of multiple perspectives and skill sets. We form strong working relationships as we communicate well with each other.

Lucent innovation
We are a family filled with talented experts that help global brands, enterprises, mid-size businesses or even startups with innovative solutions.
Newsletter
Accelerate your tech projects with us. Get in touch with us.
Follow us
facebooklinkedinyoutubeinstagramtwitter
lucent innnovation: cltuch

Lucent Innovation, © 2023. All rights reserved.Privacy policyDMCA compliant image