diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json
index c882d94a0d..fdbb9c604b 100644
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@@ -27,7 +27,14 @@
   {
     "name": "Chart",
     "icon": "ri-bar-chart-2-line",
-    "children": []
+    "children": [
+      "bar",
+      "line",
+      "area",
+      "pie",
+      "donut",
+      "candlestick"
+    ]
   },
   {
     "name": "Elements",
diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
index a53740935a..6520022c04 100644
--- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
@@ -56,6 +56,8 @@
     table: TableSelect,
     color: ColorPicker,
     icon: IconSelect,
+    field: TableViewFieldSelect,
+    multifield: MultiTableViewFieldSelect,
   }
 
   const getControl = type => {
diff --git a/packages/builder/src/components/design/temporaryPanelStructure.js b/packages/builder/src/components/design/temporaryPanelStructure.js
deleted file mode 100644
index 259b6fc116..0000000000
--- a/packages/builder/src/components/design/temporaryPanelStructure.js
+++ /dev/null
@@ -1,592 +0,0 @@
-export default {
-  categories: [
-    {
-      name: "Chart",
-      icon: "ri-bar-chart-2-line",
-      isCategory: true,
-      children: [
-        {
-          name: "Bar Chart",
-          _component: "@budibase/standard-components/bar",
-          description: "Bar chart",
-          icon: "ri-bar-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 Cols.",
-                key: "valueColumns",
-                dependsOn: "datasource",
-                control: MultiTableViewFieldSelect,
-              },
-              {
-                label: "Format",
-                key: "yAxisUnits",
-                control: OptionSelect,
-                options: ["Default", "Thousands", "Millions"],
-                defaultValue: "Default",
-              },
-              {
-                label: "Y Axis Label",
-                key: "yAxisLabel",
-                control: Input,
-              },
-              {
-                label: "X Axis Label",
-                key: "xAxisLabel",
-                control: Input,
-              },
-              {
-                label: "Width",
-                key: "width",
-                control: Input,
-              },
-              {
-                label: "Height",
-                key: "height",
-                control: Input,
-                defaultValue: "400",
-              },
-              {
-                label: "Colours",
-                key: "palette",
-                control: OptionSelect,
-                defaultValue: "Palette 1",
-                options: [
-                  "Palette 1",
-                  "Palette 2",
-                  "Palette 3",
-                  "Palette 4",
-                  "Palette 5",
-                  "Palette 6",
-                  "Palette 7",
-                  "Palette 8",
-                  "Palette 9",
-                  "Palette 10",
-                ],
-              },
-              {
-                label: "Stacked",
-                key: "stacked",
-                control: Checkbox,
-                valueKey: "checked",
-                defaultValue: false,
-              },
-              {
-                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: false,
-              },
-            ],
-          },
-        },
-        {
-          name: "Line Chart",
-          _component: "@budibase/standard-components/line",
-          description: "Line chart",
-          icon: "ri-line-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 Cols.",
-                key: "valueColumns",
-                dependsOn: "datasource",
-                control: MultiTableViewFieldSelect,
-              },
-              {
-                label: "Format",
-                key: "yAxisUnits",
-                control: OptionSelect,
-                options: ["Default", "Thousands", "Millions"],
-                defaultValue: "Default",
-              },
-              {
-                label: "Y Axis Label",
-                key: "yAxisLabel",
-                control: Input,
-              },
-              {
-                label: "X Axis Label",
-                key: "xAxisLabel",
-                control: Input,
-              },
-              {
-                label: "Width",
-                key: "width",
-                control: Input,
-              },
-              {
-                label: "Height",
-                key: "height",
-                control: Input,
-                defaultValue: "400",
-              },
-              {
-                label: "Curve",
-                key: "curve",
-                control: OptionSelect,
-                options: ["Smooth", "Straight", "Stepline"],
-                defaultValue: "Smooth",
-              },
-              {
-                label: "Colours",
-                key: "palette",
-                control: OptionSelect,
-                defaultValue: "Palette 1",
-                options: [
-                  "Palette 1",
-                  "Palette 2",
-                  "Palette 3",
-                  "Palette 4",
-                  "Palette 5",
-                  "Palette 6",
-                  "Palette 7",
-                  "Palette 8",
-                  "Palette 9",
-                  "Palette 10",
-                ],
-              },
-              {
-                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: false,
-              },
-            ],
-          },
-        },
-        {
-          name: "Area Chart",
-          _component: "@budibase/standard-components/area",
-          description: "Line chart",
-          icon: "ri-line-chart-fill",
-          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 Cols.",
-                key: "valueColumns",
-                dependsOn: "datasource",
-                control: MultiTableViewFieldSelect,
-              },
-              {
-                label: "Format",
-                key: "yAxisUnits",
-                control: OptionSelect,
-                options: ["Default", "Thousands", "Millions"],
-                defaultValue: "Default",
-              },
-              {
-                label: "Y Label",
-                key: "yAxisLabel",
-                control: Input,
-              },
-              {
-                label: "X Label",
-                key: "xAxisLabel",
-                control: Input,
-              },
-              {
-                label: "Width",
-                key: "width",
-                control: Input,
-              },
-              {
-                label: "Height",
-                key: "height",
-                control: Input,
-                defaultValue: "400",
-              },
-              {
-                label: "Curve",
-                key: "curve",
-                control: OptionSelect,
-                options: ["Smooth", "Straight", "Stepline"],
-                defaultValue: "Smooth",
-              },
-              {
-                label: "Colours",
-                key: "palette",
-                control: OptionSelect,
-                defaultValue: "Palette 1",
-                options: [
-                  "Palette 1",
-                  "Palette 2",
-                  "Palette 3",
-                  "Palette 4",
-                  "Palette 5",
-                  "Palette 6",
-                  "Palette 7",
-                  "Palette 8",
-                  "Palette 9",
-                  "Palette 10",
-                ],
-              },
-              {
-                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: false,
-              },
-              {
-                label: "Stacked",
-                key: "stacked",
-                control: Checkbox,
-                valueKey: "checked",
-                defaultValue: true,
-              },
-              {
-                label: "Gradient",
-                key: "gradient",
-                control: Checkbox,
-                valueKey: "checked",
-                defaultValue: false,
-              },
-            ],
-          },
-        },
-        {
-          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: "Width",
-                key: "width",
-                control: Input,
-              },
-              {
-                label: "Height",
-                key: "height",
-                control: Input,
-                defaultValue: "200",
-              },
-              {
-                label: "Colours",
-                key: "palette",
-                control: OptionSelect,
-                defaultValue: "Palette 1",
-                options: [
-                  "Palette 1",
-                  "Palette 2",
-                  "Palette 3",
-                  "Palette 4",
-                  "Palette 5",
-                  "Palette 6",
-                  "Palette 7",
-                  "Palette 8",
-                  "Palette 9",
-                  "Palette 10",
-                ],
-              },
-              {
-                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: "Width",
-                key: "width",
-                control: Input,
-              },
-              {
-                label: "Height",
-                key: "height",
-                control: Input,
-                defaultValue: "200",
-              },
-              {
-                label: "Colours",
-                key: "palette",
-                control: OptionSelect,
-                defaultValue: "Palette 1",
-                options: [
-                  "Palette 1",
-                  "Palette 2",
-                  "Palette 3",
-                  "Palette 4",
-                  "Palette 5",
-                  "Palette 6",
-                  "Palette 7",
-                  "Palette 8",
-                  "Palette 9",
-                  "Palette 10",
-                ],
-              },
-              {
-                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: "Candlestick Chart",
-          _component: "@budibase/standard-components/candlestick",
-          description: "Candlestick chart",
-          icon: "ri-stock-line",
-          properties: {
-            settings: [
-              {
-                label: "Title",
-                key: "title",
-                control: Input,
-              },
-              {
-                label: "Data",
-                key: "datasource",
-                control: TableViewSelect,
-              },
-              {
-                label: "Date Col.",
-                key: "dateColumn",
-                dependsOn: "datasource",
-                control: TableViewFieldSelect,
-              },
-              {
-                label: "Open Col.",
-                key: "openColumn",
-                dependsOn: "datasource",
-                control: TableViewFieldSelect,
-              },
-              {
-                label: "Close Col.",
-                key: "closeColumn",
-                dependsOn: "datasource",
-                control: TableViewFieldSelect,
-              },
-              {
-                label: "High Col.",
-                key: "highColumn",
-                dependsOn: "datasource",
-                control: TableViewFieldSelect,
-              },
-              {
-                label: "Low Col.",
-                key: "lowColumn",
-                dependsOn: "datasource",
-                control: TableViewFieldSelect,
-              },
-              {
-                label: "Format",
-                key: "yAxisUnits",
-                control: OptionSelect,
-                options: ["Default", "Thousands", "Millions"],
-                defaultValue: "Default",
-              },
-              {
-                label: "Y Axis Label",
-                key: "yAxisLabel",
-                control: Input,
-              },
-              {
-                label: "X Axis Label",
-                key: "xAxisLabel",
-                control: Input,
-              },
-              {
-                label: "Width",
-                key: "width",
-                control: Input,
-              },
-              {
-                label: "Height",
-                key: "height",
-                control: Input,
-                defaultValue: "400",
-              },
-              {
-                label: "Animate",
-                key: "animate",
-                control: Checkbox,
-                valueKey: "checked",
-                defaultValue: true,
-              },
-            ],
-          },
-        },
-      ],
-    },
-  ],
-}
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
deleted file mode 100644
index dd3d3e9d85..0000000000
--- a/packages/standard-components/components.json
+++ /dev/null
@@ -1,281 +0,0 @@
-{
-	"bar": {
-		"description": "Bar Chart",
-		"data": true,
-		"props": {
-			"title": "string",
-			"datasource": "tables",
-			"labelColumn": "string",
-			"valueColumns": "string",
-			"height": {
-				"type": "string",
-				"default": "400"
-			},
-			"width": "string",
-			"dataLabels": "bool",
-			"animate": {
-				"type": "bool",
-				"default": true
-			},
-			"xAxisLabel": "string",
-			"yAxisLabel": "string",
-			"legend": "bool",
-			"stacked": "bool",
-			"yAxisUnits": {
-				"type": "options",
-				"default": "Default",
-				"options": [
-					"Default", "Thousands", "Millions"
-				]
-			},
-			"palette": {
-				"type": "options",
-				"default": "Palette 1",
-				"options": [
-					"Palette 1",
-					"Palette 2",
-					"Palette 3",
-					"Palette 4",
-					"Palette 5",
-					"Palette 6",
-					"Palette 7",
-					"Palette 8",
-					"Palette 9",
-					"Palette 10"
-				]
-			}
-		}
-	},
-	"line": {
-		"description": "Line Chart",
-		"data": true,
-		"props": {
-			"title": "string",
-			"datasource": "tables",
-			"labelColumn": "string",
-			"valueColumns": "string",
-			"height": {
-				"type": "string",
-				"default": "400"
-			},
-			"width": "string",
-			"dataLabels": {
-				"type": "bool",
-				"default": false
-			},
-			"animate": {
-				"type": "bool",
-				"default": true
-			},
-			"xAxisLabel": "string",
-			"yAxisLabel": "string",
-			"curve": {
-				"type": "options",
-				"options": [
-					"Smooth",
-					"Straight",
-					"Stepline"
-				],
-				"default": "Smooth"
-			},
-			"legend": "bool",
-			"yAxisUnits": {
-				"type": "options",
-				"default": "Default",
-				"options": [
-					"Default", "Thousands", "Millions"
-				]
-			},
-			"palette": {
-				"type": "options",
-				"default": "Palette 1",
-				"options": [
-					"Palette 1",
-					"Palette 2",
-					"Palette 3",
-					"Palette 4",
-					"Palette 5",
-					"Palette 6",
-					"Palette 7",
-					"Palette 8",
-					"Palette 9",
-					"Palette 10"
-				]
-			}
-		}
-	},
-	"area": {
-		"description": "Area Chart",
-		"data": true,
-		"props": {
-			"title": "string",
-			"datasource": "tables",
-			"labelColumn": "string",
-			"valueColumns": "string",
-			"height": {
-				"type": "string",
-				"default": "400"
-			},
-			"width": "string",
-			"dataLabels": {
-				"type": "bool",
-				"default": false
-			},
-			"animate": {
-				"type": "bool",
-				"default": true
-			},
-			"xAxisLabel": "string",
-			"yAxisLabel": "string",
-			"curve": {
-				"type": "options",
-				"options": [
-					"Smooth",
-					"Straight",
-					"Stepline"
-				],
-				"default": "Smooth"
-			},
-			"legend": "bool",
-			"stacked": {
-				"type": "bool",
-				"default": true
-			},
-			"gradient": "bool",
-			"yAxisUnits": {
-				"type": "options",
-				"default": "Default",
-				"options": [
-					"Default", "Thousands", "Millions"
-				]
-			},
-			"palette": {
-				"type": "options",
-				"default": "Palette 1",
-				"options": [
-					"Palette 1",
-					"Palette 2",
-					"Palette 3",
-					"Palette 4",
-					"Palette 5",
-					"Palette 6",
-					"Palette 7",
-					"Palette 8",
-					"Palette 9",
-					"Palette 10"
-				]
-			}
-		}
-	},
-	"pie": {
-		"description": "Pie Chart",
-		"data": true,
-		"props": {
-			"title": "string",
-			"datasource": "tables",
-			"labelColumn": "string",
-			"valueColumn": "string",
-			"height": {
-				"type": "string",
-				"default": "200"
-			},
-			"width": "string",
-			"dataLabels": "bool",
-			"animate": {
-				"type": "bool",
-				"default": true
-			},
-			"legend": {
-				"type": "bool",
-				"default": true
-			},
-			"palette": {
-				"type": "options",
-				"default": "Palette 1",
-				"options": [
-					"Palette 1",
-					"Palette 2",
-					"Palette 3",
-					"Palette 4",
-					"Palette 5",
-					"Palette 6",
-					"Palette 7",
-					"Palette 8",
-					"Palette 9",
-					"Palette 10"
-				]
-			}
-		}
-	},
-	"donut": {
-		"description": "Donut Chart",
-		"data": true,
-		"props": {
-			"title": "string",
-			"datasource": "tables",
-			"labelColumn": "string",
-			"valueColumn": "string",
-			"height": {
-				"type": "string",
-				"default": "200"
-			},
-			"width": "string",
-			"dataLabels": "bool",
-			"animate": {
-				"type": "bool",
-				"default": true
-			},
-			"legend": {
-				"type": "bool",
-				"default": true
-			},
-			"palette": {
-				"type": "options",
-				"default": "Palette 1",
-				"options": [
-					"Palette 1",
-					"Palette 2",
-					"Palette 3",
-					"Palette 4",
-					"Palette 5",
-					"Palette 6",
-					"Palette 7",
-					"Palette 8",
-					"Palette 9",
-					"Palette 10"
-				]
-			}
-		}
-	},
-	"candlestick": {
-		"description": "Candlestick Chart",
-		"data": true,
-		"props": {
-			"title": "string",
-			"datasource": "tables",
-			"dateColumn": "string",
-			"openColumn": "string",
-			"closeColumn": "string",
-			"highColumn": "string",
-			"lowColumn": "string",
-			"height": {
-				"type": "string",
-				"default": "400"
-			},
-			"width": "string",
-			"animate": {
-				"type": "bool",
-				"default": true
-			},
-			"xAxisLabel": "string",
-			"yAxisLabel": "string",
-			"yAxisUnits": {
-				"type": "options",
-				"default": "Default",
-				"options": [
-					"Default", "Thousands", "Millions"
-				]
-			}
-		}
-	},
-}
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 0fceea4deb..20937d7eef 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -545,5 +545,555 @@
         "key": "embed"
       }
     ]
