Simplify chart legend (#18878)

Co-authored-by: UltralyticsAssistant <web@ultralytics.com>

docs/en/modes/benchmark.md

@@ -4,16 +4,6 @@ description: Learn how to evaluate your YOLO11 model's performance in real-world
 keywords: model benchmarking, YOLO11, Ultralytics, performance evaluation, export formats, ONNX, TensorRT, OpenVINO, CoreML, TensorFlow, optimization, mAP50-95, inference time
 ---
 
-<script>
-  const script = document.createElement('script');
-  script.src = "https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js";
-  document.head.appendChild(script);
-
-  const anotherScript = document.createElement('script');
-  anotherScript.src = "../../javascript/benchmark.js";
-  document.head.appendChild(anotherScript);
-</script>
-
 # Model Benchmarking with Ultralytics YOLO
 
 <img width="1024" src="https://github.com/ultralytics/docs/releases/download/0/ultralytics-yolov8-ecosystem-integrations.avif" alt="Ultralytics YOLO ecosystem and integrations">
@@ -24,22 +14,10 @@ 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 style="display: flex; align-items: flex-start;">
+<script async src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
-  <div style="margin-right: 20px;">
+<script defer src="../../javascript/benchmark.js"></script>
-    <label><input type="checkbox" name="algorithm" value="YOLO11" checked><span>YOLO11</span></label><br>
+
-    <label><input type="checkbox" name="algorithm" value="YOLOv10" checked><span>YOLOv10</span></label><br>
+<canvas id="modelComparisonChart" width="1024" height="400"></canvas>
-    <label><input type="checkbox" name="algorithm" value="YOLOv9" checked><span>YOLOv9</span></label><br>
-    <label><input type="checkbox" name="algorithm" value="YOLOv8" checked><span>YOLOv8</span></label><br>
-    <label><input type="checkbox" name="algorithm" value="YOLOv7" checked><span>YOLOv7</span></label><br>
-    <label><input type="checkbox" name="algorithm" value="YOLOv6-3.0" checked><span>YOLOv6-3.0</span></label><br>
-    <label><input type="checkbox" name="algorithm" value="YOLOv5" checked><span>YOLOv5</span></label><br>
-    <label><input type="checkbox" name="algorithm" value="PP-YOLOE+" checked><span>PP-YOLOE+</span></label><br>
-    <label><input type="checkbox" name="algorithm" value="DAMO-YOLO" checked><span>DAMO-YOLO</span></label><br>
-    <label><input type="checkbox" name="algorithm" value="YOLOX" checked><span>YOLOX</span></label><br>
-    <label><input type="checkbox" name="algorithm" value="RTDETRv2" checked><span>RTDETRv2</span></label>
-</div> 
-  <div style="flex-grow: 1;"><canvas id="chart"></canvas></div>
-</div>
 
 ## Introduction
 

docs/overrides/javascript/benchmark.js

@@ -69,7 +69,7 @@ const data = {
   },
 };
 
