diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index aae2320d65..2f4b10d356 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -423,105 +423,11 @@ export default {
       icon: "ri-bar-chart-2-line",
       isCategory: true,
       children: [
-        // {
-        //   name: "Donut",
-        //   _component: "@budibase/standard-components/donut",
-        //   description: "Donut chart",
-        //   icon: "ri-pie-chart-fill",
-        //   properties: {
-        //     settings: [
-        //       {
-        //         label: "Data",
-        //         key: "datasource",
-        //         control: TableViewSelect,
-        //       },
-        //       {
-        //         label: "Name Field",
-        //         key: "nameKey",
-        //         dependsOn: "datasource",
-        //         control: TableViewFieldSelect,
-        //       },
-        //       {
-        //         label: "Value Field",
-        //         key: "valueKey",
-        //         dependsOn: "datasource",
-        //         control: TableViewFieldSelect,
-        //       },
-        //       {
-        //         label: "Animate Chart",
-        //         key: "isAnimated",
-        //         valueKey: "checked",
-        //         control: Checkbox,
-        //       },
-        //       {
-        //         label: "Hover Highlight",
-        //         key: "hasHoverAnimation",
-        //         valueKey: "checked",
-        //         control: Checkbox,
-        //       },
-        //       {
-        //         label: "Keep Last Hover",
-        //         key: "hasLastHoverSliceHighlighted",
-        //         valueKey: "checked",
-        //         control: Checkbox,
-        //       },
-        //       {
-        //         label: "Colors",
-        //         key: "color",
-        //         control: OptionSelect,
-        //         options: [
-        //           "britecharts",
-        //           "blueGreen",
-        //           "green",
-        //           "grey",
-        //           "orange",
-        //           "pink",
-        //           "purple",
-        //           "red",
-        //           "teal",
-        //           "yellow",
-        //         ],
-        //       },
-        //       {
-        //         label: "External Radius",
-        //         key: "externalRadius",
-        //         control: Input,
-        //       },
-        //       {
-        //         label: "Internal Radius",
-        //         key: "internalRadius",
-        //         control: Input,
-        //       },
-        //       {
-        //         label: "Radius Offset",
-        //         key: "radiusHoverOffset ",
-        //         control: Input,
-        //       },
-        //       {
-        //         label: "Show Legend",
-        //         key: "useLegend ",
-        //         valueKey: "checked",
-        //         control: Checkbox,
-        //       },
-        //       {
-        //         label: "Horizontal Legend",
-        //         key: "horizontalLegend",
-        //         valueKey: "checked",
-        //         control: Checkbox,
-        //       },
-        //       {
-        //         label: "Legend Width",
-        //         key: "legendWidth",
-        //         control: Input,
-        //       },
-        //     ],
-        //   },
-        // },
         {
-          name: "Bar",
+          name: "Bar Chart",
           _component: "@budibase/standard-components/bar",
           description: "Bar chart",
-          icon: "ri-bar-chart-fill",
+          icon: "ri-bar-chart-line",
           properties: {
             settings: [
               {
@@ -610,111 +516,8 @@ export default {
             ],
           },
         },
-        // {
-        //   name: "Grouped Bar",
-        //   _component: "@budibase/standard-components/groupedbar",
-        //   description: "Groupedbar chart",
-        //   icon: "ri-bar-chart-grouped-fill",
-        //   properties: {
-        //     settings: [
-        //       {
-        //         label: "Data",
-        //         key: "datasource",
-        //         control: TableViewSelect,
-        //       },
-        //       {
-        //         label: "Name Label",
-        //         key: "nameLabel",
-        //         dependsOn: "datasource",
-        //         control: TableViewFieldSelect,
-        //       },
-        //       {
-        //         label: "Group Label",
-        //         key: "groupLabel",
-        //         dependsOn: "datasource",
-        //         control: TableViewFieldSelect,
-        //       },
-        //       {
-        //         label: "Value Label",
-        //         key: "valueLabel",
-        //         dependsOn: "datasource",
-        //         control: TableViewFieldSelect,
-        //       },
-        //       {
-        //         label: "Color",
-        //         key: "color",
-        //         control: OptionSelect,
-        //         options: [
-        //           "britecharts",
-        //           "blueGreen",
-        //           "green",
-        //           "grey",
-        //           "orange",
-        //           "pink",
-        //           "purple",
-        //           "red",
-        //           "teal",
-        //           "yellow",
-        //         ],
-        //       },
-        //       {
-        //         label: "Height",
-        //         key: "height",
-        //         control: Input,
-        //       },
-        //       {
-        //         label: "Width",
-        //         key: "width",
-        //         control: Input,
-        //       },
-        //       {
-        //         label: "Aspect Ratio",
-        //         key: "aspectRatio",
-        //         control: Input,
-        //       },
-        //       {
-        //         label: "Grid",
-        //         key: "grid",
-        //         control: OptionSelect,
-        //         options: ["vertical", "horizontal", "full"],
-        //       },
-        //       {
-        //         label: "Value Label",
-        //         key: "valueLabel",
-        //         control: Input,
-        //       },
-        //       {
-        //         label: "Y Ticks",
-        //         key: "yTicks",
-        //         control: Input,
-        //       },
-        //       {
-        //         label: "Y Tick Text Offset",
-        //         key: "yTickTextOffset",
-        //         control: Input,
-        //       },
-        //       {
-        //         label: "Is Animated",
-        //         key: "isAnimated",
-        //         valueKey: "checked",
-        //         control: Checkbox,
-        //       },
-        //       {
-        //         label: "Is Horizontal",
-        //         key: "isHorizontal",
-        //         valueKey: "checked",
-        //         control: Checkbox,
-        //       },
-        //       {
-        //         label: "Tooltip Title",
-        //         key: "tooltipTitle",
-        //         control: Input,
-        //       },
-        //     ],
-        //   },
-        // },
         {
-          name: "Line",
+          name: "Line Chart",
           _component: "@budibase/standard-components/line",
           description: "Line chart",
           icon: "ri-line-chart-line",
@@ -807,6 +610,146 @@ export default {
             ],
           },
         },
+        {
+          name: "Pie Chart",
+          _component: "@budibase/standard-components/pie",
+          description: "Pie chart",
+          icon: "ri-pie-chart-line",
+          properties: {
+            settings: [
+              {
+                label: "Title",
+                key: "title",
+                control: Input,
+              },
+              {
+                label: "Data",
+                key: "datasource",
+                control: TableViewSelect,
+              },
+              {
+                label: "Label Col.",
+                key: "labelColumn",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Data Col.",
+                key: "valueColumn",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              // {
+              //   label: "Color",
+              //   key: "color",
+              //   control: Colorpicker,
+              //   defaultValue: "#4285f4",
+              // },
+              {
+                label: "Width",
+                key: "width",
+                control: Input,
+              },
+              {
+                label: "Height",
+                key: "height",
+                control: Input,
+                defaultValue: "200",
+              },
+              {
+                label: "Data Labels",
+                key: "dataLabels",
+                control: Checkbox,
+                valueKey: "checked",
+                defaultValue: false,
+              },
+              {
+                label: "Animate",
+                key: "animate",
+                control: Checkbox,
+                valueKey: "checked",
+                defaultValue: true,
+              },
+              {
+                label: "Legend",
+                key: "legend",
+                control: Checkbox,
+                valueKey: "checked",
+                defaultValue: true,
+              },
+            ],
+          },
+        },
+        {
+          name: "Donut Chart",
+          _component: "@budibase/standard-components/donut",
+          description: "Donut chart",
+          icon: "ri-donut-chart-line",
+          properties: {
+            settings: [
+              {
+                label: "Title",
+                key: "title",
+                control: Input,
+              },
+              {
+                label: "Data",
+                key: "datasource",
+                control: TableViewSelect,
+              },
+              {
+                label: "Label Col.",
+                key: "labelColumn",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              {
+                label: "Data Col.",
+                key: "valueColumn",
+                dependsOn: "datasource",
+                control: TableViewFieldSelect,
+              },
+              // {
+              //   label: "Color",
+              //   key: "color",
+              //   control: Colorpicker,
+              //   defaultValue: "#4285f4",
+              // },
+              {
+                label: "Width",
+                key: "width",
+                control: Input,
+              },
+              {
+                label: "Height",
+                key: "height",
+                control: Input,
+                defaultValue: "200",
+              },
+              {
+                label: "Data Labels",
+                key: "dataLabels",
+                control: Checkbox,
+                valueKey: "checked",
+                defaultValue: false,
+              },
+              {
+                label: "Animate",
+                key: "animate",
+                control: Checkbox,
+                valueKey: "checked",
+                defaultValue: true,
+              },
+              {
+                label: "Legend",
+                key: "legend",
+                control: Checkbox,
+                valueKey: "checked",
+                defaultValue: true,
+              },
+            ],
+          },
+        },
       ],
     },
     {
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 30d9409e81..db3b4651d6 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -396,155 +396,6 @@
 			}
 		}
 	},
-	"datamap": {
-		"description": "shiny chart",
-		"data": true,
-		"props": {
-			"table": "tables"
-		}
-	},
-	"donut": {
-		"description": "Donut Chart",
-		"data": true,
-		"props": {
-			"datasource": "string",
-			"data": "string",
-			"color": "string",
-			"height": "number",
-			"width": "number",
-			"hasFixedHighlightedSlice": "bool",
-			"hasLastHoverSliceHighlighted": "bool",
-			"hasHoverAnimation": "bool",
-			"numberFormat": "string",
-			"nameKey": "string",
-			"valueKey": "string",
-			"isAnimated": "bool",
-			"externalRadius": "number",
-			"internalRadius": "number",
-			"radiusHoverOffset": "number",
-			"percentageFormat": "string",
-			"useLegend": "bool",
-			"legendWidth": "number",
-			"legendHeight": "number"
-		}
-	},
-	"sparkline": {
-		"description": "Sparkline Chart",
-		"data": true,
-		"props": {
-			"table": "string",
-			"areaGradient": "string",
-			"height": "number",
-			"width": "number",
-			"dateLabel": "string",
-			"duration": "string",
-			"isAnimated": "bool",
-			"lineGradient": "string",
-			"titleText": "string",
-			"valueLabel": "string"
-		}
-	},
-	"stackedbar": {
-		"description": "Stacked Bar Chart",
-		"data": true,
-		"props": {
-			"datasource": "tables",
-			"color": "string",
-			"height": "number",
-			"width": "number",
-			"margin": "string",
-			"aspectRatio": "string",
-			"betweenBarsPadding": "number",
-			"grid": "string",
-			"hasPercentage": "bool",
-			"hasReversedStacks": "bool",
-			"isAnimated": "bool",
-			"isHorizontal": "bool",
-			"locale": "string",
-			"nameLabel": "string",
-			"percentageAxisToMaxRatio": "number",
-			"stackLabel": "string",
-			"valueLabel": "string",
-			"valueLabelFormat": "string",
-			"xTicks": "number",
-			"yTicks": "number",
-			"yAxisLabel": "string",
-			"yAxisLabelOffset": "number",
-			"useLegend": "bool"
-		}
-	},
-	"stackarea": {
-		"description": "Step Chart",
-		"data": true,
-		"props": {
-			"table": "string",
-			"color": "string",
-			"height": "number",
-			"width": "number",
-			"margin": "string",
-			"xAxisLabel": "string",
-			"xAxisLabelOffset": "string",
-			"yAxisLabel": "string",
-			"yAxisLabelOffset": "string",
-			"areaCurve": "number",
-			"areaOpacity": "number",
-			"aspectRatio": "number",
-			"dateLabel": "string",
-			"grid": "string",
-			"isAnimated": "bool",
-			"keyLabel": "string",
-			"locale": "string",
-			"tooltipThreshold": "number",
-			"topicsOrder": "string",
-			"valueLabel": "string",
-			"xAxisCustomFormat": "string",
-			"xAxisFormat": "string",
-			"xAxisScale": "string",
-			"xAxisValueType": "string",
-			"yTicks": "number",
-			"xTicks": "number",
-			"yAxisBaseline": "string",
-			"useLegend": "bool"
-		}
-	},
-	"step": {
-		"description": "Step Chart",
-		"data": true,
-		"props": {
-			"table": "string",
-			"height": "number",
-			"width": "number",
-			"margin": "string",
-			"xAxisLabel": "string",
-			"xAxisLabelOffset": "string",
-			"yAxisLabel": "string",
-			"yAxisLabelOffset": "string",
-			"yTicks": "string"
-		}
-	},
-	"scatterplot": {
-		"description": "Scatterplot Chart",
-		"data": true,
-		"props": {
-			"table": "string",
-			"color": "string",
-			"height": "number",
-			"width": "number",
-			"aspectRatio": "string",
-			"circleOpacity": "string",
-			"grid": "string",
-			"hasCrossHairs": "bool",
-			"isAnimated": "bool",
-			"maxCircleArea": "number",
-			"xAxisLabel": "string",
-			"xAxisLabelOffset": "string",
-			"xTicks": "string",
-			"yAxisFormat": "string",
-			"yAxisLabel": "string",
-			"yAxisLabelOffset": "string",
-			"yTicks": "string"
-		}
-	},
 	"bar": {
 		"description": "Bar Chart",
 		"data": true,
@@ -614,74 +465,63 @@
 				"type": "bool",
 				"default": true
 			},
+			"legend": "bool"
+		}
+	},
+	"pie": {
+		"description": "Pie Chart",
+		"data": true,
+		"props": {
+			"title": "string",
+			"datasource": "tables",
+			"labelColumn": "string",
+			"valueColumn": "string",
+			"color": {
+				"type": "string",
+				"default": "#4285f4"
+			},
+			"height": {
+				"type": "number",
+				"default": "200"
+			},
+			"width": "number",
+			"dataLabels": "bool",
+			"animate": {
+				"type": "bool",
+				"default": true
+			},
 			"legend": {
 				"type": "bool",
-				"default": false
+				"default": true
 			}
 		}
 	},
