Angular Waterfall Charts

Download Angular Chart Samples

Example shows Angular Waterfall Chart which helps in understanding the cumulative effect of positive and negative values to its initial value.

/* app.component.ts */
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: "light1", // "light1", "ligh2", "dark1", "dark2"
        animationEnabled: true,
        title: {
          text: "Company Finance Report"
        },
        axisY: {
          title: "Amount (in USD)",
          prefix: "$",
          suffix: "K",
          lineThickness: 0,
          includeZero: true
        },
        data: [{
          type: "waterfall",
          yValueFormatString: "$#,##0K",
          dataPoints: [
            { label: "Sales",  y: 3273 },
            { label: "Service", y: 1623 },
            { label: "Total Revenue", isIntermediateSum: true},
            { label: "Research", y: -250 },
            { label: "Marketing",  y: -210 },
            { label: "Salaries", y: -432 },
            { label: "Operating Income", isCumulativeSum: true },
            { label: "Taxes",  y: -264 },
            { label: "Net Income",  isCumulativeSum: true }
          ]
        }]
      }	
}                              
<div>
    <canvasjs-chart [options]="chartOptions" [styles]="{width: '100%', height:'360px'}"></canvasjs-chart>    
</div>

Chart Customizations

You can change the color of column representing positive and negative values in waterfall chart using risingColor and fallingColor property respectively. You can also customize the color of any column. In the above example, color of cumulative has been customized by setting color property in datapoint level. Other commonly customization option includes lineColor, lineThickness, showInLegend, etc.

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