diff --git a/uhepp-js/src/components/UheppHist.jsx b/uhepp-js/src/components/UheppHist.jsx
index b81825b8f7e08e48a1de5db2d77c0ec82fa65354..ca5a8238fecea5653a3bf576b0b270263bb0744c 100644
--- a/uhepp-js/src/components/UheppHist.jsx
+++ b/uhepp-js/src/components/UheppHist.jsx
@@ -469,12 +469,6 @@ const tex_html = mathjax.document('', {
   }
 });
 
-const length_metrix = (str) => {
-  var short_count = (str.match(/[,.tli1: ]/g) || []).length;
-  var long_count = (str.match(/[MWXZ]/g) || []).length;
-  return str.length + 0.2 * long_count - 0.5 * short_count
-}
-
 const EmbeddedMathJax = ({src, posX, posY, align="left"}) => {
   let html = tex_html;
   let node = document.createElement("div");
@@ -528,6 +522,22 @@ const Legend = ({
   const mathSkip = 120;
   let i = 0
   let legend = []
+  post_uhepp.graphs.map((graph, graph_i) => {
+
+    legend.push(<>
+      <line x1={0} x2={20}
+        y1={(i + 1) * lineSkip - 5}
+        y2={(i + 1) * lineSkip - 5}
+        strokeWidth="2"
+        stroke={graph.style.color || "#000"}
+        key={`legend-${i}`}
+        />
+        <MixedText x={30} y={(i + 1) * lineSkip} 
+                key={`legend-label-${i}`}>{graph.label}</MixedText>
+    </>)
+
+    i++
+  })
   post_uhepp.stacks.map((stack, stack_index) => {
       stack.content.map((stack_item, si_i) => {
         if (stack.type == "points") {