-	"brush": {
-		"description": "brush chart",
-		"data": true,
-		"props": {
-			"table": "string",
-			"gradient": "string",
-			"height": "number",
-			"width": "number",
-			"margin": "string",
-			"dateRange": "string",
-			"locale": "string",
-			"roundingTimeInterval": "string",
-			"xAxisFormat": "string",
-			"xTicks": "number",
-			"xAxisCustomFormat": "string"
-		}
-	},
-	"heatmap": {
-		"description": "Heatmap chart",
-		"data": true,
-		"props": {
-			"table": "string",
-			"color": "string",
-			"height": "number",
-			"width": "number",
-			"useLegend": "bool",
-			"yAxisLabel": "string",
-			"boxSize": "number"
-		}
-	},
-	"groupedbar": {
-		"description": "Groupedbar chart",
+	"donut": {
+		"description": "Donut Chart",
 		"data": true,
 		"props": {
+			"title": "string",
 			"datasource": "tables",
-			"nameLabel": "string",
-			"valueLabel": "string",
-			"color": "string",
-			"height": "string",
-			"width": "string",
-			"margin": "string",
-			"grid": "string",
-			"groupLabel": "string",
-			"isAnimated": "bool",
-			"isHorizontal": "bool",
-			"yTicks": "string",
-			"useLegend": "bool",
-			"tooltipTitle": "string"
-		}
-	},
-	"bullet": {
-		"description": "Bullet chart",
-		"data": true,
-		"props": {
-			"table": "string",
-			"color": "string",
-			"customSubtitle": "string",
-			"customTitle": "string",
-			"numberFormat": "string",
-			"paddingBetweenAxisAndChart": "number",
-			"height": "number",
-			"width": "number"
+			"labelColumn": "string",
+			"valueColumn": "string",
+			"color": {
+				"type": "string",
+				"default": "#4285f4"
+			},
+			"height": {
+				"type": "number",
+				"default": "200"
+			},
+			"width": "number",
+			"dataLabels": "bool",
+			"animate": {
+				"type": "bool",
+				"default": true
+			},
+			"legend": {
+				"type": "bool",
+				"default": true
+			}
 		}
 	},
 	"datepicker": {
diff --git a/packages/standard-components/src/Chart/ApexOptionsBuilder.js b/packages/standard-components/src/Chart/ApexOptionsBuilder.js
index 9df273d7d7..c7f28e817d 100644
--- a/packages/standard-components/src/Chart/ApexOptionsBuilder.js
+++ b/packages/standard-components/src/Chart/ApexOptionsBuilder.js
@@ -13,6 +13,9 @@ export class ApexOptionsBuilder {
       toolbar: {
         show: false,
       },
+      zoom: {
+        enabled: false,
+      },
     },
   }
 
@@ -105,7 +108,15 @@ export class ApexOptionsBuilder {
     return this.setOption(["legend", "show"], legend)
   }
 
+  legendPosition(position) {
+    return this.setOption(["legend", "position"], position)
+  }
+
   stacked(stacked) {
     return this.setOption(["chart", "stacked"], stacked)
   }
+
+  labels(labels) {
+    return this.setOption(["labels"], labels)
+  }
 }
