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>
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.