diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
index efd3db8ff7..12a7eea87d 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
@@ -29,6 +29,10 @@
 
     // Filter out settings which shouldn't be rendered
     sections.forEach(section => {
+      section.visible = shouldDisplay(instance, section)
+      if (!section.visible) {
+        return
+      }
       section.settings.forEach(setting => {
         setting.visible = canRenderControl(instance, setting, isScreen)
       })
@@ -46,17 +50,7 @@
     }
   }
 
-  const canRenderControl = (instance, setting, isScreen) => {
-    // Prevent rendering on click setting for screens
-    if (setting?.type === "event" && isScreen) {
-      return false
-    }
-
-    const control = getComponentForSetting(setting)
-    if (!control) {
-      return false
-    }
-
+  const shouldDisplay = (instance, setting) => {
     // Parse dependant settings
     if (setting.dependsOn) {
       let dependantSetting = setting.dependsOn
@@ -93,6 +87,19 @@
 
     return true
   }
+
+  const canRenderControl = (instance, setting, isScreen) => {
+    // Prevent rendering on click setting for screens
+    if (setting?.type === "event" && isScreen) {
+      return false
+    }
+    const control = getComponentForSetting(setting)
+    if (!control) {
+      return false
+    }
+
+    return shouldDisplay(instance, setting)
+  }
 </script>
 
 {#each sections as section, idx (section.name)}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json
index 3d9cf7e2a3..3100c7467c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json
@@ -6,7 +6,8 @@
       "tableblock",
       "cardsblock",
       "repeaterblock",
-      "formblock"
+      "formblock",
+      "chartblock"
     ]
   },
   {
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 763ac46b3f..93a53c15a3 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -3972,6 +3972,477 @@
       }
     ]
   },
