Angular Waterfall Chart with Index / Data Labels

Download Angular Chart Samples

Example shows Angular Waterfall Chart with index / data labels shown for every datapoint.

/* app.component.ts */
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  chartOptions = {
    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" }
      ]
    }]
  }	
}                              
/* app.module.ts */
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

import * as CanvasJSAngularChart from '../assets/canvasjs.angular.component';
var CanvasJSChart = CanvasJSAngularChart.CanvasJSChart;

@NgModule({
  declarations: [
    AppComponent,
    CanvasJSChart
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }                        
<div>
    <canvasjs-chart [options]="chartOptions" [styles]="{width: '100%', height:'360px'}"></canvasjs-chart>    
</div>

Chart Customizations

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. Other customization option includes indexLabelTextAlign, indexLabelFormatter, indexLabelPlacement etc.

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