diff --git a/uhepp-js/src/components/Graph.jsx b/uhepp-js/src/components/Graph.jsx
index 7f9208a20c22ea8b95c66aac6b754d7811575695..1f7f8c68808b2246e5e746b1321f524239d9a0f1 100644
--- a/uhepp-js/src/components/Graph.jsx
+++ b/uhepp-js/src/components/Graph.jsx
@@ -216,12 +216,37 @@ const UheppHist = ({width, height, uhepp}) => {
   let legend = []
   uhepp.stacks.reverse().map(stack => {
       stack.content.reverse().map(stack_item => {
-        legend.push(
-          <rect x={width * 0.5} y={20 + i * 20}
-                key={`legend-${i}`}
-                height={10} width={20}
-                fill={stack_item.style ? stack_item.style.color : '#1f77b4'}
-                />)
+        if (stack.type == "points") {
+            let color = stack_item.style ? stack_item.style.color : '#000'
+            legend.push(<g key={`legend-${i}`}>
+              <circle
+                cx={width * 0.5 + 10}
+                cy={25 + i * 20}
+                stroke={color}
+                r="3"/>
+              <line
+                y1={25 + i * 20}
+                y2={25 + i * 20}
+                stroke={color}
+                strokeWidth="2"
+                x1={width * 0.5}
+                x2={width * 0.5 + 20} />
+              <line
+                y1={20 + i * 20}
+                y2={30 + i * 20}
+                strokeWidth="2"
+                stroke={color}
+                x1={width * 0.5 + 10}
+                x2={width * 0.5 + 10} />
+              </g>)
+        } else {
+          legend.push(
+            <rect x={width * 0.5} y={20 + i * 20}
+                  key={`legend-${i}`}
+                  height={10} width={20}
+                  fill={stack_item.style ? stack_item.style.color : '#1f77b4'}
+                  />)
+        }
         legend.push(
           <MixedText x={width * 0.5 + 30} y={30 + i * 20}
                 key={`legend-text-${i}`}>{stack_item.label}</MixedText>)