fix graph visuals

src/tempgraph.ts

@@ -2,6 +2,13 @@ import { Chart, registerables } from 'chart.js';
 import annotationPlugin from 'chartjs-plugin-annotation';
 import { AnnotationOptions } from 'chartjs-plugin-annotation';
 
+// Register Chart.js components and plugins
+Chart.register(...registerables);
+Chart.register(annotationPlugin);
+
+// External chart instance tracker
+let chartInstance: Chart | null = null;
+
 /* Test data if nothing is provided */
 function getTestData(): string[] {
   const sampleData = `Time,Event,Temperature
@@ -19,11 +26,6 @@ function getTestData(): string[] {
   return sampleData.split('\n');
 }
 
-// Register all Chart.js components
-Chart.register(...registerables);
-Chart.register(annotationPlugin);
-
-
 function parseTime(time: string): number {
   const [mins, secs] = time.split(':').map(Number);
   return mins * 60 + secs;
@@ -32,7 +34,6 @@ function parseTime(time: string): number {
 export function loadGraph(dataArray?: string[]): void {
   const lines = dataArray || getTestData();
 
-  // Further code using `lines`...
   const data = lines.slice(1).map(line => {
     const [time, event, temp] = line.split(',');
     return { time, event, temp };
@@ -63,19 +64,23 @@ export function loadGraph(dataArray?: string[]): void {
         borderWidth: 2,
         label: {
           content: entry.event,
-          enabled: true,
-          position: 'center', // Use a valid predefined position
-          yAdjust: -10
+          display: true,
+          rotation: -90, // rotates text counter-clockwise
+          position: 'end', // anchors label near bottom of chart
+          yAdjust: -10, // nudges it downward (positive = down)
+          font: {
+            size: 10
+          }
         }
       };
     });
 
-  // Clear previous chart instance if exists
-  const oldChart = (ctx as any).chart;
-  if (oldChart) {
-    oldChart.destroy();
+  // Clean up previous chart if it exists
+  if (chartInstance) {
+    chartInstance.destroy();
   }
-  new Chart(ctx, {
+
+  chartInstance = new Chart(ctx, {
     type: 'line',
     data: {
       datasets: [{
@@ -88,6 +93,9 @@ export function loadGraph(dataArray?: string[]): void {
       }]
     },
     options: {
+      animation: {
+        duration: 0
+      },
       responsive: true,
       scales: {
         x: {