diff --git a/frontend/src/queries/nodes/DataVisualization/Components/Charts/LineGraph.tsx b/frontend/src/queries/nodes/DataVisualization/Components/Charts/LineGraph.tsx
index 55946477d94..1f00712833e 100644
--- a/frontend/src/queries/nodes/DataVisualization/Components/Charts/LineGraph.tsx
+++ b/frontend/src/queries/nodes/DataVisualization/Components/Charts/LineGraph.tsx
@@ -348,7 +348,9 @@ export const LineGraph = (): JSX.Element => {
                                             },
                                         ]}
                                         uppercaseHeader={false}
-                                        rowRibbonColor={(_datum, index) => getSeriesColor(index)}
+                                        rowRibbonColor={(_datum, index) =>
+                                            ySeriesData[index]?.settings?.display?.color ?? getSeriesColor(index)
+                                        }
                                         showHeader
                                     />
                                 </div>