diff --git a/frontend/src/adapters/gateways/EChartsOptionBuilder/barOptionBuilder.ts b/frontend/src/adapters/gateways/EChartsOptionBuilder/barOptionBuilder.ts
index f894fa6..6151273 100644
--- a/frontend/src/adapters/gateways/EChartsOptionBuilder/barOptionBuilder.ts
+++ b/frontend/src/adapters/gateways/EChartsOptionBuilder/barOptionBuilder.ts
@@ -34,6 +34,7 @@ function applyCommonStyle(option: Record<string, any>, style: StyleConfig): void
     option.legend = { show: false };
   }
 
+  option.color = style.colors;
   option.backgroundColor = style.background.color !== '' ? style.background.color : 'transparent';
 
   if (style.animation.enabled) {
diff --git a/frontend/src/adapters/gateways/EChartsOptionBuilder/index.ts b/frontend/src/adapters/gateways/EChartsOptionBuilder/index.ts
index 9c187fc..de65f20 100644
--- a/frontend/src/adapters/gateways/EChartsOptionBuilder/index.ts
+++ b/frontend/src/adapters/gateways/EChartsOptionBuilder/index.ts
@@ -27,7 +27,7 @@ function ensureStyle(style: any): StyleConfig {
   if (!style || typeof style !== 'object') return DEFAULT_STYLE;
   return {
     title: { ...DEFAULT_STYLE.title, ...(style.title ?? {}) },
-    colors: style.colors ?? DEFAULT_STYLE.colors,
+    colors: (Array.isArray(style.colors) && style.colors.length > 0) ? style.colors : DEFAULT_STYLE.colors,
     legend: { ...DEFAULT_STYLE.legend, ...(style.legend ?? {}) },
     xAxis: { ...DEFAULT_STYLE.xAxis, ...(style.xAxis ?? {}) },
     yAxis: { ...DEFAULT_STYLE.yAxis, ...(style.yAxis ?? {}) },