React Tutorial- How To Create Sankey Diagram In React With Google Charts

 

How To Create Sankey Diagram In React Js With Google Chart

Friends, in this tutorial, we will learn how to create a Sankey Diagram in React Js app step by step.

We will be using React Google Chart library to build the Sankey Chart. Also, we will get to know how to depict static data in Sankey diagrams in React applications.

Sankey Diagrams are best used for showing a flow from one set of values to another. The width of the arrows is proportional to the flow rate in Sankey Diagrams.

 

React JS Sankey Diagram Example

 

Step 1- Generate React App

Step 2- Install Google Charts Package

Step 3- Add Bootstrap Plugin

Step 4- Create Sankey Diagram Component

Step 5- Update App Js

Step 6- Start React App

Let’s now learn in detail:

Step 1- Generate React App

The first step will be started by installing a new React project by executing the npx create-react app.

It will generate a new React project:

npx create-react-app chart-demo

Further, we need to enter into the app folder:

cd chart-demo

Step 2- Install Google Charts Package

Now, the next step is to install the React Google Charts plugin which would help in building a chart component.

We have to type the below-given command in order to add the React Google Charts package:

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

 

Step 3- Incorporate Bootstrap Plugin

Even if you are a novice, then also you can easily install the Bootstrap library in React.

It should also be remembered that this package is not compulsory. However, this package helps in cutting the time that we spend on UI creation:

npm install bootstrap

 

after we have added the bootstrap library, further we have to import the bootstrap CSS in App.js file which makes the bootstrap UI available throughout the React app:

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

 

Step 4- Create Sankey Diagram Component

This is the most significant step of this tutorial. The below code would show how to build the Sankey Diagram or chart in React app.

Firstly, we need to create the ‘components’ directory after which we create SankeyChart.js file.

Afterward, we will add the following code in the new chart component file.

Update components/SankeyChart.js file:

import React, { Component } from 'react'
import Chart from 'react-google-charts'
const sankeyData = [
  ['From', 'To', 'Weight'],
  ['A', 'X', 5],
  ['A', 'Y', 7],
  ['A', 'Z', 6],
  ['B', 'X', 2],
  ['B', 'Y', 9],
  ['B', 'Z', 4],
]
class SankeyChart extends Component {
  render() {
    return (
      <div className="container mt-5">
        <h2>React Simple Sankey Chart Example</h2>
        <Chart
          width={700}
          height={'350px'}
          chartType="Sankey"
          loader={<div>Loading Chart</div>}
          data={sankeyData}
          rootProps={{ 'data-testid': '1' }}
        />
      </div>
    )
  }
}
export default SankeyChart

Step 5- Update App Js

In the fifth step, we have to open the primary App.js. In this file, we will have to register the new Sankey component:

import React from 'react'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import SankeyChart from './components/SankeyChart'
function App() {
  return (
    <div className="App">
      <SankeyChart />
    </div>
  )
}
export default App

 

Step 6- Start React App

Since we have reached the end of this guide, we have to invoke this React app by using the following command for running the application:

npm start

 

Conclusion

Friends, hope that you have found this tutorial quite easy and simple to execute in which we have learned step by step how to build a Sankey Diagram in React using the React Google Chart package.

 

Thanks