React Multi Series Timeline Chart

ApexCharts is a modern JavaScript charting library that helps developers create beautiful and interactive visualizations for web pages. It is open-source and free to use in commercial applications.

In this tutorial, we 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. To create a multi-series timeline chart using React Apexcharts, follow these steps

Step 1: Create React Project

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

Step 2: 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

Step 3: 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

Step 4: 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;

Step 5: 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;

Step 6: 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

In this tutorial you learned how to plot a multi-timeline series chart in React js using the Apexcharts module.

Thanks for reading !!!

#react