diff --git a/src/components/VisualizeChart/renderBy.js b/src/components/VisualizeChart/renderBy.js
index f979a01a1..79c29c608 100644
--- a/src/components/VisualizeChart/renderBy.js
+++ b/src/components/VisualizeChart/renderBy.js
@@ -66,12 +66,16 @@ export function generateColorBy(points, colorBy = null) {
     colorBy = { payload: colorBy };
   }
 
+  function getNestedValue(obj, path) {
+    return path.split('.').reduce((acc, part) => acc && acc[part], obj);
+  }
+  
   if (colorBy.payload) {
     const valuesToColor = {};
 
     return points.map((point) => {
-      const payloadValue = point.payload[colorBy.payload];
-      if (!payloadValue) {
+      const payloadValue = getNestedValue(point.payload, colorBy.payload);
+      if (payloadValue === undefined || payloadValue === null) {
         return BACKGROUND_COLOR;
       }
       return colorByPayload(payloadValue, valuesToColor);