diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 21bb4b7ad8..6d929d333c 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -533,6 +533,316 @@ export default {
                 ],
               },
             },
+            {
+              name: "Scatterplot",
+              _component: "@budibase/standard-components/scatterplot",
+              description: "Scatterplot chart",
+              icon: "ri-bar-chart-fill",
+              presetProps: {
+                data: [
+                  {
+                    name: "topic",
+                    x: 123,
+                    y: 24,
+                  },
+                  {
+                    name: "topic1",
+                    x: 53,
+                    y: 31,
+                  },
+                  {
+                    name: "topic2",
+                    x: 631,
+                    y: 321,
+                  },
+                  {
+                    name: "topic1",
+                    x: 231,
+                    y: 111,
+                  },
+                ],
+              },
+              properties: {
+                settings: [
+                  {
+                    label: "Colors",
+                    key: "color",
+                    control: OptionSelect,
+                    options: [
+                      { label: "Normal", value: "britecharts" },
+                      { label: "Blue Green", value: "blueGreen" },
+                      { label: "Green", value: "green" },
+                      { label: "Grey", value: "grey" },
+                      { label: "Orange", value: "orange" },
+                      { label: "Pink", value: "pink" },
+                      { label: "Purple", value: "purple" },
+                      { label: "Red", value: "red" },
+                      { label: "Teal", value: "teal" },
+                      { label: "Yellow", value: "yellow" },
+                    ],
+                  },
+                  {
+                    label: "height",
+                    key: "height",
+                    control: Input,
+                  },
+                  {
+                    label: "Width",
+                    key: "width",
+                    control: Input,
+                  },
+                  {
+                    label: "Aspect Ratio",
+                    key: "aspectRatio",
+                    control: Input,
+                  },
+                  {
+                    label: "Circle Opacity",
+                    key: "circleOpacity",
+                    control: Input,
+                  },
+                  {
+                    label: "Grid",
+                    key: "grid",
+                    control: OptionSelect,
+                    options: ["vertical", "horizontal", "full"],
+                  },
+                  {
+                    label: "Has Crosshairs",
+                    key: "hasCrossHairs",
+                    valueKey: "checked",
+                    control: Checkbox,
+                  },
+                  {
+                    label: "Is Animated",
+                    key: "isAnimated",
+                    valueKey: "checked",
+                    control: Checkbox,
+                  },
+                  {
+                    label: "Max Circle Area",
+                    key: "maxCircleArea",
+                    control: Input,
+                  },
+                  {
+                    label: "X Axis Label",
+                    key: "xAxisLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "X Axis Label Offset",
+                    key: "xAxisLabelOffset",
+                    control: Input,
+                  },
+                  {
+                    label: "X Axis",
+                    key: "xTicks",
+                    control: Input,
+                  },
+                  {
+                    label: "Y Axis Format",
+                    key: "yAxisFormat",
+                    control: Input,
+                  },
+                  {
+                    label: "Y Axis Label",
+                    key: "yAxisLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Y Axis Label Offset",
+                    key: "yAxisLabelOffset",
+                    control: Input,
+                  },
+                  {
+                    label: "Y Ticks",
+                    key: "yTicks",
+                    control: Input,
+                  },
+                ],
+              },
+            },
+            {
+              name: "StackedArea",
+              _component: "@budibase/standard-components/stackedarea",
+              description: "StackedArea chart",
+              icon: "ri-bar-chart-fill",
+              presetProps: {
+                data: [
+                  {
+                    date: "2011-01-05T00:00:00Z",
+                    name: "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: "X Axis Label",
+                    key: "xAxisLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "X Axis Label Offset",
+                    key: "xAxisLabelOffset",
+                    control: Input,
+                  },
+                  {
+                    label: "Y Axis",
+                    key: "yAxisLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Y Axis Label Offset",
+                    key: "yAxisLabelOffset",
+                    control: Input,
+                  },
+                  {
+                    label: "Area Curve",
+                    key: "areaCurve",
+                    control: Input,
+                  },
+                  {
+                    label: "Area Opacity",
+                    key: "areaOpacity",
+                    control: Input,
+                  },
+                  {
+                    label: "Area Opacity",
+                    key: "areaOpacity",
+                    control: Input,
+                  },
+                  {
+                    label: "dateLabel",
+                    key: "dateLabel",
+                    control: Input,
+                  },
+                  {
+                    key: "isAnimated",
+                    label: "Is Animated",
+                    valueKey: "checked",
+                    control: Checkbox,
+                  },
+                  {
+                    label: "Key Label",
+                    key: "keyLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Locale",
+                    key: "locale",
+                    control: Input,
+                  },
+                  {
+                    label: "Value Label",
+                    key: "valueLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Use Legend",
+                    key: "useLegend",
+                    keyValue: "checked",
+                    control: Checkbox,
+                  },
+                ],
+              },
+            },
+            {
+              name: "Step",
+              _component: "@budibase/standard-components/step",
+              description: "Step chart",
+              icon: "ri-bar-chart-fill",
+              presetProps: {
+                data: [
+                  {
+                    value: 1,
+                    key: "glittering",
+                  },
+                  {
+                    value: 2,
+                    key: "luminous",
+                  },
+                ],
+              },
+              properties: {
+                settings: [
+                  {
+                    label: "height",
+                    key: "height",
+                    control: Input,
+                  },
+                  {
+                    label: "Width",
+                    key: "width",
+                    control: Input,
+                  },
+                  {
+                    label: "Y Axis Label",
+                    key: "yAxisLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Y Axis Label Offset",
+                    key: "yAxisLabelOffset",
+                    control: Input,
+                  },
+                  {
+                    label: "Y Ticks",
+                    key: "yTicks",
+                    control: Input,
+                  },
+                  {
+                    label: "X Axis Label Offset",
+                    key: "xAxisLabelOffset",
+                    control: Input,
+                  },
+                ],
+              },
+            },
             {
               name: "Sparkline",
               _component: "@budibase/standard-components/sparkline",
@@ -742,6 +1052,7 @@ export default {
                   {
                     label: "Use Legend",
                     key: "useLegend",
+                    keyValue: "checked",
                     control: Checkbox,
                   },
                 ],
@@ -1007,6 +1318,137 @@ export default {
                 ],
               },
             },
