How to implement a line chart in React

In this article, we will explain to you how to implement a line chart in React. We'll use the Highcharts package to build a line chart with ReactJS, just as we did in the previous post.

Checkout more articles on ReactJS

Demo Application

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

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

1. Create a react application

First, we'll use the `create-react-app` npm package to construct a react application. To build a react application, use the command below.

npx create-react-app line-chart-react

2. Add highcharts npm package

We'll use the Highcharts npm package to make a line chart in this step. To add the dependency in the application, use the following command.

npm i highcharts

3. Create a line chart

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

{
  chart: {
    type: 'line'
  }, // type of the chart
  title: {
    text: 'Line Chart Title'
  }, // title of the chart
  subtitle: {
    text: 'Lorem Ipsum is simply dummy text'
  }, // subtitle of the chart
  yAxis: {
    title: {
      text: 'Y Axis Title'
    }, // the title of the Y Axis
  },
  xAxis: {
    min: 0.4,
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    title: {
      text: 'X Axis Title'
    } // the title of the X Axis
  },
  tooltip: {
    headerFormat: '<span style="font-size:13px;font-weight:bold;">{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 pretend we're getting the data source through the API response. To simulate the scenario, we'll set the `dataSource` after 2 seconds using the `setTimeout` function.

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: 'line'
      }, // type of the chart
      title: {
        text: 'Line Chart Title'
      }, // title of the chart
      subtitle: {
        text: 'Lorem Ipsum is simply dummy text'
      }, // subtitle of the chart
      yAxis: {
        title: {
          text: 'Y Axis Title'
        }, // the title of the Y Axis
      },
      xAxis: {
        min: 0.4,
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        title: {
          text: 'X Axis Title'
        } // the title of the X Axis
      },
      tooltip: {
        headerFormat: '<span style="font-size:13px;font-weight:bold;">{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: [10, 14, 18, 61, 65, 72, 74, 79, 87, 89, 92, 93]
      }, {
        name: 'Germany',
        data: [3, 9, 13, 20, 25, 38, 40, 53, 55, 69, 70, 78]
      }, {
        name: 'London',
        data: [9, 15, 31, 50, 56, 60, 64, 67, 79, 82, 95, 97]
      }, {
        name: 'Canada',
        data: [4, 12, 22, 36, 42, 46, 58, 63, 71, 82, 84, 86]
      }]);
    }, 2000);
  }, []);

  return (
    <div class="App">
      <h3>Line 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>

The chart was loaded in the div element using the `refs`.

4. Output

Run the application and check the output in the browser.

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

Demo & Source Code

Github Repository StackBlitz Project