• Demos
    • JavaScript Charts
    • JavaScript StockCharts
  • Download
    • Download Chart
    • Download StockChart
  • Integrations
    • Front End Technology Samples
      • React Charts
      • Angular Charts
      • jQuery Charts
      • Dashboards
    • Server Side Technology Samples
      • PHP Charts
      • ASP.NET MVC Charts
      • Spring MVC Charts
      • JSP Charts
  • License
  • Blog
  • Docs
    • Chart Documentation
    • StockChart Documentation
  • Support Forum
    • Chart Support
    • StockChart Support
  • My Account
  • My Account
  • KEY FEATURES
    • Chart with Index / Data Label
    • Chart with Zooming & Panning
    • Multi Series Chart
    • Chart with Multiple Axes
    • Combination Charts
    • Chart with Animation
    • Dynamic Chart
    • Drilldown Chart
    • Responsive Chart
    • Synchronized Charts
  • LINE CHARTS
    • Line Chart with Date-Time Axis
    • Dashed Line Chart
    • Multi Series Line Chart
    • Spline Chart
    • Multi Series Spline Chart
    • Step Line Chart
    • Multi Series Step Line Chart
  • COLUMN CHARTS
    • Column Chart with Numeric Axis
    • Multi Series Column Chart
    • Stacked Column Chart
    • Stacked Column 100% Chart
    • Stacked Column 100% Chart with Indexlabel
  • JAVASCRIPT, REACT, jQUERY
    • JavaScript Charts
    • React Charts
    • jQuery Charts
  • SERVER SIDE TECHNOLOGIES
    • ASP.NET MVC Charts
    • PHP Charts
    • JSP Charts
    • Spring MVC Charts

Angular Drilldown Charts & Graphs

Download Angular Chart Samples
  • Angular Chart Samples
  • JavaScript Chart Samples
  • React Chart Samples
  • jQuery Chart Samples
  • PHP Chart Samples
  • ASP.NET Chart Samples
  • JSP Chart Samples
  • Spring MVC Chart Samples
  • Dashboard Samples
  • JavaScript StockChart Samples

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.

Read More >>

  • Component Code
  • Module Code
  • HTML Code
  • CSS Code
/* 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 * as CanvasJSAngularChart from '../assets/canvasjs.angular.component';
var CanvasJSChart = CanvasJSAngularChart.CanvasJSChart;

@NgModule({
  declarations: [
    AppComponent,
    CanvasJSChart
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }                        
/* app.component.html */
<div>
    <canvasjs-chart (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;
}                        

Related Customization

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.

Note   For step by step instructions, follow our Angular Integration Tutorial
© fenopix
  • About Us
  • FAQs
  • Careers
  • Privacy Policy
Server Side Technologies
  • ASP.NET MVC Charts
  • PHP Charts
  • JSP Charts
  • Spring MVC Charts
Front End Technologies
  • JavaScript Charts
  • jQuery Charts
  • React Charts
  • Angular Charts
  • JavaScript StockCharts
Contact
  • Fenopix, Inc.
  • 2093 Philadelphia Pike,
  • #5678, Claymont,
  • Delaware 19703
  • United States Of America