React Apexcharts Multi Series Timeline Chart Tutorial

In this comprehensive guide, you will learn how to create multi series timeline chart component in React js with the help of a simple function component, Apexcharts, and Bootstrap packages.

ApexCharts is a profound yet free JavaScript charting library that allows web developers to develop interactive and responsive charts and graphs for their React web applications.

To integrate the multi series timeline chart in React, we will install and use Apexcharts and bootstrap modules.

We have enumerated certain steps that you have to follow step-by-step.

A timeline chart is a type of chart that is commonly used for tracking the progress of a project, schedule or timeline.

With the help of a horizontal bar, you can visualize or track the activity of every task.

The length of the bar shows the span of the task, and the bar’s position represents the beginning and ending dates.

How to Create Multi Series Timeline Chart using React Apexcharts

• Step 1: Create React Project
• Step 2: Install Apexcharts Package
• Step 3: Create New Component
• Step 4: Create Multi Series Timeline Chart
• Step 5: Update Main Entry
• Step 6: View App in Browser

Create React Project

Here is a basic way to set up a new React project:

First, Install Node.js; If you haven’t already, download and install Node.js from the official site: https://nodejs.org/en/.

Head over to command-prompt, add the below command onto the terminal and press enter to install the React project.

npx create-react-app my-react-app

Get into the application folder.

cd my-react-app

Install Apexcharts Package

In this step, you need to install the react Apexchart library and other important libraries that will help us to develop the chart component.

npm i react-apexcharts apexcharts bootstrap moment --legacy-peer-deps

Create New Component

Formulate the new components/ folder, then make the ApexMultiSeriesChart.js file.

Following code will create a simple new function component in React.

import React from 'react'
function ApexMultiSeriesChart() {
  return (
    <div></div>
  )
}
export default ApexMultiSeriesChart

Create Multi Series Timeline Chart

You need to populate the data into the function component and define the rangeBar property to the type value.

Update code in components/ApexMultiSeriesChart.js file.

import React from "react";
import Chart from "react-apexcharts";
import moment from "moment";
const data = {
  series: [
    {
      name: "Bob",
      data: [
        {
          x: "Design",
          y: [
            new Date("2019-03-05").getTime(),
            new Date("2019-03-08").getTime(),
          ],
        },
        {
          x: "Code",
          y: [
            new Date("2019-03-08").getTime(),
            new Date("2019-03-11").getTime(),
          ],
        },
        {
          x: "Test",
          y: [
            new Date("2019-03-11").getTime(),
            new Date("2019-03-16").getTime(),
          ],
        },
      ],
    },
    {
      name: "Joe",
      data: [
        {
          x: "Design",
          y: [
            new Date("2019-03-02").getTime(),
            new Date("2019-03-05").getTime(),
          ],
        },
        {
          x: "Code",
          y: [
            new Date("2019-03-06").getTime(),
            new Date("2019-03-09").getTime(),
          ],
        },
        {
          x: "Test",
          y: [
            new Date("2019-03-10").getTime(),
            new Date("2019-03-19").getTime(),
          ],
        },
      ],
    },
  ],
  options: {
    chart: {
      height: 350,
      type: "rangeBar",
    },
    plotOptions: {
      bar: {
        horizontal: true,
      },
    },
    dataLabels: {
      enabled: true,
      formatter: function (val) {
        var a = moment(val[0]);
        var b = moment(val[1]);
        var diff = b.diff(a, "days");
        return diff + (diff > 1 ? " days" : " day");
      },
    },
    fill: {
      type: "gradient",
      gradient: {
        shade: "light",
        type: "vertical",
        shadeIntensity: 0.25,
        gradientToColors: undefined,
        inverseColors: true,
        opacityFrom: 1,
        opacityTo: 1,
        stops: [50, 0, 100, 100],
      },
    },
    xaxis: {
      type: "datetime",
    },
    legend: {
      position: "top",
    },
  },
};
function ApexMultiSeriesChart() {
  return (
    <div>
      <Chart
        type="rangeBar"
        height={400}
        options={data.options}
        series={data.series}
      />
    </div>
  );
}
export default ApexMultiSeriesChart;

Update Main Entry

We have to update the App.js file by importing and adding the previously created component.

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ApexMultiSeriesChart from "./components/ApexMultiSeriesChart";
function App() {
  return (
    <div className="container mt-3">
      <h2 className="mb-3">React Apexcharts Timeline Chart Example</h2>
      <ApexMultiSeriesChart />
    </div>
  );
}
export default App;

View App in Browser

We are now eventually going to start the development server by invoking the following command.

npm start

Your react app will be served on:

http://localhost:3000

Conclusion

In this tutorial, we have discussed how to draw a multi timeline series chart in React js using the Apexcharts module.