diff --git a/packages/modules/web_themes/standard_legacy/web/index.html b/packages/modules/web_themes/standard_legacy/web/index.html
index fe7ec0fdb9..685657de90 100644
--- a/packages/modules/web_themes/standard_legacy/web/index.html
+++ b/packages/modules/web_themes/standard_legacy/web/index.html
@@ -347,7 +347,12 @@
 						<span class="collPlus"></span>
 					</div>
 					<div id="cardGraph" class="card-body collapse show">
-						<div class="row justify-content-center my-2" id="theGraph">
+						<div class="row justify-content-center" >
+							<div class="col-sm-12 mt-2">
+								<div id="custom-legend-container"></div>
+							</div>
+						</div>
+						<div class="row justify-content-center mb-2" id="theGraph">
 							<!-- will be refreshed using MQTT (in livechart.js)-->
 							<div class="col-sm-12 text-center smallTextSize">
 								<div id="waitForGraphLoadingDiv">
@@ -357,6 +362,7 @@
 							</div>
 						</div>
 					</div>
+					
 				</div>
 			</div>
 		</div>
diff --git a/packages/modules/web_themes/standard_legacy/web/livechart.js b/packages/modules/web_themes/standard_legacy/web/livechart.js
index f8dccba73f..06c75766fa 100644
--- a/packages/modules/web_themes/standard_legacy/web/livechart.js
+++ b/packages/modules/web_themes/standard_legacy/web/livechart.js
@@ -238,6 +238,41 @@ var chartDatasets = [
 	}
 ];
 
+// Generate custom legendAdd commentMore actions
+function generateCustomLegend(chart) {
+    const legendContainer = document.getElementById('custom-legend-container');
+    // Clear existing legend
+    legendContainer.innerHTML = '';
+    // Create legend items
+    chart.data.datasets.forEach((dataset, index) => {
+        if (!dataset.label) return;
+        const legendItem = document.createElement('div');
+        legendItem.className = 'legend-item';
+        if (chart.getDatasetMeta(index).hidden) {
+            legendItem.className += ' hidden';
+        }
+        const colorBox = document.createElement('span');
+        colorBox.className = 'legend-color-box';
+        colorBox.style.backgroundColor = dataset.borderColor;
+        const text = document.createElement('span');
+        text.textContent = dataset.label;
+        legendItem.appendChild(colorBox);
+        legendItem.appendChild(text);
+        // toggle visibility
+        legendItem.onclick = ()=> {
+            const item = chart.getDatasetMeta(index);
+            item.hidden = !item.hidden;
+            if (item.hidden) {
+                legendItem.classList.add('hidden');
+            } else {
+                legendItem.classList.remove('hidden');
+            }
+            chart.update();
+        };
+        legendContainer.appendChild(legendItem);
+    });
+}
+
 function loadGraph(animationDuration = 1000) {
 
 	var chartData = {
@@ -295,8 +330,12 @@ function loadGraph(animationDuration = 1000) {
 	window.myLine = new Chart(ctx, {
 		type: 'line',
 		plugins: [{
-			afterInit: doGraphResponsive,
-			resize: doGraphResponsive
+			afterInit: (chart) => {
+                doGraphResponsive(chart);
+                generateCustomLegend(chart);
+            },
+            resize: doGraphResponsive,
+            afterUpdate: generateCustomLegend
 		}],
 		data: chartData,
 		options: {
@@ -308,7 +347,7 @@ function loadGraph(animationDuration = 1000) {
 					enabled: true
 				},
 				legend: {
-					display: true,
+					display: false,
 					labels: {
 						color: fontColor,
 						// filter: function(item,chart) {
diff --git a/packages/modules/web_themes/standard_legacy/web/style.css b/packages/modules/web_themes/standard_legacy/web/style.css
index c522127e1b..1ba0cf9de3 100644
--- a/packages/modules/web_themes/standard_legacy/web/style.css
+++ b/packages/modules/web_themes/standard_legacy/web/style.css
@@ -476,3 +476,78 @@ h3 {
 	transition: none;
 	display: none;
 }
+
+/* Custom legend container */
+#custom-legend-container {
+    max-height: 120px;
+	margin-bottom: 10px;
+    overflow-y: auto;
+    border: 1px solid #ccc;
+	border-radius: 5px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    text-align: left;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+/* Legend item styling */
+.legend-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+    padding: 2px 5px;
+    border-radius: 3px;
+	font-size: 14px;
+	color: rgba(0,0,0,0.65);
+}
+
+.legend-item:hover {
+    background-color: rgba(0,0,0,0.05);
+}
+
+.legend-color-box {
+    display: inline-block;
+    width: 16px;
+    height: 4px;
+    margin-right: 4px;  
+}
+
+.legend-item.hidden {
+    opacity: 0.6;
+	text-decoration: line-through;
+}
+
+/* Make the container responsive */
+@media (max-width: 768px) {
+    #custom-legend-container {
+        max-height: 100px;
+    }
+    
+    .legend-item {
+        font-size: 0.8em;
+        margin-right: 5px;
+        margin-bottom: 3px;
+    }
+
+	.legend-color-box {
+		width: 12px;
+		height: 3px;
+		margin-right: 4px;  
+	}
+}
+
+/* For smaller screens */
+@media (max-width: 576px) {
+    #custom-legend-container {
+        max-height: 80px;
+    }
+
+	.legend-color-box {
+		width: 10px;
+		height: 2px;
+		margin-right: 4px;  
+	}
+}