diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 57b474cbb0..21bb4b7ad8 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -471,6 +471,143 @@ export default {
                 ],
               },
             },
+            {
+              name: "Heatmap",
+              _component: "@budibase/standard-components/heatmap",
+              description: "Heatmap chart",
+              icon: "ri-bar-chart-fill",
+              presetProps: {
+                data: [
+                  {
+                    day: 0,
+                    hour: 0,
+                    value: 7,
+                  },
+                  {
+                    day: 0,
+                    hour: 1,
+                    value: 10,
+                  },
+                ],
+              },
+              properties: {
+                settings: [
+                  {
+                    label: "Color",
+                    key: "color",
+                    control: OptionSelect,
+                    options: [
+                      "britecharts",
+                      "blueGreen",
+                      "green",
+                      "grey",
+                      "orange",
+                      "pink",
+                      "purple",
+                      "red",
+                      "teal",
+                      "yellow",
+                    ],
+                  },
+                  {
+                    label: "Show Legend",
+                    key: "useLegend ",
+                    valueKey: "checked",
+                    control: Checkbox,
+                  },
+                  {
+                    label: "Height",
+                    key: "height",
+                    control: Input,
+                  },
+                  {
+                    label: "Width",
+                    key: "width",
+                    control: Input,
+                  },
+                  {
+                    label: "Boxsize",
+                    key: "boxSize",
+                    control: Input,
+                  },
+                ],
+              },
+            },
+            {
+              name: "Sparkline",
+              _component: "@budibase/standard-components/sparkline",
+              description: "Sparkline chart",
+              icon: "ri-bar-chart-fill",
+              presetProps: {
+                data: [
+                  {
+                    value: 1,
+                    date: "2011-01-06T00:00:00Z",
+                  },
+                  {
+                    value: 2,
+                    date: "2011-01-07T00:00:00Z",
+                  },
+                ],
+              },
+              properties: {
+                settings: [
+                  {
+                    label: "Line Gradient",
+                    key: "lineGradient",
+                    control: OptionSelect,
+                    options: [
+                      { value: "", label: "None" },
+                      { value: "bluePurple", label: "Blue Purple" },
+                      { value: "greenBlue", label: "Green Blue" },
+                      { value: "orangePink", label: "Orange Pink" },
+                    ],
+                  },
+                  {
+                    label: "Area Gradient",
+                    key: "areaGradient",
+                    control: OptionSelect,
+                    options: [
+                      { value: "", label: "None" },
+                      { value: "bluePurple", label: "Blue Purple" },
+                      { value: "greenBlue", label: "Green Blue" },
+                      { value: "orangePink", label: "Orange Pink" },
+                    ],
+                  },
+                  {
+                    key: "height",
+                    label: "Height",
+                    control: Input,
+                  },
+                  {
+                    key: "width",
+                    label: "Width",
+                    control: Input,
+                  },
+                  {
+                    key: "dateLabel",
+                    label: "Date Label",
+                    control: Input,
+                  },
+                  {
+                    key: "isAnimated",
+                    label: "Is Animated",
+                    valueKey: "checked",
+                    control: Checkbox,
+                  },
+                  {
+                    key: "titleText",
+                    label: "Title Text",
+                    control: Input,
+                  },
+                  {
+                    key: "valueLabel",
+                    label: "Value Label",
+                    control: Input,
+                  },
+                ],
+              },
+            },
             {
               name: "Bar",
               _component: "@budibase/standard-components/bar",
@@ -717,6 +854,100 @@ export default {
                 ],
               },
             },
+            {
+              name: "Groupedbar",
+              _component: "@budibase/standard-components/groupedbar",
+              description: "Groupedbar chart",
+              icon: "ri-bar-chart-fill",
+              presetProps: {
+                data: [
+                  {
+                    name: "2011-01",
+                    group: "Direct",
+                    value: 0,
+                  },
+                ],
+              },
+              properties: {
+                settings: [
+                  {
+                    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: "Height",
+                    key: "height",
+                    control: Input,
+                  },
+                  {
+                    label: "Grid",
+                    key: "grid",
+                    control: OptionSelect,
+                    options: ["vertical", "horizontal", "full"],
+                  },
+                  {
+                    label: "Group Label",
+                    key: "groupLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Name Label",
+                    key: "nameLabel",
+                    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,
+                  },
+                ],
+              },
+            },
             {
               name: "Bullet",
               _component: "@budibase/standard-components/bullet",
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index a45edf5edd..b1c1da528a 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -271,6 +271,21 @@
 			"percentageFormat": "string"
 		}
 	},
