Choose between ChartType

frontend/src/app/statistics/taskgroup-activity/taskgroup-activity.component.html

@@ -1,11 +1,17 @@
 <div class="container">
   <app-navigation-link-list #navLinkList [navigationLinks]="defaultNavigationLinkPath"></app-navigation-link-list>
-  <mat-form-field style="width: 100%">
+  <mat-form-field style="width: 90%">
     <mat-label>Toppings</mat-label>
     <mat-select [(ngModel)]="selectedTaskgroupPath" (ngModelChange)="updateSerieSelection()">
       <mat-option *ngFor="let topping of taskgroupPaths" [value]="topping">{{topping.taskgroupPath}}</mat-option>
     </mat-select>
   </mat-form-field>
+  <mat-form-field style="width: 10%;">
+    <mat-label>Toppings</mat-label>
+    <mat-select [(ngModel)]="selectedChartype" (ngModelChange)="updateSerieSelection()">
+      <mat-option *ngFor="let topping of availableChartTypes" [value]="topping">{{topping}}</mat-option>
+    </mat-select>
+  </mat-form-field>
 
   <div style="text-align:center">
     <apx-chart

frontend/src/app/statistics/taskgroup-activity/taskgroup-activity.component.ts

@@ -7,7 +7,7 @@ import {
   ApexAxisChartSeries,
   ApexChart,
   ApexXAxis,
-  ApexTitleSubtitle
+  ApexTitleSubtitle, ChartType
 } from "ng-apexcharts";
 import {timeInterval} from "rxjs";
 import {FormControl} from "@angular/forms";
@@ -41,7 +41,8 @@ export class TaskgroupActivityComponent implements OnInit{
   ];
 
 
-
+  selectedChartype: string = "bar";
+  availableChartTypes: string[] = ["bar", "line", "area"]
   selectedTaskgroupPath: TaskgroupPathInfo | undefined
   taskgroupPaths: TaskgroupPathInfo[] = []
   sliderControl: FormControl = new FormControl()
@@ -109,12 +110,13 @@ export class TaskgroupActivityComponent implements OnInit{
   }
 
   generateChartOptions(): Partial<ChartOptions> {
+
     return {
       series: this.generateSeries(),
         chart: {
-      height: 350,
-        type: "bar",
-        stacked: false
+          height: 350,
+          type: this.selectedChartype as ChartType,
+          stacked: true
     },
       title: {
         text: ""