+  },
+  "bar": {
+    "name": "Bar Chart",
+    "description": "Bar chart",
+    "icon": "ri-bar-chart-line",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Title",
+        "key": "title"
+      },
+      {
+        "type": "datasource",
+        "label": "Data",
+        "key": "datasource"
+      },
+      {
+        "type": "field",
+        "label": "Label Col.",
+        "key": "labelColumn",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "multifield",
+        "label": "Data Cols.",
+        "key": "valueColumns",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "select",
+        "label": "Format",
+        "key": "yAxisUnits",
+        "options": ["Default", "Thousands", "Millions"],
+        "defaultValue": "Default"
+      },
+      {
+        "type": "text",
+        "label": "Y Axis Label",
+        "key": "yAxisLabel"
+      },
+      {
+        "type": "text",
+        "label": "X Axis Label",
+        "key": "xAxisLabel"
+      },
+      {
+        "type": "text",
+        "label": "Width",
+        "key": "width"
+      },
+      {
+        "type": "text",
+        "label": "Height",
+        "key": "height",
+        "defaultValue": "400"
+      },
+      {
+        "type": "select",
+        "label": "Colours",
+        "key": "palette",
+        "defaultValue": "Palette 1",
+        "options": [
+          "Palette 1",
+          "Palette 2",
+          "Palette 3",
+          "Palette 4",
+          "Palette 5",
+          "Palette 6",
+          "Palette 7",
+          "Palette 8",
+          "Palette 9",
+          "Palette 10"
+        ]
+      },
+      {
+        "type": "boolean",
+        "label": "Stacked",
+        "key": "stacked",
+        "defaultValue": false
+      },
+      {
+        "type": "boolean",
+        "label": "Data Labels",
+        "key": "dataLabels",
+        "defaultValue": false
+      },
+      {
+        "type": "boolean",
+        "label": "Animate",
+        "key": "animate",
+        "defaultValue": true
+      },
+      {
+        "type": "boolean",
+        "label": "Legend",
+        "key": "legend",
+        "defaultValue": false
+      }
+    ]
+  },
+  "line": {
+    "name": "Line Chart",
+    "description": "Line chart",
+    "icon": "ri-line-chart-line",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Title",
+        "key": "title"
+      },
+      {
+        "type": "datasource",
+        "label": "Data",
+        "key": "datasource"
+      },
+      {
+        "type": "field",
+        "label": "Label Col.",
+        "key": "labelColumn",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "multifield",
+        "label": "Data Cols.",
+        "key": "valueColumns",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "select",
+        "label": "Format",
+        "key": "yAxisUnits",
+        "options": ["Default", "Thousands", "Millions"],
+        "defaultValue": "Default"
+      },
+      {
+        "type": "text",
+        "label": "Y Axis Label",
+        "key": "yAxisLabel"
+      },
+      {
+        "type": "text",
+        "label": "X Axis Label",
+        "key": "xAxisLabel"
+      },
+      {
+        "type": "text",
+        "label": "Width",
+        "key": "width"
+      },
+      {
+        "type": "text",
+        "label": "Height",
+        "key": "height",
+        "defaultValue": "400"
+      },
+      {
+        "type": "select",
+        "label": "Colours",
+        "key": "palette",
+        "defaultValue": "Palette 1",
+        "options": [
+          "Palette 1",
+          "Palette 2",
+          "Palette 3",
+          "Palette 4",
+          "Palette 5",
+          "Palette 6",
+          "Palette 7",
+          "Palette 8",
+          "Palette 9",
+          "Palette 10"
+        ]
+      },
+      {
+        "type": "select",
+        "label": "Curve",
+        "key": "curve",
+        "options": ["Smooth", "Straight", "Stepline"],
+        "defaultValue": "Smooth"
+      },
+      {
+        "type": "boolean",
+        "label": "Data Labels",
+        "key": "dataLabels",
+        "defaultValue": false
+      },
+      {
+        "type": "boolean",
+        "label": "Animate",
+        "key": "animate",
+        "defaultValue": true
+      },
+      {
+        "type": "boolean",
+        "label": "Legend",
+        "key": "legend",
+        "defaultValue": false
+      }
+    ]
+  },
+  "area": {
+    "name": "Area Chart",
+    "description": "Line chart",
+    "icon": "ri-line-chart-fill",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Title",
+        "key": "title"
+      },
+      {
+        "type": "datasource",
+        "label": "Data",
+        "key": "datasource"
+      },
+      {
+        "type": "field",
+        "label": "Label Col.",
+        "key": "labelColumn",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "multifield",
+        "label": "Data Cols.",
+        "key": "valueColumns",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "select",
+        "label": "Format",
+        "key": "yAxisUnits",
+        "options": ["Default", "Thousands", "Millions"],
+        "defaultValue": "Default"
+      },
+      {
+        "type": "text",
+        "label": "Y Axis Label",
+        "key": "yAxisLabel"
+      },
+      {
+        "type": "text",
+        "label": "X Axis Label",
+        "key": "xAxisLabel"
+      },
+      {
+        "type": "text",
+        "label": "Width",
+        "key": "width"
+      },
+      {
+        "type": "text",
+        "label": "Height",
+        "key": "height",
+        "defaultValue": "400"
+      },
+      {
+        "type": "select",
+        "label": "Colours",
+        "key": "palette",
+        "defaultValue": "Palette 1",
+        "options": [
+          "Palette 1",
+          "Palette 2",
+          "Palette 3",
+          "Palette 4",
+          "Palette 5",
+          "Palette 6",
+          "Palette 7",
+          "Palette 8",
+          "Palette 9",
+          "Palette 10"
+        ]
+      },
+      {
+        "type": "select",
+        "label": "Curve",
+        "key": "curve",
+        "options": ["Smooth", "Straight", "Stepline"],
+        "defaultValue": "Smooth"
+      },
+      {
+        "type": "boolean",
+        "label": "Data Labels",
+        "key": "dataLabels",
+        "defaultValue": false
+      },
+      {
+        "type": "boolean",
+        "label": "Animate",
+        "key": "animate",
+        "defaultValue": true
+      },
+      {
+        "type": "boolean",
+        "label": "Legend",
+        "key": "legend",
+        "defaultValue": false
+      },
+      {
+        "type": "boolean",
+        "label": "Stacked",
+        "key": "stacked",
+        "defaultValue": true
+      },
+      {
+        "type": "boolean",
+        "label": "Gradient",
+        "key": "gradient",
+        "defaultValue": false
+      }
+    ]
+  },
+  "pie": {
+    "name": "Pie Chart",
+    "description": "Pie chart",
+    "icon": "ri-pie-chart-line",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Title",
+        "key": "title"
+      },
+      {
+        "type": "datasource",
+        "label": "Data",
+        "key": "datasource"
+      },
+      {
+        "type": "field",
+        "label": "Label Col.",
+        "key": "labelColumn",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "field",
+        "label": "Data Col.",
+        "key": "valueColumn",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "text",
+        "label": "Width",
+        "key": "width"
+      },
+      {
+        "type": "text",
+        "label": "Height",
+        "key": "height",
+        "defaultValue": "400"
+      },
+      {
+        "type": "select",
+        "label": "Colours",
+        "key": "palette",
+        "defaultValue": "Palette 1",
+        "options": [
+          "Palette 1",
+          "Palette 2",
+          "Palette 3",
+          "Palette 4",
+          "Palette 5",
+          "Palette 6",
+          "Palette 7",
+          "Palette 8",
+          "Palette 9",
+          "Palette 10"
+        ]
+      },
+      {
+        "type": "boolean",
+        "label": "Data Labels",
+        "key": "dataLabels",
+        "defaultValue": false
+      },
+      {
+        "type": "boolean",
+        "label": "Animate",
+        "key": "animate",
+        "defaultValue": true
+      },
+      {
+        "type": "boolean",
+        "label": "Legend",
+        "key": "legend",
+        "defaultValue": false
+      }
+    ]
+  },
+  "donut": {
+    "name": "Donut Chart",
+    "description": "Donut chart",
+    "icon": "ri-donut-chart-line",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Title",
+        "key": "title"
+      },
+      {
+        "type": "datasource",
+        "label": "Data",
+        "key": "datasource"
+      },
+      {
+        "type": "field",
+        "label": "Label Col.",
+        "key": "labelColumn",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "field",
+        "label": "Data Col.",
+        "key": "valueColumn",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "text",
+        "label": "Width",
+        "key": "width"
+      },
+      {
+        "type": "text",
+        "label": "Height",
+        "key": "height",
+        "defaultValue": "400"
+      },
+      {
+        "type": "select",
+        "label": "Colours",
+        "key": "palette",
+        "defaultValue": "Palette 1",
+        "options": [
+          "Palette 1",
+          "Palette 2",
+          "Palette 3",
+          "Palette 4",
+          "Palette 5",
+          "Palette 6",
+          "Palette 7",
+          "Palette 8",
+          "Palette 9",
+          "Palette 10"
+        ]
+      },
+      {
+        "type": "boolean",
+        "label": "Data Labels",
+        "key": "dataLabels",
+        "defaultValue": false
+      },
+      {
+        "type": "boolean",
+        "label": "Animate",
+        "key": "animate",
+        "defaultValue": true
+      },
+      {
+        "type": "boolean",
+        "label": "Legend",
+        "key": "legend",
+        "defaultValue": false
+      }
+    ]
+  },
+  "candlestick": {
+    "name": "Candlestick Chart",
+    "description": "Candlestick chart",
+    "icon": "ri-stock-line",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Title",
+        "key": "title"
+      },
+      {
+        "type": "datasource",
+        "label": "Data",
+        "key": "datasource"
+      },
+      {
+        "type": "field",
+        "label": "Date Col.",
+        "key": "dateColumn",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "field",
+        "label": "Open Col.",
+        "key": "openColumn",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "field",
+        "label": "Close Col.",
+        "key": "closeColumn",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "field",
+        "label": "High Col.",
+        "key": "highColumn",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "field",
+        "label": "Low Col.",
+        "key": "lowColumn",
+        "dependsOn": "datasource"
+      },
+      {
+        "type": "select",
+        "label": "Format",
+        "key": "yAxisUnits",
+        "options": ["Default", "Thousands", "Millions"],
+        "defaultValue": "Default"
+      },
+      {
+        "type": "text",
+        "label": "Y Axis Label",
+        "key": "yAxisLabel"
+      },
+      {
+        "type": "text",
+        "label": "X Axis Label",
+        "key": "xAxisLabel"
+      },
+      {
+        "type": "text",
+        "label": "Width",
+        "key": "width"
+      },
+      {
+        "type": "text",
+        "label": "Height",
+        "key": "height",
+        "defaultValue": "400"
+      },
+      {
+        "type": "boolean",
+        "label": "Animate",
+        "key": "animate",
+        "defaultValue": true
+      }
+    ]
   }
 }
diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js
index c506b08564..a856e60a14 100644
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@@ -25,5 +25,4 @@ export { default as cardhorizontal } from "./CardHorizontal.svelte"
 export { default as cardstat } from "./CardStat.svelte"
 export { default as newrow } from "./NewRow.svelte"
 export { default as icon } from "./Icon.svelte"
-
-// export * from "./charts"
+export * from "./charts"