Angular Doughnut / Donut Chart in Dark Theme

Download Angular Chart Samples

Example shows Angular Doughnut Chart in dark theme & custom colorset.

/* app.component.ts */
import { Component } from '@angular/core';
declare var require: any;
var CanvasJS = require('../assets/canvasjs.min.js');

CanvasJS.addColorSet("customColorSet",["#ffcb06", "#ce1249", "#3a943c", "#7f3e83", "#812900", "#2078b6", "#df7f2e", "#e3e3e3"]);

@Component({
  selector: 'app',
  templateUrl: 'chart.component.html',
})
export class AppComponent {
  chartOptions = {
	animationEnabled: true,
	theme: "dark2",
	colorSet: "customColorSet",
	title:{
	  text: "Global Waste Treatment and Disposal"
	},
	data: [{
	  type: "doughnut",
	  indexLabel: "{name}: {y}",
	  innerRadius: "90%",
	  yValueFormatString: "#,##0.00'%'",
	  dataPoints: [
		{ y: 33, name: "Open Dump" },
		{ y: 25, name: "Landfill" },
		{ y: 13.5, name: "Recycling" },
		{ y: 11, name: "Incineration" },
		{ y: 7.7, name: "Sanitary Landfill (with landfill gas collection)" },
		{ y: 5.5, name: "Composting" },
		{ y: 4, name: "Controlled Landfill" },
		{ y: 0.3, name: "Others" }
	  ]
	}]
  }
}                              
/* 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

In the above example, custom colorset is added using addColorSet method & the darker theme is used by setting theme property to "dark2". Some other common customization options in doughnut chart includes radius, innerRadius, indexLabel, etc.

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