How to implement a bar chart in React

In this article, we will explain to you how to implement a bar chart in React. As used in the previous article, we will use the Highcharts package to create bar chart using ReactJS.

Let’s take a simple example to create a bar chart with minimum configuration.

Implement a bar chart in React

1. Create a react application
2. Add highcharts npm package
3. Create a bar chart
4. Output

1. Create a react application

First of all, we will create a react startup application using `create-react-app` npm package. Run the following command to create a react application.

npx create-react-app bar-chart-react

2. Add highcharts npm package

In the next step, we will install the Highcharts npm package to implement a bar chart. Run the following command to add the dependency in the application.

npm i highcharts

3. Create a bar chart

Now we will use the `chart` method of the highcharts package with minimum configuration to create a bar chart. Use the following options to create a chart.

{
  chart: {
    type: 'bar'
  }, // type of the chart
  title: {
    text: 'Bar Chart Title'
  }, // title of the chart
  subtitle: {
    text: 'Lorem Ipsum is simply dummy text'
  }, // subtitle of the chart
  xAxis: {
    categories: [
      'Y1',
      'Y2',
      'Y3',
      'Y4',
      'Y5'
    ], // the categories of the Y Axis
    title: {
      text: 'Y Axis Title'
    }, // the title of the Y Axis
    crosshair: true
  },
  yAxis: {
    min: 0, // minimum value of the X Axis
    title: {
      text: 'X Axis Title'
    } // the title of the X 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
}

Here, X axis and Y axis values are slightly different from the Column Chart. Check out this link for more information about the options.

Now 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: 'bar'
      }, // type of the chart
      title: {
        text: 'Bar Chart Title'
      }, // title of the chart
      subtitle: {
        text: 'Lorem Ipsum is simply dummy text'
      }, // subtitle of the chart
      xAxis: {
        categories: [
          'Y1',
          'Y2',
          'Y3',
          'Y4',
          'Y5'
        ], // the categories of the Y Axis
        title: {
          text: 'Y Axis Title'
        }, // the title of the Y Axis
        crosshair: true
      },
      yAxis: {
        min: 0, // minimum value of the X Axis
        title: {
          text: 'X Axis Title'
        } // the title of the X 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>Bar 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 bar chart in React - Clue Mediator

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

Demo & Source Code

Github Repository StackBlitz Project