diff --git a/doc/gui/examples/controls/metric-color-map.py b/doc/gui/examples/controls/metric-color-map.py
index 8ae577983d..fa4514bd21 100644
--- a/doc/gui/examples/controls/metric-color-map.py
+++ b/doc/gui/examples/controls/metric-color-map.py
@@ -15,21 +15,23 @@
 # -----------------------------------------------------------------------------------------
 from taipy.gui import Gui
 
-# color_map definition:
-# - A dictionary mapping metric values to display colors.
-# - Keys: Starting point of each range (number)
-# - Values: Corresponding color for that range (None implies no color assignment)
-# Example:
-# - 20.5 maps to "#fd2020"
-# - 40 maps to None (default color)
-# - 60 maps to "#f3ff26"
-# - 80 maps to None
+# color_map = {
+#     # 0-20 - Let Taipy decide
+#     # 20-40 - red
+#     20: "red",
+#     # 40-60 - Let Taipy decide
+#     40: None,
+#     # 60-80 - blue
+#     60: "blue",
+#     # 80-100 - Let Taipy decide
+#     80: None
+# }
 
 value = 50
 color_map = {
-    20.5: "#fd2020",
+    20: "red",
     40: None,
-    60: "#f3ff26",
+    60: "blue",
     80: None
 }
 
diff --git a/frontend/taipy-gui/src/components/Taipy/Metric.tsx b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
index 00d0226a82..3dac610bf3 100644
--- a/frontend/taipy-gui/src/components/Taipy/Metric.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/Metric.tsx
@@ -75,7 +75,7 @@ const Metric = (props: MetricProps) => {
                 return keys.sort((a, b) => Number(a) - Number(b)).map((key, index) => {
                     const nextKey = keys[index + 1] !== undefined ? Number(keys[index + 1]) : props.max || 100;
                     return {range: [Number(key), nextKey], color: obj[key]};
-                }).filter(item => item !== null && item.color !== null)
+                }).filter(item => item.color !== null)
             }
         } catch (e) {
             console.info(`Error parsing color_map value (metric).\n${(e as Error).message || e}`);