How to Create Sankey Diagram in React with Google Charts

Last updated on: by Digamber

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

Ordinarily, this much we know, but do you know how to create a Sankey chart in React application.

If your answer is no, then this tutorial is exclusively for you. In this guide, we will show you how to create a Sankey diagram in React app step by step.

We will use React Google chart library to build the Sankey chart. Also, we will address how to depict static data in Sankey diagrams in React application.

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

Generate React App

If you don’t have the React project ready, then worry not. The given below command will help you generate a brand new React app on your machine.

You can use create-react-app and npx to build your first React project.

npx create-react-app chart-demo

Now, step into the app folder.

cd chart-demo

Install Google Charts Package

Google charts services can be used in React environment, there is a separate library available for React.

Here is the command that you have to type and execute from the terminal window to add the React Google charts package.

# npm
npm install react-google-charts
# yarn
yarn add react-google-charts

Add Bootstrap Plugin

In this step, we are adding the Bootstrap plugin in React.

However, this package is not mandatory; we are propelling this package in our React project only to cut the time we will spend on UI creation.

npm install bootstrap

Bootstrap library has been added to React, but that’s not all.

You have to import the bootstrap CSS in App.js file. In this way, bootstrap UI is available throughout the React app.

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

Create Sankey Diagram Component

This is the most significant step of this tutorial, in the below code example we will show you how to build the Sankey diagram or chart in React.

First, you need to create the `components` directory, then also create SnakeyChart.js file.

As soon as you complete the formalities, make sure to add the given code in the new chart component file.

Update components/SnakeyChart.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

Update App Js

In React, the main component is the App js file, if you want to show the Sankey diagram in React, register the new Sankey component in App.js file.

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

Start React App

We have completed everything related to this tutorial.

Ultimately, the time has come for running the React app and checking the chart on the browser.

npm start

How to Create Sankey Diagram in React with Google Charts

Conclusion

Google charts offer a wide array of charts and diagrams if you are a developer and don’t know how to create charts quickly. Fret not; Google’s extensive collection of charts API may solve your tedious problem within seconds.

In this tutorial, we tried to explain how to create the Sankey diagram in React using the React Google chart package. We believe this guide will help you in developing a new type of chart in React.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.