+            {
+              name: "Stacked Bar",
+              _component: "@budibase/standard-components/stackedbar",
+              description: "Stacked Bar Chart",
+              icon: "ri-file-list-fill",
+              presetProps: {
+                data: [
+                  {
+                    name: "2011-01",
+                    stack: "Direct",
+                    value: 0,
+                  },
+                ],
+              },
+              properties: {
+                settings: [
+                  {
+                    label: "Colors",
+                    key: "color",
+                    control: OptionSelect,
+                    options: [
+                      "britecharts",
+                      "blueGreen",
+                      "green",
+                      "grey",
+                      "orange",
+                      "pink",
+                      "purple",
+                      "red",
+                      "teal",
+                      "yellow",
+                    ],
+                  },
+                  {
+                    label: "Grid",
+                    key: "grid",
+                    control: OptionSelect,
+                    options: ["vertical", "horizontal", "full"],
+                  },
+                  {
+                    label: "Aspect Ratio",
+                    key: "aspectRatio",
+                    control: Input,
+                  },
+                  {
+                    label: "Between Bars Padding",
+                    key: "betweenBarsPadding",
+                    control: Input,
+                  },
+                  {
+                    label: "Max Ratio Percentage",
+                    key: "percentageToMaxRatio",
+                    control: Input,
+                  },
+                  {
+                    label: "Date Label",
+                    key: "dateLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Name Label",
+                    key: "nameLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Stack Label",
+                    key: "stackLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Width",
+                    key: "width",
+                    control: Input,
+                  },
+                  {
+                    label: "Height",
+                    key: "height",
+                    control: Input,
+                  },
+                  {
+                    label: "Locale",
+                    key: "locale",
+                    control: Input,
+                  },
+                  {
+                    label: "Is Animated",
+                    key: "isAnimated",
+                    control: Checkbox,
+                    valueKey: "checked",
+                  },
+                  {
+                    label: "Is Horizontal",
+                    key: "isHorizontal",
+                    control: Checkbox,
+                    valueKey: "checked",
+                  },
+                  {
+                    label: "Has Reversed Stacks",
+                    key: "hasReversedStacks",
+                    control: Checkbox,
+                    valueKey: "checked",
+                  },
+                  {
+                    label: "Has Percentage",
+                    key: "hasPercentage",
+                    control: Checkbox,
+                    valueKey: "checked",
+                  },
+                  {
+                    label: "X Ticks",
+                    key: "xTicks",
+                    control: Input,
+                  },
+                  {
+                    label: "Y Ticks",
+                    key: "yTicks",
+                    control: Input,
+                  },
+                  {
+                    label: "Y Axis Label",
+                    key: "yTicksLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Y Axis Label Offset",
+                    key: "yAxisLabelOffset",
+                    control: Input,
+                  },
+                ],
+              },
+            },
             {
               name: "Line",
               _component: "@budibase/standard-components/line",
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index b1c1da528a..6a90567f76 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -286,6 +286,103 @@
 			"valueLabel": "string"
 		}	
 	},
