metrics: show legend with multiple datasets

dashboard/src/components/GraphItem.vue

@@ -32,14 +32,15 @@ const props = defineProps({
   cpu: Object,
 });
 
-function createGraphOptions({ yscale, period }) {
+function createGraphOptions({ yscale, period, displayLegend }) {
   const now = Date.now();
 
   return {
     maintainAspectRatio: false,
     plugins: {
       legend: {
-        display: false
+        display: displayLegend,
+        position: 'bottom'
       },
       tooltip: {
         callbacks: {
@@ -202,7 +203,7 @@ function onPeriodChanged() {
   }
 
   // this sets a min 'x' based on current timestamp. so it has to re-created every time the period changes
-  const graphOptions = createGraphOptions({ yscale, period: props.period });
+  const graphOptions = createGraphOptions({ yscale, period: props.period, displayLegend: props.datasetLabels.length > 1 });
 
   if (!graph) {
     graph = new Chart(graphNode.value, { type: 'line', data, options: graphOptions });