React Waterfall Charts & Graphs

Download React Chart Samples

React Waterfall Charts, also known as Bridge Charts, are used to visualize the cumulative effect of positive & negative changes to an initial value and are mostly used as Financial Charts. Below example shows a React Waterfall Chart along with source code that you can try running locally.

/* App.js */
import React, { Component } from 'react';
import CanvasJSReact from '@canvasjs/react-charts';
//var CanvasJSReact = require('@canvasjs/react-charts');

var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSChart = CanvasJSReact.CanvasJSChart;
class App extends Component {
	render() {
		const options = {
			animationEnabled: true,
			exportEnabled: true,
			title:{
				text: "Monthly Sales of ACME"
			},
			axisY: {
				valueFormatString: "$#,##0,.K",
				includeZero: true
			},
			data: [{
				type: "waterfall",
				yValueFormatString: "$#,##0,.00K",
				indexLabelOrientation: "vertical",
				dataPoints: [
					{ label: "Initial", y: 7655 },
					{ label: "Jan", y: 5312 },
					{ label: "Feb", y: 4065 },
					{ label: "Mar", y: -2564 },
					{ label: "Apr", y: 7004},
					{ label: "May", y: 5324 },
					{ label: "Jun", y: -11543 },
					{ label: "July", y: 4008 },
					{ label: "Aug", y: 5673 },
					{ label: "Sep", y: -6997 },
					{ label: "Oct", y: 6654 },
					{ label: "Nov", y: -10943 },
					{ label: "Dec", y: 4324 },
					{ label: "Final", isCumulativeSum: true, indexLabel: "{y}" }
				]
			}]
		}
		return (
		<div>
			<CanvasJSChart options = {options}
				/* onRef={ref => this.chart = ref} */
			/>
			{/*You can get reference to the chart instance as shown above using onRef. This allows you to access all chart properties and methods*/}
		</div>
		);
	}
}
export default App;

Chart Customizations

In the above waterfall chart, isCumulativeSum of a data point is set to true to automatically calculate the sum of the data points since the start of the data series. You can customize waterfall chart by using properties like risingColor, fallingColor etc.

Note   For step by step instructions, follow our React Integration Tutorial