Grafana Legend

src/components/Panel.tsx

@@ -11,6 +11,8 @@ import { ChartwerkGaugePod } from '@chartwerk/gauge-pod';
 import { ChartwerkBarPod } from '@chartwerk/bar-pod';
 
 import { PanelData, TimeRange, PanelProps } from '@grafana/data';
+import { VizLegend } from '@grafana/ui';
+import { LegendDisplayMode } from '@grafana/schema';
 
 import React, { useRef } from 'react';
 import { css } from 'emotion';
@@ -52,17 +54,27 @@ export function Panel({ options, data, width, height, timeRange, onChangeTimeRan
     }
     window.open(options.gauge.link, '_self');
   };
-
+  const legendItems = [
+    { label: 'metric1', yAxis: 100, color: 'red' },
+    { label: 'metric2', yAxis: 200, color: 'green' },
+  ];
   return (
-    <div
+    <div>
-      ref={chartContainer}
+      <div
-      className={css`
+        ref={chartContainer}
-        width: ${width}px;
+        className={css`
-        height: ${height}px;
+          width: ${width}px;
-        cursor: ${isLinkActive ? 'pointer' : 'default'};
+          height: ${height- 20}px;
-      `}
+          cursor: ${isLinkActive ? 'pointer' : 'default'};
-      onClick={chartClickHandler}
+        `}
-    ></div>
+        onClick={chartClickHandler}
+      ></div>
+      <VizLegend
+        placement={'bottom'}
+        items={legendItems}
+        displayMode={LegendDisplayMode.List}
+      />
+    </div>
   );
 }
 

src/models/options/barOptions.ts

@@ -26,6 +26,7 @@ export class BarOptions {
         scroll: { zoom: { isActive: false }, pan: { isActive: false } },
         mouse: { doubleClick: { isActive: false } },
       },
+      renderLegend: false,
       annotations: [
         { key: 'm-1', color: 'red' },
         { key: 'm-2', color: 'green' },