How to implement a column chart in React

Today we’ll show you how to implement a column chart in React using Highcharts. There are several npm react packages available to create a chart in a web application but we will use the Highcharts JS library to draw a chart in simple steps.

Let’s take a sample example to create a column chart using Highcharts in ReactJS with minimum configuration.

Implement a column chart in React

1. Create a react application
2. Add npm dependency
3. Create a column chart
4. Output

1. Create a react application

Let’s create a startup react application using the `create-react-app` package. Run the following command to create a react app.

npx create-react-app column-chart-react

2. Add npm dependency

As discussed, we will use the Highcharts to implement a column chart. Run the following command to add the dependency in react app.

npm i highcharts

3. Create a column chart

Now, we will use the `chart` method of the highcharts with minimum configuration to create a column chart. We will use the following options to create a chart.

{
  chart: {
    type: 'column'
  }, // type of the chart
  title: {
    text: 'Column Chart Title'
  }, // title of the chart
  subtitle: {
    text: 'Lorem Ipsum is simply dummy text'
  }, // subtitle of the chart
  xAxis: {
    categories: [
      'X1',
      'X2',
      'X3',
      'X4',
      'X5'
    ], // the categories of the X Axis
    crosshair: true
  },
  yAxis: {
    min: 0, // minimum value of the Y Axis
    title: {
      text: 'Y Axis Title'
    } // the title of the Y Axis
  },
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span>',
    pointFormat: '' +
      '',
    footerFormat: '<table><tbody><tr><td style="color:{series.color};padding:0">{series.name}: </td><td style="padding:0"><b>{point.y}</b></td></tr></tbody></table>',
    shared: true,
    useHTML: true
  }, // tooltip appears when hovering over a point
  credits: {
    enabled: false
  },
  series: dataSource // set of the data
}

Check out this link for more information about the options.

Let’s assume that we are receiving the data source from the API response. To mimic the scenario, we will use the `setTimeout` method to set the `dataSource` after 2 seconds.

App.js

import React, { useEffect, useRef, useState } from 'react';
import Highcharts from 'highcharts';

function App() {
  const refContainer = useRef(null);
  const [dataSource, setDataSource] = useState([]);

  useEffect(() => {
    const chart = Highcharts.chart(refContainer.current, {
      chart: {
        type: 'column'
      }, // type of the chart
      title: {
        text: 'Column Chart Title'
      }, // title of the chart
      subtitle: {
        text: 'Lorem Ipsum is simply dummy text'
      }, // subtitle of the chart
      xAxis: {
        categories: [
          'X1',
          'X2',
          'X3',
          'X4',
          'X5'
        ], // the categories of the X Axis
        crosshair: true
      },
      yAxis: {
        min: 0, // minimum value of the Y Axis
        title: {
          text: 'Y Axis Title'
        } // the title of the Y Axis
      },
      tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span>',
        pointFormat: '' +
          '',
        footerFormat: '<table><tbody><tr><td style="color:{series.color};padding:0">{series.name}: </td><td style="padding:0"><b>{point.y}</b></td></tr></tbody></table>',
        shared: true,
        useHTML: true
      }, // tooltip appears when hovering over a point
      credits: {
        enabled: false
      },
      series: dataSource // set of the data
    });

    if (dataSource.length > 0) {
      chart.hideLoading();
    }
    else {
      chart.showLoading();
    }

  }, [dataSource]);

  useEffect(() => {
    setTimeout(() => {
      setDataSource([{
        name: 'Japan',
        data: [50, 72, 88, 92, 34]
      }, {
        name: 'Germany',
        data: [84, 79, 99, 94, 66]
      }, {
        name: 'London',
        data: [49, 39, 47, 40, 42]
      }, {
        name: 'Canada',
        data: [43, 34, 77, 35, 53]
      }]);
    }, 2000);
  }, []);

  return (
    <div class="App">
      <h3>Column chart in React - <a href="http://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3>
      <div ref={refContainer}>
    </div>
  );
}

export default App;
</div>

Here, we used the refs to load the chart in div element.

4. Output

Run the application and check the output in the browser.

Output - How to implement a column chart in React - Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

Github Repository StackBlitz Project