diff --git a/packages/standard-components/src/Chart/DonutChart.svelte b/packages/standard-components/src/Chart/DonutChart.svelte
new file mode 100644
index 0000000000..721a09053a
--- /dev/null
+++ b/packages/standard-components/src/Chart/DonutChart.svelte
@@ -0,0 +1,5 @@
+<script>
+  import PieChart from "./PieChart.svelte"
+</script>
+
+<PieChart {...$$props} donut />
diff --git a/packages/standard-components/src/Chart/PieChart.svelte b/packages/standard-components/src/Chart/PieChart.svelte
new file mode 100644
index 0000000000..9bcc490817
--- /dev/null
+++ b/packages/standard-components/src/Chart/PieChart.svelte
@@ -0,0 +1,59 @@
+<script>
+  import { onMount } from "svelte"
+  import { chart } from "svelte-apexcharts"
+  import fetchData from "../fetchData"
+  import { isEmpty, sortBy } from "lodash/fp"
+  import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
+
+  export let title
+  export let datasource
+  export let labelColumn
+  export let valueColumn
+  export let height
+  export let width
+  export let color
+  export let dataLabels
+  export let animate
+  export let legend
+  export let donut
+
+  let data
+  $: options = getChartOptions(data)
+
+  // Fetch data on mount
+  onMount(async () => {
+    if (!isEmpty(datasource)) {
+      const result = (await fetchData(datasource)).slice(0, 20)
+      data = sortBy(row => row[labelColumn])(result)
+    }
+  })
+
+  function getChartOptions(rows = []) {
+    // Initialise default chart
+    let builder = new ApexOptionsBuilder()
+      .title(title)
+      .type(donut ? "donut" : "pie")
+      .width(width)
+      .height(height)
+      .dataLabels(dataLabels)
+      .animate(animate)
+      .legend(legend)
+      .legendPosition("right")
+
+    // Add data if valid datasource
+    if (rows && rows.length) {
+      if (!isEmpty(valueColumn) && rows[0][valueColumn] != null) {
+        const series = rows.map(row => parseFloat(row[valueColumn]))
+        builder = builder.series(series)
+      }
+      if (!isEmpty(rows[0][labelColumn])) {
+        builder = builder.labels(rows.map(row => row[labelColumn]))
+      }
+    }
+
+    // Build chart options
+    return builder.getOptions()
+  }
+</script>
+
+<div use:chart={options} />
diff --git a/packages/standard-components/src/Chart/index.js b/packages/standard-components/src/Chart/index.js
index 5a9e94f00d..047fe60965 100644
--- a/packages/standard-components/src/Chart/index.js
+++ b/packages/standard-components/src/Chart/index.js
@@ -1,2 +1,4 @@
 export { default as bar } from "./BarChart.svelte"
 export { default as line } from "./LineChart.svelte"
+export { default as pie } from "./PieChart.svelte"
+export { default as donut } from "./DonutChart.svelte"