+	"sparkline": {
+		"description": "Sparkline Chart",
+		"data": true,
+		"props": {
+			"areaGradient": "string",
+			"height": "number",
+			"width": "number",
+			"dateLabel": "string",
+			"duration": "string",
+			"isAnimated": "bool",
+			"lineGradient": "string",
+			"titleText": "string",
+			"valueLabel": "string"
+		}	
+	},
 	"bar": {
 		"description": "Bar Chart",
 		"data": true,
@@ -339,6 +354,38 @@
 			"xAxisCustomFormat": "string"
 		}
 	},
+	"heatmap": {
+		"description": "Groupedbar chart",
+		"data": true,
+		"props": {
+			"color": "string",
+			"height": "number",
+			"width": "number",
+			"useLegend": "bool",
+			"yAxisLabel": "string",
+			"boxSize": "number"
+		}		
+	},
+	"groupedbar": {
+		"description": "Groupedbar chart",
+		"data": true,
+		"props": {
+			"color": "string",
+			"height": "string",
+			"width": "string",
+			"margin": "string",
+			"aspectRatio": "number",
+			"grid":"string",
+			"groupLabel": "string",
+			"isAnimated": "bool",
+			"isHorizontal": "bool",
+			"nameLabel": "string",
+			"valueLabel":"string",
+			"yTicks": "string",
+			"yTickTextOffset": "string",
+			"useLegend": "bool"
+		}
+	},
 	"bullet": {
 		"description": "Bullet chart",
 		"data": true,
diff --git a/packages/standard-components/src/Chart/GroupedBar.svelte b/packages/standard-components/src/Chart/GroupedBar.svelte
index e69de29bb2..a4ef3e1e23 100644
--- a/packages/standard-components/src/Chart/GroupedBar.svelte
+++ b/packages/standard-components/src/Chart/GroupedBar.svelte
@@ -0,0 +1,139 @@
+<script>
+  import { getColorSchema, getChartGradient, notNull } from "./utils"
+  import britecharts from "britecharts"
+  import { onMount } from "svelte"
+
+  /* 
+    ISSUES
+    - Renders but seems to be a problem with tooltip hover
+  */
+
+  import { select } from "d3-selection"
+  import shortid from "shortid"
+
+  const _id = shortid.generate()
+
+  const chart = britecharts.groupedBar()
+  const chartClass = `groupedbar-container-${_id}`
+  const legendClass = `legend-container-${_id}`
+
+  let tooltip
+  let tooltipContainer
+  let chartElement = null
+  let chartContainer = null
+
+  export let customMouseOver = () => tooltip.show()
+  export let customMouseMove = (dataPoint, topicColorMap, dataPointXPosition) =>
+    tooltip.update(dataPoint, topicColorMap, dataPointXPosition)
+  export let customMouseOut = () => tooltip.hide()
+  export let customClick = null
+
+  export let data = []
+  export let color = "britecharts"
+  export let height = 200
+  export let width = 200
+  export let margin = { top: 0, right: 0, bottom: 0, left: 0 }
+  export let aspectRatio = null
+  export let grid = null
+  export let groupLabel = null
+  export let isAnimated = null
+  export let isHorizontal = null
+  export let nameLabel = null
+  export let valueLabel = null
+  export let valueLabelFormat = null
+  export let xTicks = null
+  export let yAxisLabel = null
+  export let yAxisLabelOffset = null
+  export let yTicks = null
+  export let yTickTextOffset = null
+  export let useLegend = true
+
+  onMount(() => {
+    if (chart) {
+      chartContainer = select(`.${chartClass}`)
+      bindChartUIProps()
+      //   bindChartEvents()
+      chartContainer.datum(data).call(chart)
+      //   bindChartTooltip()
+    }
+  })
+
+  function bindChartUIProps() {
+    if (notNull(color)) {
+      chart.colorSchema(colorSchema)
+    }
+    if (notNull(height)) {
+      chart.height(height)
+    }
+    if (notNull(width)) {
+      chart.width(width)
+    }
+    if (notNull(aspectRatio)) {
+      chart.aspectRatio(aspectRatio)
+    }
+    if (notNull(grid)) {
+      chart.grid(grid)
+    }
+    if (notNull(groupLabel)) {
+      chart.groupLabel(groupLabel)
+    }
+    if (notNull(isAnimated)) {
+      chart.isAnimated(isAnimated)
+    }
+    if (notNull(isHorizontal)) {
+      chart.isHorizontal(isHorizontal)
+    }
+    if (notNull(nameLabel)) {
+      chart.nameLabel(nameLabel)
+    }
+    if (notNull(valueLabel)) {
+      chart.valueLabel(valueLabel)
+    }
+    if (notNull(valueLabelFormat)) {
+      chart.valueLabelFormat(valueLabelFormat)
+    }
+    if (notNull(xTicks)) {
+      chart.xTicks(xTicks)
+    }
+    if (notNull(yAxisLabel)) {
+      chart.yAxisLabel(yAxisLabel)
+    }
+    if (notNull(yAxisLabelOffset)) {
+      chart.yAxisLabelOffset(yAxisLabelOffset)
+    }
+    if (notNull(yTicks)) {
+      chart.yTicks(yTicks)
+    }
+    if (notNull(yTickTextOffset)) {
+      chart.yTickTextOffset(yTickTextOffset)
+    }
+  }
+
+  function bindChartTooltip() {
+    tooltip = britecharts.miniTooltip()
+    tooltipContainer = select(`.${chartClass} .metadata-group`)
+    tooltipContainer.datum([]).call(tooltip)
+  }
+
+  function bindChartEvents() {
+    if (customClick) {
+      chart.on("customClick", customClick)
+    }
+    if (customMouseMove) {
+      chart.on("customMouseMove", customMouseMove)
+    }
+    if (customMouseOut) {
+      chart.on("customMouseOut", customMouseOut)
+    }
+    if (customMouseOver) {
+      chart.on("customMouseOver", customMouseOver)
+    }
+  }
+
+  $: colorSchema = getColorSchema(color)
+</script>
+
+<div bind:this={chartElement} class={chartClass} />
+{#if useLegend}
+  <div class={legendClass} />
+{/if}
diff --git a/packages/standard-components/src/Chart/Heatmap.svelte b/packages/standard-components/src/Chart/Heatmap.svelte
index e69de29bb2..41c4affdb8 100644
--- a/packages/standard-components/src/Chart/Heatmap.svelte
+++ b/packages/standard-components/src/Chart/Heatmap.svelte
@@ -0,0 +1,59 @@
+<script>
+  import { getColorSchema, getChartGradient, notNull } from "./utils"
+  import britecharts from "britecharts"
+  import { onMount } from "svelte"
+
+  import { select } from "d3-selection"
+  import shortid from "shortid"
+
+  const _id = shortid.generate()
+
+  const chart = britecharts.heatmap()
+  const chartClass = `heatmap-container-${_id}`
+  const legendClass = `legend-container-${_id}`
+
+  let chartElement = null
+  let chartContainer = null
+
+  export let data = []
+  export let color = "britecharts"
+  export let height = 200
+  export let width = 200
+  export let margin = { top: 0, right: 0, bottom: 0, left: 0 }
+  export let useLegend = true
+  export let yAxisLabels = null
+  export let boxSize = null
+
+  onMount(() => {
+    if (chart) {
+      chartContainer = select(`.${chartClass}`)
+      bindChartUIProps()
+      chartContainer.datum(data).call(chart)
+    }
+  })
+
+  function bindChartUIProps() {
+    if (notNull(color)) {
+      chart.colorSchema(colorSchema)
+    }
+    if (notNull(height)) {
+      chart.height(height)
+    }
+    if (notNull(width)) {
+      chart.width(width)
+    }
+    if (notNull(boxSize)) {
+      chart.boxSize(boxSize)
+    }
+    if (notNull(yAxisLabels)) {
+      chart.yAxisLabels(yAxisLabels)
+    }
+  }
+
+  $: colorSchema = getColorSchema(color)
+</script>
+
+<div bind:this={chartElement} class={chartClass} />
+{#if useLegend}
+  <div class={legendClass} />
+{/if}
diff --git a/packages/standard-components/src/Chart/Sparkline.svelte b/packages/standard-components/src/Chart/Sparkline.svelte
index e69de29bb2..0d321a81f2 100644
--- a/packages/standard-components/src/Chart/Sparkline.svelte
+++ b/packages/standard-components/src/Chart/Sparkline.svelte
@@ -0,0 +1,79 @@
+<script>
+  import { getColorSchema, getChartGradient, notNull } from "./utils"
+  import britecharts from "britecharts"
+  import { onMount } from "svelte"
+
+  import { select } from "d3-selection"
+  import shortid from "shortid"
+
+  const _id = shortid.generate()
+
+  const chart = britecharts.sparkline()
+  const chartClass = `sparkline-container-${_id}`
+  const legendClass = `legend-container-${_id}`
+
+  let chartElement = null
+  let chartContainer = null
+
+  export let data = []
+  export let areaGradient = null
+  export let height = null
+  export let width = null
+  export let dateLabel = null
+  export let duration = null
+  export let isAnimated = null
+  export let lineGradient = null
+  export let titleText = null
+  export let titleTextStyle = null
+  export let valueLabel = null
+  export let useLegend = true
+
+  onMount(() => {
+    if (chart) {
+      chartContainer = select(`.${chartClass}`)
+      bindChartUIProps()
+      chartContainer.datum(data).call(chart)
+    }
+  })
+
+  function bindChartUIProps() {
+    if (notNull(areaGradient)) {
+      chart.areaGradient(aGradient)
+    }
+    if (notNull(lineGradient)) {
+      chart.lineGradient(lGradient)
+    }
+    if (notNull(height)) {
+      chart.height(height)
+    }
+    if (notNull(width)) {
+      chart.width(width)
+    }
+    if (notNull(dateLabel)) {
+      chart.dateLabel(dateLabel)
+    }
+    if (notNull(duration)) {
+      chart.duration(duration)
+    }
+    if (notNull(isAnimated)) {
+      chart.isAnimated(isAnimated)
+    }
+    if (notNull(titleText)) {
+      chart.titleText(titleText)
+    }
+    if (notNull(titleTextStyle)) {
+      chart.titleTextStyle(titleTextStyle)
+    }
+    if (notNull(valueLabel)) {
+      chart.valueLabel(valueLabel)
+    }
+  }
+
+  $: aGradient = getChartGradient(areaGradient)
+  $: lGradient = getChartGradient(lineGradient)
+</script>
+
+<div bind:this={chartElement} class={chartClass} />
+{#if useLegend}
+  <div class={legendClass} />
+{/if}
diff --git a/packages/standard-components/src/Chart/Temp.svelte b/packages/standard-components/src/Chart/Temp.svelte
index 5c0450cdc1..1703c7b604 100644
--- a/packages/standard-components/src/Chart/Temp.svelte
+++ b/packages/standard-components/src/Chart/Temp.svelte
@@ -31,6 +31,8 @@
       bindChartTooltip()
     }
   })
+
+  $: colorSchema = getColorSchema(color)
 </script>
 
 <div bind:this={chartElement} class={chartClass} />
diff --git a/packages/standard-components/src/Chart/index.js b/packages/standard-components/src/Chart/index.js
index 81433297e3..127c76caf4 100644
--- a/packages/standard-components/src/Chart/index.js
+++ b/packages/standard-components/src/Chart/index.js
@@ -3,4 +3,7 @@ export { default as bar } from "./Bar.svelte"
 export { default as line } from "./Line.svelte"
 export { default as brush } from "./Brush.svelte"
 export { default as bullet } from "./Bullet.svelte"
+export { default as groupedbar } from "./GroupedBar.svelte"
+export { default as heatmap } from "./Heatmap.svelte"
+export { default as sparkline } from "./Sparkline.svelte"