-let chart = null; // chart variable will hold the reference to the current chart instance.
+let modelComparisonChart = null; // chart variable will hold the reference to the current chart instance.
 
 // Function to lighten a hex color by a specified amount.
 function lightenHexColor(color, amount = 0.5) {
@@ -83,9 +83,9 @@ function lightenHexColor(color, amount = 0.5) {
 }
 
 // Function to update the benchmarks chart.
-function updateChart() {
+function updateChart(initialDatasets = []) {
-  if (chart) {
+  if (modelComparisonChart) {
-    chart.destroy();
+    modelComparisonChart.destroy();
   } // If a chart instance already exists, destroy it.
 
   // Define a specific color map for models.
@@ -103,10 +103,9 @@ function updateChart() {
     RTDETRv2: "#eccd22",
   };
 
-  // Get the selected algorithms from the checkboxes.
+  // Get the selected algorithms from the initialDatasets or all if empty.
-  const selectedAlgorithms = [
+  const selectedAlgorithms =
-    ...document.querySelectorAll('input[name="algorithm"]:checked'),
+    initialDatasets.length > 0 ? initialDatasets : Object.keys(data);
-  ].map((e) => e.value);
 
   // Create the datasets for the selected algorithms.
   const datasets = selectedAlgorithms.map((algorithm, i) => {
@@ -123,73 +122,78 @@ function updateChart() {
       })),
       fill: false, // Don't fill the chart.
       borderColor: lineColor, // Use the lightened color for the line.
-      tension: 0.3, // Smooth the line.
+      tension: 0.2, // Smooth the line.
       pointRadius: i === 0 ? 7 : 4, // Highlight primary dataset points.
       pointHoverRadius: i === 0 ? 9 : 6, // Highlight hover for primary dataset.
       pointBackgroundColor: lineColor, // Fill points with the line color.
       pointBorderColor: "#ffffff", // Add a border around points for contrast.
       borderWidth: i === 0 ? 3 : 1.5, // Slightly increase line size for the primary dataset.
+      hidden: !selectedAlgorithms.includes(algorithm),
     };
   });
 
-  if (datasets.length === 0) {
-    return;
-  } // If there are no selected algorithms, return without creating a new chart.
-
   // Create a new chart instance.
-  chart = new Chart(document.getElementById("chart").getContext("2d"), {
+  modelComparisonChart = new Chart(
-    type: "line", // Set the chart type to line.
+    document.getElementById("modelComparisonChart").getContext("2d"),
-    data: { datasets },
+    {
-    options: {
+      type: "line", // Set the chart type to line.
-      plugins: {
+      data: { datasets },
-        legend: {
+      options: {
-          display: true,
+        //aspectRatio: 2.5,  // higher is wider
-          position: "top",
+        plugins: {
-          labels: { color: "#808080" },
+          legend: {
-        }, // Configure the legend.
-        tooltip: {
-          callbacks: {
-            label: (tooltipItem) => {
-              const { dataset, dataIndex } = tooltipItem;
-              const point = dataset.data[dataIndex];
-              return `${dataset.label}${point.version.toLowerCase()}: Speed = ${point.x}, mAP = ${point.y}`; // Custom tooltip label.
-            },
-          },
-          mode: "nearest",
-          intersect: false,
-        }, // Configure the tooltip.
-      },
-      interaction: { mode: "nearest", axis: "x", intersect: false }, // Configure the interaction mode.
-      scales: {
-        x: {
-          type: "linear",
-          position: "bottom",
-          title: {
             display: true,
-            text: "Latency T4 TensorRT10 FP16 (ms/img)",
+            position: "right",
-            color: "#808080",
+            align: "start", // start, end, center
-          }, // X-axis title.
+            labels: { color: "#808080" },
-          grid: { color: "#e0e0e0" }, // Grid line color.
+            onClick: (e, legendItem, legend) => {
-          ticks: { color: "#808080" }, // Tick label color.
+              const index = legendItem.datasetIndex;
+              const ci = legend.chart;
+              const meta = ci.getDatasetMeta(index);
+              meta.hidden =
+                meta.hidden === null ? !ci.data.datasets[index].hidden : null;
+              ci.update();
+            },
+          }, // Configure the legend.
+          tooltip: {
+            callbacks: {
+              label: (tooltipItem) => {
+                const { dataset, dataIndex } = tooltipItem;
+                const point = dataset.data[dataIndex];
+                return `${dataset.label}${point.version.toLowerCase()}: Speed = ${point.x}, mAP = ${point.y}`; // Custom tooltip label.
+              },
+            },
+            mode: "nearest",
+            intersect: false,
+          }, // Configure the tooltip.
         },
-        y: {
+        interaction: { mode: "nearest", axis: "x", intersect: false }, // Configure the interaction mode.
-          title: { display: true, text: "mAP", color: "#808080" }, // Y-axis title.
+        scales: {
-          grid: { color: "#e0e0e0" }, // Grid line color.
+          x: {
-          ticks: { color: "#808080" }, // Tick label color.
+            type: "linear",
+            position: "bottom",
+            title: {
+              display: true,
+              text: "Latency T4 TensorRT10 FP16 (ms/img)",
+              color: "#808080",
+            },
+            grid: { color: "#e0e0e0" },
+            ticks: { color: "#808080" },
+          },
+          y: {
+            title: { display: true, text: "COCO mAP 50-95", color: "#808080" },
+            grid: { color: "#e0e0e0" },
+            ticks: { color: "#808080" },
+          },
         },
       },
     },
-  });
+  );
 }
 
 document$.subscribe(function () {
   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