+  "chartblock": {
+    "block": true,
+    "name": "Chart block",
+    "icon": "GraphPie",
+    "hasChildren": false,
+    "settings": [
+      {
+        "type": "select",
+        "label": "Chart Type",
+        "key": "chartType",
+        "required": true,
+        "options": [
+          {
+            "label": "Pie",
+            "value": "pie"
+          },
+          {
+            "label": "Bar",
+            "value": "bar"
+          },
+          {
+            "label": "Line",
+            "value": "line"
+          },
+          {
+            "label": "Donut",
+            "value": "donut"
+          },
+          {
+            "label": "Candlestick",
+            "value": "candlestick"
+          },
+          {
+            "label": "Area",
+            "value": "area"
+          }
+        ]
+      },
+      {
+        "type": "dataSource",
+        "label": "Data",
+        "key": "dataSource",
+        "required": true
+      },
+      {
+        "type": "text",
+        "label": "Title",
+        "key": "chartTitle"
+      },
+      {
+        "type": "filter",
+        "label": "Filtering",
+        "key": "filter"
+      },
+      {
+        "type": "field",
+        "label": "Sort Column",
+        "key": "sortColumn"
+      },
+      {
+        "type": "select",
+        "label": "Sort Order",
+        "key": "sortOrder",
+        "options": [
+          "Ascending",
+          "Descending"
+        ],
+        "defaultValue": "Ascending"
+      },
+      {
+        "type": "number",
+        "label": "Limit",
+        "key": "limit",
+        "defaultValue": 50
+      },
+      {
+        "type": "text",
+        "label": "Width",
+        "key": "width"
+      },
+      {
+        "type": "text",
+        "label": "Height",
+        "key": "height",
+        "defaultValue": "400"
+      },
+      {
+        "type": "select",
+        "label": "Colors",
+        "key": "palette",
+        "defaultValue": "Palette 1",
+        "options": [
+          "Custom",
+          "Palette 1",
+          "Palette 2",
+          "Palette 3",
+          "Palette 4",
+          "Palette 5",
+          "Palette 6",
+          "Palette 7",
+          "Palette 8",
+          "Palette 9",
+          "Palette 10"
+        ]
+      },
+      {
+        "type": "color",
+        "label": "C1",
+        "key": "c1",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
+      {
+        "type": "color",
+        "label": "C2",
+        "key": "c2",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
+      {
+        "type": "color",
+        "label": "C3",
+        "key": "c3",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
+      {
+        "type": "color",
+        "label": "C4",
+        "key": "c4",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
+      {
+        "type": "color",
+        "label": "C5",
+        "key": "c5",
+        "dependsOn": {
+          "setting": "palette",
+          "value": "Custom"
+        }
+      },
+      {
+        "type": "boolean",
+        "label": "Data Labels",
+        "key": "dataLabels",
+        "defaultValue": false
+      },
+      {
+        "type": "boolean",
+        "label": "Legend",
+        "key": "legend",
+        "defaultValue": true
+      },
+      {
+        "type": "boolean",
+        "label": "Animate",
+        "key": "animate",
+        "defaultValue": false
+      },
+      {
+        "section": true,
+        "name": "Pie Chart",
+        "icon": "GraphPie",
+        "dependsOn": {
+          "setting": "chartType",
+          "value": "pie"
+        },
+        "settings": [
+          {
+            "type": "field",
+            "label": "Label Col.",
+            "key": "labelColumn",
+            "dependsOn": "dataSource",
+            "required": true
+          },
+          {
+            "type": "field",
+            "label": "Data Col.",
+            "key": "valueColumn",
+            "dependsOn": "dataSource",
+            "required": true
+          }
+        ]
+      },
+      {
+        "section": true,
+        "name": "Donut Chart",
+        "icon": "GraphDonut",
+        "dependsOn": {
+          "setting": "chartType",
+          "value": "donut"
+        },
+        "settings": [
+          {
+            "type": "field",
+            "label": "Label Col.",
+            "key": "labelColumn",
+            "dependsOn": "dataSource",
+            "required": true
+          },
+          {
+            "type": "field",
+            "label": "Data Col.",
+            "key": "valueColumn",
+            "dependsOn": "dataSource",
+            "required": true
+          }
+        ]
+      },
+      {
+        "section": true,
+        "name": "Bar Chart",
+        "icon": "GraphBarVertical",
+        "dependsOn": {
+          "setting": "chartType",
+          "value": "bar"
+        },
+        "settings": [
+          {
+            "type": "field",
+            "label": "Label Col.",
+            "key": "labelColumn",
+            "dependsOn": "dataSource",
+            "required": true
+          },
+          {
+            "type": "multifield",
+            "label": "Data Cols.",
+            "key": "valueColumns",
+            "dependsOn": "dataSource",
+            "required": true
+          },
+          {
+            "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": "boolean",
+            "label": "Stacked",
+            "key": "stacked",
+            "defaultValue": false
+          },
+          {
+            "type": "boolean",
+            "label": "Horizontal",
+            "key": "horizontal",
+            "defaultValue": false
+          }
+        ]
+      },
+      {
+        "section": true,
+        "name": "Line Chart",
+        "icon": "GraphTrend",
+        "dependsOn": {
+          "setting": "chartType",
+          "value": "line"
+        },
+        "settings": [
+          {
+            "type": "field",
+            "label": "Label Col.",
+            "key": "labelColumn",
+            "dependsOn": "dataSource",
+            "required": true
+          },
+          {
+            "type": "multifield",
+            "label": "Data Cols.",
+            "key": "valueColumns",
+            "dependsOn": "dataSource",
+            "required": true
+          },
+          {
+            "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": "select",
+            "label": "Curve",
+            "key": "curve",
+            "options": [
+              "Smooth",
+              "Straight",
+              "Stepline"
+            ],
+            "defaultValue": "Smooth"
+          }
+        ]
+      },
+      {
+        "section": true,
+        "name": "Area Chart",
+        "icon": "GraphAreaStacked",
+        "dependsOn": {
+          "setting": "chartType",
+          "value": "area"
+        },
+        "settings": [
+          {
+            "type": "field",
+            "label": "Label Col.",
+            "key": "labelColumn",
+            "dependsOn": "dataSource",
+            "required": true
+          },
+          {
+            "type": "multifield",
+            "label": "Data Cols.",
+            "key": "valueColumns",
+            "dependsOn": "dataSource",
+            "required": true
+          },
+          {
+            "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": "select",
+            "label": "Curve",
+            "key": "curve",
+            "options": [
+              "Smooth",
+              "Straight",
+              "Stepline"
+            ],
+            "defaultValue": "Smooth"
+          },
+          {
+            "type": "boolean",
+            "label": "Stacked",
+            "key": "stacked",
+            "defaultValue": true
+          },
+          {
+            "type": "boolean",
+            "label": "Gradient",
+            "key": "gradient",
+            "defaultValue": false
+          }
+        ]
+      },
+      {
+        "section": true,
+        "name": "Candlestick Chart",
+        "icon": "GraphBarVerticalStacked",
+        "dependsOn": {
+          "setting": "chartType",
+          "value": "candlestick"
+        },
+        "settings": [
+          {
+            "type": "field",
+            "label": "Date Col.",
+            "key": "dateColumn",
+            "dependsOn": "dataSource",
+            "required": true
+          },
+          {
+            "type": "field",
+            "label": "Open Col.",
+            "key": "openColumn",
+            "dependsOn": "dataSource",
+            "required": true
+          },
+          {
+            "type": "field",
+            "label": "Close Col.",
+            "key": "closeColumn",
+            "dependsOn": "dataSource",
+            "required": true
+          },
+          {
+            "type": "field",
+            "label": "High Col.",
+            "key": "highColumn",
+            "dependsOn": "dataSource",
+            "required": true
+          },
+          {
+            "type": "field",
+            "label": "Low Col.",
+            "key": "lowColumn",
+            "dependsOn": "dataSource",
+            "required": true
+          },
+          {
+            "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"
+          }
+        ]
+      }
+    ]
+  },
   "tableblock": {
     "block": true,
     "name": "Table block",
diff --git a/packages/client/src/components/app/blocks/ChartBlock.svelte b/packages/client/src/components/app/blocks/ChartBlock.svelte
new file mode 100644
index 0000000000..7a2f8469b8
--- /dev/null
+++ b/packages/client/src/components/app/blocks/ChartBlock.svelte
@@ -0,0 +1,107 @@
+<script>
+  import { getContext } from "svelte"
+  import Block from "components/Block.svelte"
+  import BlockComponent from "components/BlockComponent.svelte"
+  import Placeholder from "components/app/Placeholder.svelte"
+  import { makePropSafe as safe } from "@budibase/string-templates"
+
+  // Datasource
+  export let filter
+  export let sortColumn
+  export let sortOrder
+  export let limit
+
+  // Block
+  export let chartTitle
+  export let chartType
+  export let dataSource
+  export let palette
+  export let c1, c2, c3, c4, c5
+  export let labelColumn
+  export let legend
+  export let animate
+  export let dataLabels
+  export let height
+  export let width
+
+  // Pie/Donut
+  export let valueColumn
+
+  // Bar
+  export let stacked
+  export let horizontal
+
+  // Bar/Line/Area
+  export let valueColumns
+  export let yAxisUnits
+  export let yAxisLabel
+  export let xAxisLabel
+  export let curve
+
+  // Area
+  export let gradient
+
+  // Candlestick
+  export let closeColumn
+  export let openColumn
+  export let highColumn
+  export let lowColumn
+  export let dateColumn
+
+  const component = getContext("component")
+
+  let dataProviderId
+
+  $: colors = c1 && c2 && c3 && c4 && c5 ? [c1, c2, c3, c4, c5] : null
+</script>
+
+<Block>
+  <BlockComponent
+    type="dataprovider"
+    context="provider"
+    bind:id={dataProviderId}
+    props={{
+      dataSource,
+      filter,
+      sortColumn,
+      sortOrder,
+      limit,
+    }}
+    order={0}
+  >
+    {#if $component.empty}
+      <Placeholder />
+    {:else}
+      <BlockComponent
+        type={chartType}
+        props={{
+          dataProvider: `{{ literal ${safe(dataProviderId)} }}`,
+          height,
+          width,
+          title: chartTitle,
+          labelColumn,
+          valueColumn,
+          valueColumns,
+          palette,
+          dataLabels,
+          legend,
+          animate,
+          ...colors,
+          yAxisUnits,
+          yAxisLabel,
+          xAxisLabel,
+          stacked,
+          horizontal,
+          curve,
+          gradient, //issue?
+          closeColumn,
+          openColumn,
+          highColumn,
+          lowColumn,
+          dateColumn,
+        }}
+        order={1}
+      />
+    {/if}
+  </BlockComponent>
+</Block>
diff --git a/packages/client/src/components/app/blocks/index.js b/packages/client/src/components/app/blocks/index.js
index 32b2b98c06..734bff2c0f 100644
--- a/packages/client/src/components/app/blocks/index.js
+++ b/packages/client/src/components/app/blocks/index.js
@@ -2,3 +2,4 @@ export { default as tableblock } from "./TableBlock.svelte"
 export { default as cardsblock } from "./CardsBlock.svelte"
 export { default as repeaterblock } from "./RepeaterBlock.svelte"
 export { default as formblock } from "./FormBlock.svelte"
+export { default as chartblock } from "./ChartBlock.svelte"
diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte
index 87d78bf5a2..eed8fb2e6c 100644
--- a/packages/client/src/components/app/charts/ApexChart.svelte
+++ b/packages/client/src/components/app/charts/ApexChart.svelte
@@ -24,8 +24,9 @@
     display: flex !important;
     text-transform: capitalize;
   }
-  div :global(.apexcharts-yaxis-label),
-  div :global(.apexcharts-xaxis-label) {
+  div :global(.apexcharts-text.apexcharts-xaxis-title-text),
+  div :global(.apexcharts-text.apexcharts-yaxis-title-text),
+  div :global(.apexcharts-title-text) {
     fill: var(--spectrum-global-color-gray-600);
   }
 
diff --git a/packages/client/src/components/app/charts/ApexOptionsBuilder.js b/packages/client/src/components/app/charts/ApexOptionsBuilder.js
index 6b3e3a4440..04b5805df3 100644
--- a/packages/client/src/components/app/charts/ApexOptionsBuilder.js
+++ b/packages/client/src/components/app/charts/ApexOptionsBuilder.js
@@ -184,6 +184,9 @@ export class ApexOptionsBuilder {
   }
 
   palette(palette) {
+    if (!palette) {
+      return this
+    }
     return this.setOption(
       ["theme", "palette"],
       palette.toLowerCase().replace(/[\W]/g, "")