Benchmark graph fix (#17296)

Co-authored-by: Glenn Jocher <glenn.jocher@ultralytics.com>

docs/en/modes/benchmark.md

@@ -16,17 +16,19 @@ keywords: model benchmarking, YOLO11, Ultralytics, performance evaluation, expor
 
     You may need to refresh the page to view the graphs correctly due to potential cookie issues.
 
-<div>
-  <label><input type="checkbox" name="algorithm" value="YOLO11"><span>Ultralytics YOLO11</span></label>
-  <label><input type="checkbox" name="algorithm" value="YOLOv6"><span>YOLOv6</span></label>
-  <label><input type="checkbox" name="algorithm" value="YOLOv7"><span>YOLOv7</span></label>
-  <label><input type="checkbox" name="algorithm" value="YOLOv10"><span>YOLOv10</span></label>
-  <label><input type="checkbox" name="algorithm" value="YOLOv9"><span>YOLOv9</span></label>
-  <label><input type="checkbox" name="algorithm" value="YOLOv8"><span>Ultralytics YOLOv8</span></label>
-  <label><input type="checkbox" name="algorithm" value="PPYOLOE"><span>PPYOLOE</span></label>
-  <label><input type="checkbox" name="algorithm" value="YOLOv5"><span>Ultralytics YOLOv5</span></label>
+<div style="display: flex; align-items: flex-start;">
+  <div style="margin-right: 20px;">
+    <label><input type="checkbox" name="algorithm" value="YOLO11" checked><span>Ultralytics YOLO11</span></label><br>
+    <label><input type="checkbox" name="algorithm" value="YOLOv6" checked><span>YOLOv6</span></label><br>
+    <label><input type="checkbox" name="algorithm" value="YOLOv7" checked><span>YOLOv7</span></label><br>
+    <label><input type="checkbox" name="algorithm" value="YOLOv10" checked><span>YOLOv10</span></label><br>
+    <label><input type="checkbox" name="algorithm" value="YOLOv9" checked><span>YOLOv9</span></label><br>
+    <label><input type="checkbox" name="algorithm" value="YOLOv8" checked><span>Ultralytics YOLOv8</span></label><br>
+    <label><input type="checkbox" name="algorithm" value="PPYOLOE" checked><span>PPYOLOE</span></label><br>
+    <label><input type="checkbox" name="algorithm" value="YOLOv5" checked><span>Ultralytics YOLOv5</span></label>
+  </div>
+  <div style="flex-grow: 1;"><canvas id="chart"></canvas></div> <!-- Canva for plotting benchmarks -->
 </div>
-<canvas id="chart" width="400" height="200"></canvas>
 
 ## Introduction
 

docs/overrides/javascript/extra.js

@@ -165,7 +165,7 @@ let chart = null;  // chart variable will hold the reference to the current char
 // This function is responsible for updating the benchmarks chart.
 function updateChart() {
     // If a chart instance already exists, destroy it.
-    if (chart) { chart.destroy(); }
+    if (chart) chart.destroy();
 
     // Get the selected algorithms from the checkboxes.
     const selectedAlgorithms = [...document.querySelectorAll('input[name="algorithm"]:checked')].map(e => e.value);
@@ -195,7 +195,7 @@ function updateChart() {
         data: { datasets },
         options: {
             plugins: {
-                legend: { display: true, position: 'top', labels: { color: '#111e68' } }, // Configure the legend.
+                legend: { display: true, position: 'top', labels: {color: '#808080'} }, // Configure the legend.
                 tooltip: {
                     callbacks: {
                         label: (tooltipItem) => {
@@ -212,26 +212,29 @@ function updateChart() {
             scales: {
                 x: {
                     type: 'linear', position: 'bottom',
-                    title: { display: true, text: 'Latency T4 TensorRT10 FP16 (ms/img)', color: '#111e68' }, // X-axis title.
+                    title: { display: true, text: 'Latency T4 TensorRT10 FP16 (ms/img)', color: '#808080'}, // X-axis title.
                     grid: { color: '#e0e0e0' }, // Grid line color.
-                    ticks: { color: '#111e68' } // Tick label color.
+                    ticks: { color: '#808080' } // Tick label color.
                 },
                 y: {
-                    title: { display: true, text: 'mAP', color: '#111e68' }, // Y-axis title.
+                    title: { display: true, text: 'mAP', color: '#808080'}, // Y-axis title.
                     grid: { color: '#e0e0e0' }, // Grid line color.
-                    ticks: { color: '#111e68' } // Tick label color.
+                    ticks: { color: '#808080' } // Tick label color.
                 }
             }
         }
     });
 }
 
-// Add event listeners to the checkboxes to trigger the chart update.
-document.addEventListener("DOMContentLoaded", () => {
-    document.querySelectorAll('input[name="algorithm"]').forEach(checkbox =>
-        checkbox.addEventListener('change', updateChart)
-    );
-    // Call updateChart on initial load
-    updateChart();
-    console.log("DOM loaded, initial chart render attempted");
-});
+// Poll for Chart.js to load, then initialize checkboxes and chart
+function initializeApp() {
+    if (typeof Chart !== 'undefined') {
+        document.querySelectorAll('input[name="algorithm"]').forEach(checkbox =>
+            checkbox.addEventListener('change', updateChart)
+        );
+        updateChart();
+    } else {
+        setTimeout(initializeApp, 100);  // Retry every 100ms
+    }
+}
+document.addEventListener("DOMContentLoaded", initializeApp); // Initial chart rendering on page load