diff --git a/packages/client/src/components/app/charts/AreaChart.svelte b/packages/client/src/components/app/charts/AreaChart.svelte
index f85c0f9d58..8419068b82 100644
--- a/packages/client/src/components/app/charts/AreaChart.svelte
+++ b/packages/client/src/components/app/charts/AreaChart.svelte
@@ -154,8 +154,6 @@
 
     return { type: 'solid' }
   }
-
-  $: console.log("opt", options);
 </script>
 
 <ApexChart {options} />
diff --git a/packages/client/src/components/app/charts/DonutChart.svelte b/packages/client/src/components/app/charts/DonutChart.svelte
index 721a09053a..3946a89459 100644
--- a/packages/client/src/components/app/charts/DonutChart.svelte
+++ b/packages/client/src/components/app/charts/DonutChart.svelte
@@ -1,5 +1,91 @@
 <script>
-  import PieChart from "./PieChart.svelte"
+  import ApexChart from "./ApexChart.svelte"
+  import formatters from "./formatters";
+
+  export let title
+  export let dataProvider
+  export let labelColumn
+  export let valueColumn
+  export let height
+  export let width
+  export let animate
+  export let dataLabels
+  export let legend
+  export let palette
+  export let c1, c2, c3, c4, c5
+
+  $: labelType = dataProvider?.schema?.[labelColumn]?.type === 'datetime' ? 
+    "datetime" : "category"
+  $: series = getSeries(dataProvider, valueColumn)
+  $: labels = getLabels(dataProvider, labelColumn, labelType);
+
+  $: options = {
+    series,
+    labels,
+    colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [],
+    theme: {
+      palette: palette === "Custom" ? null : palette
+    },
+    legend: {
+      show: legend,
+      position: "top",
+      horizontalAlign: "right",
+      showForSingleSeries: true,
+      showForNullSeries: true,
+      showForZeroSeries: true,
+    },
+    title: {
+      text: title,
+    },
+    dataLabels: {
+      enabled: dataLabels
+    },
+    chart: {
+      height: height == null || height === "" ? "auto" : height,
+      width: width == null || width === "" ? "100%" : width,
+      type: "donut",
+      animations: {
+        enabled: animate
+      },
+      toolbar: {
+        show: false,
+      },
+      zoom: {
+        enabled: false,
+      },
+    },
+  }
+
+  const getSeries = (datasource, valueColumn) => {
+    const rows = datasource.rows ?? [];
+
+    return rows.map(row => {
+      const value = row?.[valueColumn]
+      const numValue = parseFloat(value);
+      if (isNaN(numValue)) {
+        return 0;
+      }
+
+      return numValue;
+    })
+  }
+
+  const getLabels = (datasource, labelColumn, labelType) => {
+    const rows = datasource.rows ?? [];
+
+    return rows.map(row => {
+      const value = row?.[labelColumn]
+
+      // If a nullish or non-scalar type, replace it with an empty string
+      if (!["string", "number", "boolean"].includes(typeof value)) {
+        return ""
+      } else if (labelType === "datetime") {
+        return formatters["Datetime"](value)
+      }
+
+      return value;
+    })
+  }
 </script>
 
-<PieChart {...$$props} donut />
+<ApexChart {options} />
diff --git a/packages/client/src/components/app/charts/LineChart.svelte b/packages/client/src/components/app/charts/LineChart.svelte
index 547032e89b..d7d379b426 100644
--- a/packages/client/src/components/app/charts/LineChart.svelte
+++ b/packages/client/src/components/app/charts/LineChart.svelte
@@ -130,8 +130,6 @@
 
     return formatters[valueUnits]
   }
-
-  $: console.log("opt", options);
 </script>
 
 <ApexChart {options} />
diff --git a/packages/client/src/components/app/charts/PieChart.svelte b/packages/client/src/components/app/charts/PieChart.svelte
index 91a4ee87f9..94ca6c7c64 100644
--- a/packages/client/src/components/app/charts/PieChart.svelte
+++ b/packages/client/src/components/app/charts/PieChart.svelte
@@ -86,7 +86,6 @@
       return value;
     })
   }
-  $: console.log("opt", options);
 </script>
 
 <ApexChart {options} />