A Simple And Interactive Node-based Flow Chart With React Flow

Category: React React Charts | June 30, 2021
Author: wbkd
Official Page: Go to website
Last Update: June 30, 2021
License: MIT


You might be interested in creating a simple but interactive node-based flow chart with React for your project. Then, React Flow can be the option for you because, this component gives the flexibility to implement custom node types with other components such as mini-map and graph controls.

How can I use it?

Step 1: First, you will need to install the component using NPM.

npm install react-flow-renderer

Step 2: Import the component.

import React from 'react';
import ReactFlow from 'react-flow-renderer';

Step 3: Now, we will write the code to create interactive node-based flow chart with React.

const elements = [
  { id: '1', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
  // you can also pass a React component as a label
  { id: '2', data: { label: <div>Node 2</div> }, position: { x: 100, y: 100 } },
  { id: 'e1-2', source: '1', target: '2', animated: true },
const BasicFlow = () => <ReactFlow elements={elements} />;

You might be interested in Animated Chart Component For React Native.