white legend graph

Author: bracyw

angular-client/src/pages/camera-page/camera-page.component.html

@@ -8,7 +8,6 @@
         (onChange)="onDropdownChange($event)"
         [style]="{ padding: '5px' }"
       />
-
     </div>
 
     <div class="video-container">

angular-client/src/pages/graph-page/graph/graph.component.ts

@@ -1,6 +1,15 @@
 import { Component, input, OnChanges, OnInit } from '@angular/core';
 import ApexCharts from 'apexcharts';
-import { ApexXAxis, ApexDataLabels, ApexChart, ApexMarkers, ApexGrid, ApexTooltip, ApexFill } from 'ng-apexcharts';
+import {
+  ApexXAxis,
+  ApexDataLabels,
+  ApexChart,
+  ApexMarkers,
+  ApexGrid,
+  ApexTooltip,
+  ApexFill,
+  ApexLegend
+} from 'ng-apexcharts';
 import { BehaviorSubject } from 'rxjs';
 import { GraphInfo } from 'src/utils/types.utils';
 
@@ -14,6 +23,7 @@ type ChartOptions = {
   tooltip: ApexTooltip;
   fill: ApexFill;
   stroke: ApexStroke;
+  legend?: ApexLegend; // Add legend property to match the options object
 };
 
 @Component({
@@ -196,6 +206,11 @@ export default class CustomGraphComponent implements OnChanges, OnInit {
       },
       grid: {
         show: true
+      },
+      legend: {
+        labels: {
+          colors: '#fff'
+        }
       }
     };