Appended pie chart in demo project

demo/src/app/pie-chart/pie-chart.component.html

@@ -1,3 +1,17 @@
 <p>
-    pie-chart works!
+    <canvas baseChart
+        chartType="pie"
+        [data]="chartData"
+        [colors]="chartColors"
+        [labels]="chartLabels"
+        [options]="chartOptions"
+        [plugins]="chartPlugins"
+        [legend]="chartLegend">
+    </canvas>
+    <button mat-button
+        mat-raised-button
+        color="primary"
+        (click)="randomizer()">
+        Randomize
+    </button>
 </p>

demo/src/app/pie-chart/pie-chart.component.ts

@@ -1,11 +1,38 @@
-import { Component, OnInit } from "@angular/core";
+import { Component } from "@angular/core";
+
+import { AppService } from "@app/app.service";
 
 @Component({
     selector: "app-pie-chart",
     templateUrl: "./pie-chart.component.html",
 })
-export class PieChartComponent implements OnInit {
-    constructor() {}
+export class PieChartComponent {
+    chartOptions = {
+        responsive: true,
+    };
+
+    chartLabels = [
+        ["Download", "Sales"],
+        ["In", "Store", "Sales"],
+        "Mail Sales",
+    ];
+
+    chartData = [300, 500, 100];
+
+    chartColors = [
+        {
+            backgroundColor: ["red", "#0F0", "rgba(41, 182, 246,0.75)"],
+            borderColor: ["rgb(250,120,100)", "green", "#0086c3"],
+        },
+    ];
+
+    chartLegend = true;
+    chartPlugins = [];
+
+    constructor(private service: AppService) {}
 
-    ngOnInit(): void {}
+    // Disregard this function, as this just randomizes the values in an array
+    randomizer(): void {
+        this.chartData = this.service.randomize(this.chartData);
+    }
 }