Example shows Angular Doughnut Chart in dark theme & custom colorset.
/* app.component.ts */ import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterOutlet } from '@angular/router'; import { CanvasJSAngularChartsModule, CanvasJS } from '@canvasjs/angular-charts'; CanvasJS.addColorSet("customColorSet",["#ffcb06", "#ce1249", "#3a943c", "#7f3e83", "#812900", "#2078b6", "#df7f2e", "#e3e3e3"]); @Component({ selector: 'app-root', standalone: true, imports: [CommonModule, RouterOutlet, CanvasJSAngularChartsModule], templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) 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" } ] }] } }
<div> <canvasjs-chart [options]="chartOptions" [styles]="{width: '100%', height:'360px'}"></canvasjs-chart> </div>
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.