+	"stackedbar": {
+		"description": "Stacked Bar Chart",
+		"data": true,
+		"props": {
+			"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": {
+			"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": {
+			"height": "number",
+			"width": "number",
+			"margin": "string",
+			"xAxisLabel": "string",
+			"xAxisLabelOffset": "string",
+			"yAxisLabel": "string",
+			"yAxisLabelOffset": "string",	
+			"yTicks": "string"
+		}
+	},
+	"scatterplot": {
+		"description": "Scatterplot Chart",
+		"data": true,
+		"props": { 
+			"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,
diff --git a/packages/standard-components/src/Chart/ScatterPlot.svelte b/packages/standard-components/src/Chart/ScatterPlot.svelte
index e69de29bb2..9c92a635cc 100644
--- a/packages/standard-components/src/Chart/ScatterPlot.svelte
+++ b/packages/standard-components/src/Chart/ScatterPlot.svelte
@@ -0,0 +1,163 @@
+<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.scatterPlot()
+  const chartClass = `scatterplot-container-${_id}`
+  const legendClass = `legend-container-${_id}`
+
+  let chartElement = null
+  let chartContainer = null
+  let tooltip
+  let tooltipContainer
+
+  export let customClick = null
+  export let customMouseOut = () => tooltip.hide()
+  export let customMouseOver = () => tooltip.show()
+  export let customMouseMove = (
+    dataPoint,
+    colorMapping,
+    xPosition,
+    yPosition = null
+  ) => tooltip.update(dataPoint, colorMapping, xPosition, (yPosition = null))
+
+  export let data = []
+  export let color = "britecharts"
+  export let height = null
+  export let width = null
+  export let margin = null
+  export let aspectRatio = null
+  export let circleOpacity = null
+  export let grid = null
+  export let hasCrossHairs = null
+  export let hasHollowCircles = null
+  export let hasTrendline = null
+  export let highlightTextLegendOffset = null
+  export let isAnimated = null
+  export let maxCircleArea = null
+  export let xAxisFormat = null
+  export let xAxisLabel = null
+  export let xAxisLabelOffset = null
+  export let xTicks = null
+  export let yAxisFormat = null
+  export let yAxisLabel = null
+  export let yAxisLabelOffset = null
+  export let yTicks = 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(margin)) {
+      chart.width(margin)
+    }
+    if (notNull(aspectRatio)) {
+      chart.aspectRatio(aspectRatio)
+    }
+    if (notNull(circleOpacity)) {
+      chart.circleOpacity(circleOpacity)
+    }
+    if (notNull(grid)) {
+      chart.grid(grid)
+    }
+    if (notNull(hasCrossHairs)) {
+      chart.hasCrossHairs(hasCrossHairs)
+    }
+    if (notNull(hasHollowCircles)) {
+      chart.hasHollowCircles(hasHollowCircles)
+    }
+    if (notNull(hasTrendline)) {
+      chart.hasTrendline(hasTrendline)
+    }
+    if (notNull(highlightTextLegendOffset)) {
+      chart.highlightTextLegendOffset(highlightTextLegendOffset)
+    }
+    if (notNull(isAnimated)) {
+      chart.isAnimated(isAnimated)
+    }
+    if (notNull(maxCircleArea)) {
+      chart.maxCircleArea(maxCircleArea)
+    }
+    if (notNull(xAxisFormat)) {
+      chart.xAxisFormat(xAxisFormat)
+    }
+    if (notNull(xAxisLabel)) {
+      chart.xAxisLabel(xAxisLabel)
+    }
+    if (notNull(xAxisLabelOffset)) {
+      chart.xAxisLabelOffset(xAxisLabelOffset)
+    }
+    if (notNull(xTicks)) {
+      chart.xTicks(xTicks)
+    }
+    if (notNull(yAxisFormat)) {
+      chart.yAxisFormat(yAxisFormat)
+    }
+    if (notNull(yAxisLabel)) {
+      chart.yAxisLabel(yAxisLabel)
+    }
+    if (notNull(yAxisLabelOffset)) {
+      chart.yAxisLabelOffset(yAxisLabelOffset)
+    }
+    if (notNull(yTicks)) {
+      chart.yTicks(yTicks)
+    }
+  }
+
+  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)
+    }
+  }
+
+  function bindChartTooltip() {
+    //TODO: May be more apt to use tooltip() here. Currently erroring however
+    tooltip = britecharts.miniTooltip()
+    tooltipContainer = select(`.${chartClass} .metadata-group`)
+    // tooltip
+    //   .title("Temperature")
+    //   .valueLabel("y")
+    //   .nameLabel("x")
+    //   .numberFormat("$")
+    tooltipContainer.datum([]).call(tooltip)
+  }
+
+  $: colorSchema = getColorSchema(color)
+</script>
+
+<div bind:this={chartElement} class={chartClass} />
+{#if useLegend}
+  <div class={legendClass} />
+{/if}
diff --git a/packages/standard-components/src/Chart/StackedArea.svelte b/packages/standard-components/src/Chart/StackedArea.svelte
index e69de29bb2..8eabacef49 100644
--- a/packages/standard-components/src/Chart/StackedArea.svelte
+++ b/packages/standard-components/src/Chart/StackedArea.svelte
@@ -0,0 +1,157 @@
+<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.stackedArea()
+  const chartClass = `stackedarea-container-${_id}`
+  const legendClass = `legend-container-${_id}`
+
+  let chartElement = null
+  let chartContainer = null
+
+  export let customMouseOver = () => tooltip.show()
+  export let customMouseMove = (
+    dataPoint,
+    colorMapping,
+    xPosition,
+    yPosition = null
+  ) => tooltip.update(dataPoint, colorMapping, xPosition, (yPosition = null))
+  export let customMouseOut = () => tooltip.hide()
+
+  export let data = []
+  export let color = "britecharts"
+  export let height = null
+  export let width = null
+  export let margin = null
+  export let areaCurve = null
+  export let areaOpacity = null
+  export let aspectRatio = null
+  export let dateLabel = null
+  export let grid = null
+  export let isAnimated = null
+  export let keyLabel = null
+  export let locale = null
+  export let tooltipThreshold = null
+  export let topicsOrder = null
+  export let valueLabel = null
+  export let xAxisCustomFormat = null
+  export let xAxisFormat = null
+  export let xAxisScale = null
+  export let xAxisValueType = null
+  export let xTicks = null
+  export let yAxisBaseline = null
+  export let yAxisLabel = null
+  export let yAxisLabelOffset = null
+  export let yTicks = 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(margin)) {
+      chart.margin(margin)
+    }
+    if (notNull(areaCurve)) {
+      chart.areaCurve(areaCurve)
+    }
+    if (notNull(areaOpacity)) {
+      chart.areaOpacity(areaOpacity)
+    }
+    if (notNull(aspectRatio)) {
+      chart.aspectRatio(aspectRatio)
+    }
+    if (notNull(dateLabel)) {
+      chart.dateLabel(dateLabel)
+    }
+    if (notNull(grid)) {
+      chart.grid(grid)
+    }
+    if (notNull(isAnimated)) {
+      chart.isAnimated(isAnimated)
+    }
+    if (notNull(keyLabel)) {
+      chart.keyLabel(keyLabel)
+    }
+    if (notNull(locale)) {
+      chart.locale(locale)
+    }
+    if (notNull(tooltipThreshold)) {
+      chart.tooltipThreshold(tooltipThreshold)
+    }
+    if (notNull(topicsOrder)) {
+      chart.topicsOrder(topicsOrder)
+    }
+    if (notNull(valueLabel)) {
+      chart.valueLabel(valueLabel)
+    }
+    if (notNull(xAxisCustomFormat)) {
+      chart.xAxisCustomFormat(xAxisCustomFormat)
+    }
+    if (notNull(xAxisFormat)) {
+      chart.xAxisFormat(xAxisFormat)
+    }
+    if (notNull(xAxisScale)) {
+      chart.xAxisScale(xAxisScale)
+    }
+    if (notNull(xAxisValueType)) {
+      chart.xAxisValueType(xAxisValueType)
+    }
+    if (notNull(xTicks)) {
+      chart.xTicks(xTicks)
+    }
+    if (notNull(yAxisBaseline)) {
+      chart.yAxisBaseline(yAxisBaseline)
+    }
+    if (notNull(yAxisLabel)) {
+      chart.yAxisLabel(yAxisLabel)
+    }
+    if (notNull(yAxisLabelOffset)) {
+      chart.yAxisLabelOffset(yAxisLabelOffset)
+    }
+    if (notNull(yTicks)) {
+      chart.yTicks(yTicks)
+    }
+  }
+
+  function bindChartEvents() {
+    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/StackedBar.svelte b/packages/standard-components/src/Chart/StackedBar.svelte
new file mode 100644
index 0000000000..c8f2bc7fbc
--- /dev/null
+++ b/packages/standard-components/src/Chart/StackedBar.svelte
@@ -0,0 +1,152 @@
+<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.stackedBar()
+  const chartClass = `stackedbar-container-${_id}`
+  const legendClass = `legend-container-${_id}`
+
+  let chartElement = null
+  let chartContainer = null
+  let tooltip
+  let tooltipContainer
+
+  export let customMouseOver = () => tooltip.show()
+  export let customMouseMove = (dataPoint, colorMapping, xPosition) =>
+    tooltip.update(dataPoint, colorMapping, xPosition)
+  export let customMouseOut = () => tooltip.hide()
+
+  export let data = []
+  export let color = "britecharts"
+  export let height = null
+  export let width = null
+  export let margin = null
+  export let aspectRatio = null
+  export let betweenBarsPadding = null
+  export let grid = null
+  export let hasPercentage = null
+  export let hasReversedStacks = null
+  export let isAnimated = null
+  export let isHorizontal = null
+  export let locale = null
+  export let nameLabel = null
+  export let percentageAxisToMaxRatio = null
+  export let stackLabel = null
+  export let valueLabel = null
+  export let valueLabelFormat = null
+  export let xTicks = null
+  export let yTicks = null
+  export let yAxisLabel = null
+  export let yAxisLabelOffset = null
+  export let useLegend = true
+
+  onMount(() => {
+    if (chart) {
+      chartContainer = select(`.${chartClass}`)
+      bindChartUIProps()
+      bindChartEvents()
+      chartContainer.datum(data).call(chart)
+      //   bindChartTooltip()
+    }
+  })
+
+  function bindChartUIProps() {
+    //UI PROPS
+    if (notNull(color)) {
+      chart.colorSchema(colorSchema)
+    }
+    if (notNull(height)) {
+      chart.height(height)
+    }
+    if (notNull(width)) {
+      chart.width(width)
+    }
+    if (notNull(margin)) {
+      chart.margin(margin)
+    }
+    if (notNull(aspectRatio)) {
+      chart.aspectRatio(aspectRatio)
+    }
+    if (notNull(betweenBarsPadding)) {
+      chart.betweenBarsPadding(betweenBarsPadding)
+    }
+    if (notNull(grid)) {
+      chart.grid(grid)
+    }
+    if (notNull(hasPercentage)) {
+      chart.hasPercentage(hasPercentage)
+    }
+    if (notNull(hasReversedStacks)) {
+      chart.hasReversedStacks(hasReversedStacks)
+    }
+    if (notNull(isAnimated)) {
+      chart.isAnimated(isAnimated)
+    }
+    if (notNull(isHorizontal)) {
+      chart.isHorizontal(isHorizontal)
+    }
+    if (notNull(locale)) {
+      chart.locale(locale)
+    }
+    if (notNull(nameLabel)) {
+      chart.nameLabel(nameLabel)
+    }
+    if (notNull(percentageAxisToMaxRatio)) {
+      chart.percentageAxisToMaxRatio(percentageAxisToMaxRatio)
+    }
+    if (notNull(stackLabel)) {
+      chart.stackLabel(stackLabel)
+    }
+    if (notNull(valueLabel)) {
+      chart.valueLabel(valueLabel)
+    }
+    if (notNull(valueLabelFormat)) {
+      chart.valueLabelFormat(valueLabelFormat)
+    }
+    if (notNull(xTicks)) {
+      chart.xTicks(xTicks)
+    }
+    if (notNull(yTicks)) {
+      chart.yTicks(yTicks)
+    }
+    if (notNull(yAxisLabel)) {
+      chart.yAxisLabel(yAxisLabel)
+    }
+    if (notNull(yAxisLabelOffset)) {
+      chart.yAxisLabelOffset(yAxisLabelOffset)
+    }
+  }
+
+  function bindChartEvents() {
+    if (customMouseMove) {
+      chart.on("customMouseMove", customMouseMove)
+    }
+    if (customMouseOut) {
+      chart.on("customMouseOut", customMouseOut)
+    }
+    if (customMouseOver) {
+      chart.on("customMouseOver", customMouseOver)
+    }
+  }
+
+  function bindChartTooltip() {
+    tooltip = britecharts.tooltip()
+    // tooltip.topicLabel("Hi Im the topic")
+    // tooltip.topicsOrder(["x", "y"])
+    tooltipContainer = select(`.${chartClass} .metadata-group`)
+    tooltipContainer.datum([]).call(tooltip)
+  }
+
+  $: colorSchema = getColorSchema(color)
+</script>
+
+<div bind:this={chartElement} class={chartClass} />
+{#if useLegend}
+  <div class={legendClass} />
+{/if}
diff --git a/packages/standard-components/src/Chart/Step.svelte b/packages/standard-components/src/Chart/Step.svelte
index e69de29bb2..e1f53ca317 100644
--- a/packages/standard-components/src/Chart/Step.svelte
+++ b/packages/standard-components/src/Chart/Step.svelte
@@ -0,0 +1,105 @@
+<script>
+  import { getColorSchema, getChartGradient, notNull } from "./utils"
+  import britecharts from "britecharts"
+  import { onMount } from "svelte"
+
+  import { select } from "d3-selection"
+  import shortid from "shortid"
+
+  /* 
+  ISSUES - Doesn't seem to allow color change. Chart is colored black by default
+  */
+
+  const _id = shortid.generate()
+
+  const chart = britecharts.step()
+  const chartClass = `step-container-${_id}`
+  const legendClass = `legend-container-${_id}`
+
+  let chartElement = null
+  let chartContainer = null
+  let tooltip
+  let tooltipContainer
+
+  export let customMouseOver = () => tooltip.show()
+  export let customMouseMove = (
+    dataPoint,
+    colorMapping,
+    xPosition,
+    yPosition = null
+  ) => tooltip.update(dataPoint, colorMapping, xPosition, (yPosition = null))
+  export let customMouseOut = () => tooltip.hide()
+
+  export let data = []
+  export let height = null
+  export let width = null
+  export let margin = null
+  export let xAxisLabel = null
+  export let xAxisLabelOffset = null
+  export let yAxisLabel = null
+  export let yAxisLabelOffset = null
+  export let yTicks = null
+  export let useLegend = true
+
+  onMount(() => {
+    if (chart) {
+      chartContainer = select(`.${chartClass}`)
+      bindChartUIProps()
+      bindChartEvents()
+      chartContainer.datum(data).call(chart)
+      bindChartTooltip()
+    }
+  })
+
+  function bindChartUIProps() {
+    if (notNull(height)) {
+      chart.height(height)
+    }
+    if (notNull(width)) {
+      chart.width(width)
+    }
+    if (notNull(margin)) {
+      chart.margin(margin)
+    }
+    if (notNull(xAxisLabel)) {
+      chart.xAxisLabel(xAxisLabel)
+    }
+    if (notNull(xAxisLabelOffset)) {
+      chart.xAxisLabelOffset(xAxisLabelOffset)
+    }
+    if (notNull(yAxisLabel)) {
+      chart.yAxisLabel(yAxisLabel)
+    }
+    if (notNull(yAxisLabelOffset)) {
+      chart.yAxisLabelOffset(yAxisLabelOffset)
+    }
+    if (notNull(yTicks)) {
+      chart.yTicks(yTicks)
+    }
+  }
+
+  function bindChartEvents() {
+    if (customMouseMove) {
+      chart.on("customMouseMove", customMouseMove)
+    }
+    if (customMouseOut) {
+      chart.on("customMouseOut", customMouseOut)
+    }
+    if (customMouseOver) {
+      chart.on("customMouseOver", customMouseOver)
+    }
+  }
+
+  function bindChartTooltip() {
+    tooltip = britecharts.miniTooltip()
+    tooltipContainer = select(`.${chartClass} .metadata-group`)
+    tooltipContainer.datum([]).call(tooltip)
+  }
+
+  $: colorSchema = getColorSchema(color)
+</script>
+
+<div bind:this={chartElement} class={chartClass} />
+{#if useLegend}
+  <div class={legendClass} />
+{/if}
diff --git a/packages/standard-components/src/Chart/index.js b/packages/standard-components/src/Chart/index.js
index 127c76caf4..9f4427600d 100644
--- a/packages/standard-components/src/Chart/index.js
+++ b/packages/standard-components/src/Chart/index.js
@@ -6,4 +6,8 @@ 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"
+export { default as scatterplot } from "./ScatterPlot.svelte"
+export { default as step } from "./Step.svelte"
+export { default as stackedarea } from "./StackedArea.svelte"
+export { default as stackedbar } from "./StackedBar.svelte"