Example shows React Waterfall Chart with indexlabels shown for every datapoint.
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 = { theme: "light2", title: { text: "Company Sales Report" }, animationEnabled: true, axisX: { interval: 1 }, axisY: { valueFormatString: "u20B9#,##0,.L", title: "Amount (in INR)" }, data: [{ type: "waterfall", yValueFormatString: "u20B9#,##0,.00L", indexLabel: "{y}", indexLabelPlacement: "inside", risingColor: "#4CAF50", fallingColor: "#F44336", dataPoints: [ { label: "Jan", y: 8312 }, { label: "Feb", y: 5065 }, { label: "Mar", y: -2564 }, { label: "Apr", y: 7004 }, { label: "May", y: 4324 }, { label: "Jun", y: -3543 }, { label: "July", y: 4008 }, { label: "Sep", y: -6997 }, { label: "Aug", y: 5673 }, { label: "Oct", y: 6654 }, { label: "Nov", y: -4943 }, { label: "Dec", y: 6324 }, { label: "Final", isCumulativeSum: true, indexLabel: "{y}", color: "#2196F3" } ] }] }; 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;
You can change the orientation of indexLabel using indexLabelOrientation property in case indexLabel of one datapoint overlaps with indexLabel of another datapoint. Color of indexlabel text can be customized using indexLabelFontColor property.
Note For step by step instructions, follow our React Integration Tutorial