diff --git a/packages/web/src/charts/ChartEditor.svelte b/packages/web/src/charts/ChartEditor.svelte
index 77b53f191..8b5e06caa 100644
--- a/packages/web/src/charts/ChartEditor.svelte
+++ b/packages/web/src/charts/ChartEditor.svelte
@@ -85,6 +85,7 @@
     }
   }
   $: {
+    $extensions;
     if (config.labelColumn && sql && conid && database) {
       handleLoadData();
     }
diff --git a/packages/web/src/charts/DataChart.svelte b/packages/web/src/charts/DataChart.svelte
index 17c695b10..6d7c371da 100644
--- a/packages/web/src/charts/DataChart.svelte
+++ b/packages/web/src/charts/DataChart.svelte
@@ -49,7 +49,7 @@
   }
 
   function createChartData(freeData, labelColumn, dataColumns, colorSeed, chartType, dataColumnColors) {
-    if (!freeData || !labelColumn || !dataColumns || !freeData.rows || dataColumns.length == 0) return [{}, {}];
+    if (!freeData || !labelColumn || !dataColumns || !freeData.rows || dataColumns.length == 0) return null;
     const colors = randomcolor({
       count: _.max([freeData.rows.length, dataColumns.length, 1]),
       seed: colorSeed,
@@ -106,8 +106,8 @@
   let clientWidth;
   let clientHeight;
 
-  $: dataColumns = extractDataColumns(values);
-  $: dataColumnColors = extractDataColumnColors(values, dataColumns);
+  $: dataColumns = extractDataColumns($values);
+  $: dataColumnColors = extractDataColumnColors($values, dataColumns);
 
   $: chartData = createChartData(
     data,
@@ -120,13 +120,17 @@
 </script>
 
 <div class="wrapper" bind:clientWidth bind:clientHeight>
-  <ChartCore
-    width={clientWidth}
-    height={clientHeight}
-    data={chartData[0]}
-    type={$values.chartType}
-    options={chartData[1]}
-  />
+  {#if chartData}
+    {#key `${$values.chartType}|${clientWidth}|${clientHeight}`}
+      <ChartCore
+        width={clientWidth}
+        height={clientHeight}
+        data={chartData[0]}
+        type={$values.chartType}
+        options={chartData[1]}
+      />
+    {/key}
+  {/if}
 </div>
 
 <style>