Example shows Angular Doughnut Chart with index / data labels showing information about each slice.
/* 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 = { animationEnabled: true, title:{ text: "Project Cost Breakdown" }, data: [{ type: "doughnut", yValueFormatString: "#,###.##'%'", indexLabel: "{name}", dataPoints: [ { y: 28, name: "Labour" }, { y: 10, name: "Legal" }, { y: 20, name: "Production" }, { y: 15, name: "License" }, { y: 23, name: "Facilities" }, { y: 17, name: "Taxes" }, { y: 12, name: "Insurance" } ] }] } }
<div> <canvasjs-chart [options]="chartOptions" [styles]="{width: '100%', height:'360px'}"></canvasjs-chart> </div>
Indexlabel can be placed either inside / outside the slice using indexLabelPlacement. It's color & line-color can be changed using indexLabelFontColor & indexLabelLineColor properties.
Note For step by step instructions, follow our Angular Integration Tutorial