HighCharts Implementation in React Project

3 min readJul 24, 2020

A few weeks before I write this article, I got a task to build a project to visualize data with charts. There are 2 libraries to choose to:

d3js
Highcharts

So I was doing some research, read those two documentations how to use it in my React project. Long story short, I chose to use Highcharts in my project.

Therefore, I found some problems when using Highcharts and was a bit hard to find the solution to my problems. I won’t write straight to the problem that I had, I will start from the installation because I want to write this article as comprehensive as possible.

First thing first, we have to install these 2 packages into our React project:

Using NPM:

npm install highcharts highcharts-react-official

Using Yarn:

yarn add highcharts highcharts-react-official

Implementation in My Component

Import all the dependencies

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

2. Setup chart configuration

const options = {
  title: {
    text: 'Our very first chart'
  },
  series: [{
    data: [1, 2, 3]
  }]
}

3. Create our component

export default function OurChart() {
  return (
    <>
      <HighchartsReact
        highcharts={Highcharts}
	options={options}
      />
    </>
  )
}

4. Chart Visualization

It will visualize our data in a default Line chart. If we want to use Bar chart, we can just simply add a property in our chart configuration:

chart: {
  type: 'bar'
}

Then our chart will look like this:

It’s a bit confusing for me when I define a “bar” type and it showed a horizontal bar, not the vertical one. Then I knew that there is also a type to show our data in a vertical bar with “column” type. Voila! our data would be visualized like this:

Then here comes the problem

It looked easy if we just need a Line, Bar, and/or Column types of chart. However, we will get an error if we need another type e.g. Heatmap, Boxplot, Scatterplot, and so on. We can not just simply write it like this:

chart: {
  type: 'heatmap'
}

Believe me, you will get an error and it was time-consuming for me to find the root cause of the error. Then I found the solution after I had been trying many solutions on the internet.

We just need to import the modules from highcharts folder. For example, we want to show the heatmap chart. We can write these 2 lines of code to add more dependencies in our component:

import HighchartsHeatMap from "highcharts/modules/heatmap";

HighchartsHeatMap(Highcharts);

Then here comes another problem

Well, we learn something new everyday

I thought things will get easier when I can solve the heatmap modules problem. But no! There was another problem when I wanted to import the boxplot modules. I can not find any module called ‘boxplot’. Then I stumbled upon a forum where they talked about highcharts-more package and I found it has been deprecated.

But thankfully, they left a note that we should import the modules from the highcharts folder. So I tried to write the same as when I used the heatmap chart, but I imported highcharts-more at that time. Here’s what I wrote in my file:

import HighchartsBoxPlot from 'highcharts/highcharts-more';

HighchartsBoxPlot(Highcharts);

And the rest of the file remains the same just when we write standard bar chart.

I also use the same highcharts-more module when I wanted to use scatterplot chart.

HighCharts Implementation in React Project

Implementation in My Component

Then here comes the problem

Then here comes another problem

References

Written by Mahdi Haris