Example shows an Angular Chart with Drilldown functionality. Drilldown feature lets you instantly shift from an overview of data to a more detailed view which lets you analyze data in more detail. Drilldown functionality can be implemented with all the chart types including pie, doughnut, column, line, area, etc.
/* app.component.ts */ import { Component } from '@angular/core'; export interface data { [key: string]: any; } @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements data{ chart: any; isButtonVisible = false; visitorsChartDrilldownHandler = (e: any) => { this.chart.options = this.visitorsDrilldownedChartOptions; this.chart.options.data = this.options[e.dataPoint.name]; this.chart.options.title = { text: e.dataPoint.name } this.chart.render(); this.isButtonVisible = true; } visitorsDrilldownedChartOptions = { animationEnabled: true, theme: "light2", axisY: { gridThickness: 0, lineThickness: 1 }, data: [] }; newVSReturningVisitorsOptions = { animationEnabled: true, theme: "light2", title: { text: "New vs Returning Visitors" }, subtitles: [{ text: "Click on Any Segment to Drilldown", backgroundColor: "#2eacd1", fontSize: 16, fontColor: "white", padding: 5 }], data: [] }; options: data = { "New vs Returning Visitors": [{ type: "pie", name: "New vs Returning Visitors", startAngle: 90, cursor: "pointer", explodeOnClick: false, showInLegend: true, legendMarkerType: "square", click: this.visitorsChartDrilldownHandler, indexLabelPlacement: "inside", indexLabelFontColor: "white", dataPoints: [ { y: 551160, name: "New Visitors", color: "#058dc7", indexLabel: "62.56%" }, { y: 329840, name: "Returning Visitors", color: "#50b432", indexLabel: "37.44%" } ] }], "New Visitors": [{ color: "#058dc7", name: "New Visitors", type: "column", dataPoints: [ { label: "Jan", y: 42600 }, { label: "Feb", y: 44960 }, { label: "Mar", y: 46160 }, { label: "Apr", y: 48240 }, { label: "May", y: 48200 }, { label: "Jun", y: 49600 }, { label: "Jul", y: 51560 }, { label: "Aug", y: 49280 }, { label: "Sep", y: 46800 }, { label: "Oct", y: 57720 }, { label: "Nov", y: 59840 }, { label: "Dec", y: 54400 } ] }], "Returning Visitors": [{ color: "#50b432", name: "Returning Visitors", type: "column", dataPoints: [ { label: "Jan", y: 21800 }, { label: "Feb", y: 25040 }, { label: "Mar", y: 23840 }, { label: "Apr", y: 24760 }, { label: "May", y: 25800 }, { label: "Jun", y: 26400 }, { label: "Jul", y: 27440 }, { label: "Aug", y: 29720 }, { label: "Sep", y: 29200 }, { label: "Oct", y: 31280 }, { label: "Nov", y: 33160 }, { label: "Dec", y: 31400 } ] }] }; handleClick(event: Event) { this.chart.options = this.newVSReturningVisitorsOptions; this.chart.options.data = this.options["New vs Returning Visitors"]; this.chart.render(); this.isButtonVisible = false; } getChartInstance(chart: object) { this.chart = chart; this.chart.options = this.newVSReturningVisitorsOptions; this.chart.options.data = this.options["New vs Returning Visitors"]; this.chart.render(); } }
/* app.module.ts */ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { CanvasJSAngularChartsModule } from '@canvasjs/angular-charts'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, CanvasJSAngularChartsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
/* app.component.html */ <div> <canvasjs-chart [options]="chartOptions" (chartInstance)="getChartInstance($event)" [styles]="{width: '100%', height: '360px'}"></canvasjs-chart> <button [ngClass]="'backButton'" *ngIf="this.isButtonVisible" (click)="handleClick($event)">Back</button> </div>
/* app.component.css */ .backButton { border-radius: 4px; padding: 8px; border: none; font-size: 16px; background-color: #2eacd1; color: white; position: absolute; top: 10px; right: 10px; cursor: pointer; }
Setting click handler at dataseries level will set event for all the datapoints. You can also control the outer and inner radius of doughnut chart using radius and innerRadius respectively.