set all vega renderer to canvas except col header charts

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,
           }}
         />

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>

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>

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",
     },
   });
 

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",
   };
 }
 

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,