Example shows Angular Multi-Series Waterfall Chart in which two waterfall dataseries are compared to understand their cumulative effect of positive and negative values to its initial values.
/* app.component.ts */ import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterOutlet } from '@angular/router'; import { CanvasJSAngularChartsModule } from '@canvasjs/angular-charts'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule, RouterOutlet, CanvasJSAngularChartsModule], templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { chartOptions = { theme: "light2", animationEnabled: true, title:{ text: "Income Comparsion of 2 Products" }, axisX:{ labelFontSize: 12, labelMaxWidth: 70 }, axisY: { prefix: "$" }, toolTip: { shared: true }, data: [ { type: "waterfall", yValueFormatString: "$#,##0", name: "Product A", showInLegend: true, indexLabelFontColor: "black", indexLabelOrientation: "vertical", dataPoints: [ { label: "Net Revenue", y: 220631, indexLabel: "{y}"}, { label: "Inventory", y: -95000 }, { label: "Merchandise", y: -18900 }, { label: "Other Sales Cost", y: -10990 }, { label: "Gross Income", isIntermediateSum: true, color: "#C7C7C7", indexLabel: "{y}" }, { label: "Staff", y: -24500 }, { label: "Marketing", y: -8000 }, { label: "Other Facilities", y: -25100 }, { label: "Operating Income", isCumulativeSum: true, color: "#C7C7C7" }, { label: "Taxes", y: -3500 }, { label: "Net Income", isCumulativeSum: true, indexLabel: "{y}"} ] }, { type: "waterfall", yValueFormatString: "$#,##0", name: "Product B", showInLegend: true, indexLabelFontColor: "black", indexLabelOrientation: "vertical", risingColor: "#81C784", color: "#81C784", fallingColor: "#E57373", dataPoints: [ { label: "Net Revenue", y: 176504,indexLabel: "{y}" }, { label: "Inventory", y: -76000 }, { label: "Merchandise", y: -15120 }, { label: "Other Sales Cost", y: -8792 }, { label: "Gross Income", isIntermediateSum: true, color: "#E0E0E0", indexLabel: "{y}" }, { label: "Staff", y: -19600 }, { label: "Marketing", y: -6400 }, { label: "Other Facilities", y: -20080 }, { label: "Operating Income", isCumulativeSum: true, color: "#E0E0E0" }, { label: "Taxes", y: -2800 }, { label: "Net Income", isCumulativeSum: true, indexLabel: "{y}" } ] } ] } }
<div> <canvasjs-chart [options]="chartOptions" [styles]="{width: '100%', height:'360px'}"></canvasjs-chart> </div>
You can hide / unhide dataseries by clicking on legend items. To show dataseries in the legend, you can set showInLegend to true or false. Other common customization includes color, indexLabelOrientation, lineColor etc.