From f63de896a23032b96161a114878968b2dd3b6753 Mon Sep 17 00:00:00 2001
From: Shahmir Varqha <sham9871@gmail.com>
Date: Wed, 29 Oct 2025 22:36:40 +0800
Subject: [PATCH] set all vega to canvas except col summary

---
 frontend/src/components/data-table/charts/lazy-chart.tsx         | 1 +
 frontend/src/components/datasources/column-preview.tsx           | 1 +
 frontend/src/components/editor/Output.tsx                        | 1 +
 frontend/src/components/tracing/tracing.tsx                      | 1 +
 .../impl/data-explorer/ConnectedDataExplorerComponent.tsx        | 1 +
 frontend/src/plugins/impl/vega/vega-component.tsx                | 1 +
 6 files changed, 6 insertions(+)

diff --git a/frontend/src/components/data-table/charts/lazy-chart.tsx b/frontend/src/components/data-table/charts/lazy-chart.tsx
index 5b5f0c5ad26..dd0f960df12 100644
--- a/frontend/src/components/data-table/charts/lazy-chart.tsx
+++ b/frontend/src/components/data-table/charts/lazy-chart.tsx
@@ -40,6 +40,7 @@ export const LazyChart: React.FC<{
               editor: true,
             },
             mode: "vega",
+            renderer: "canvas",
             tooltip: tooltipHandler.call,
           }}
         />
diff --git a/frontend/src/components/datasources/column-preview.tsx b/frontend/src/components/datasources/column-preview.tsx
index 0d94241d52e..6e315672afc 100644
--- a/frontend/src/components/datasources/column-preview.tsx
+++ b/frontend/src/components/datasources/column-preview.tsx
@@ -230,6 +230,7 @@ export function renderChart(chartSpec: string, theme: Theme) {
           height: 100,
           width: "container" as unknown as number,
           actions: false,
+          renderer: "canvas",
         }}
       />
     </Suspense>
diff --git a/frontend/src/components/editor/Output.tsx b/frontend/src/components/editor/Output.tsx
index c1493109139..dcb34d91114 100644
--- a/frontend/src/components/editor/Output.tsx
+++ b/frontend/src/components/editor/Output.tsx
@@ -181,6 +181,7 @@ export const OutputRenderer: React.FC<{
               theme: theme === "dark" ? "dark" : "vox",
               mode: "vega-lite",
               tooltip: tooltipHandler.call,
+              renderer: "canvas",
             }}
           />
         </Suspense>
diff --git a/frontend/src/components/tracing/tracing.tsx b/frontend/src/components/tracing/tracing.tsx
index 2a33e1255b6..b5b085349c5 100644
--- a/frontend/src/components/tracing/tracing.tsx
+++ b/frontend/src/components/tracing/tracing.tsx
@@ -213,6 +213,7 @@ const TraceBlockBody: React.FC<{
       actions: false,
       // Using vega instead of vegaLite as some parts of the spec get interpreted as vega & will throw warnings
       mode: "vega",
+      renderer: "canvas",
     },
   });
 
diff --git a/frontend/src/plugins/impl/data-explorer/ConnectedDataExplorerComponent.tsx b/frontend/src/plugins/impl/data-explorer/ConnectedDataExplorerComponent.tsx
index 27931a8952a..9c1d90891dd 100644
--- a/frontend/src/plugins/impl/data-explorer/ConnectedDataExplorerComponent.tsx
+++ b/frontend/src/plugins/impl/data-explorer/ConnectedDataExplorerComponent.tsx
@@ -81,6 +81,7 @@ function chartOptions(theme: ResolvedTheme): VegaEmbedProps["options"] {
     },
     theme: theme === "dark" ? "dark" : undefined,
     tooltip: tooltipHandler.call,
+    renderer: "canvas",
   };
 }
 
diff --git a/frontend/src/plugins/impl/vega/vega-component.tsx b/frontend/src/plugins/impl/vega/vega-component.tsx
index fa986ff4492..8ecf61ac0fe 100644
--- a/frontend/src/plugins/impl/vega/vega-component.tsx
+++ b/frontend/src/plugins/impl/vega/vega-component.tsx
@@ -235,6 +235,7 @@ const LoadedVegaComponent = ({
       actions: actions,
       mode: "vega-lite",
       tooltip: tooltipHandler.call,
+      renderer: "canvas",
     },
     onError: handleError,
     onEmbed: handleNewView,