diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 84abe7be6d..36bb026d96 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -1655,7 +1655,7 @@
       {
         "type": "select",
         "label": "Format",
-        "key": "yAxisUnits",
+        "key": "valueUnits",
         "options": ["Default", "Thousands", "Millions"],
         "defaultValue": "Default"
       },
@@ -1813,7 +1813,7 @@
       {
         "type": "select",
         "label": "Format",
-        "key": "yAxisUnits",
+        "key": "valueUnits",
         "options": ["Default", "Thousands", "Millions"],
         "defaultValue": "Default"
       },
@@ -1966,7 +1966,7 @@
       {
         "type": "select",
         "label": "Format",
-        "key": "yAxisUnits",
+        "key": "valueUnits",
         "options": ["Default", "Thousands", "Millions"],
         "defaultValue": "Default"
       },
@@ -2410,7 +2410,7 @@
       {
         "type": "select",
         "label": "Format",
-        "key": "yAxisUnits",
+        "key": "valueUnits",
         "options": ["Default", "Thousands", "Millions"],
         "defaultValue": "Default"
       },
@@ -5341,7 +5341,7 @@
           {
             "type": "select",
             "label": "Format",
-            "key": "yAxisUnits",
+            "key": "valueUnits",
             "options": ["Default", "Thousands", "Millions"],
             "defaultValue": "Default"
           },
@@ -5436,7 +5436,7 @@
           {
             "type": "select",
             "label": "Format",
-            "key": "yAxisUnits",
+            "key": "valueUnits",
             "options": ["Default", "Thousands", "Millions"],
             "defaultValue": "Default"
           },
@@ -5485,7 +5485,7 @@
           {
             "type": "select",
             "label": "Format",
-            "key": "yAxisUnits",
+            "key": "valueUnits",
             "options": ["Default", "Thousands", "Millions"],
             "defaultValue": "Default"
           },
@@ -5567,7 +5567,7 @@
           {
             "type": "select",
             "label": "Format",
-            "key": "yAxisUnits",
+            "key": "valueUnits",
             "options": ["Default", "Thousands", "Millions"],
             "defaultValue": "Default"
           },
diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte
index 411774c353..3f0ce221e5 100644
--- a/packages/client/src/components/app/charts/ApexChart.svelte
+++ b/packages/client/src/components/app/charts/ApexChart.svelte
@@ -8,6 +8,9 @@
   const component = getContext("component")
 
   export let options
+
+  // Apex charts directly modifies the options object with default properties and internal variables. These being present could unintentionally cause issues to the provider of this prop as the changes are reflected in that component as well. To prevent any issues we clone this here to provide a buffer.
+  $: optionsCopy = cloneDeep(options);
   /*
   export let invalid = false
 
@@ -27,8 +30,8 @@
     return parsedValue
   }
 
-  const parseOptions = (options) => {
-    const parsedOptions = { series: [], ...cloneDeep(options)}
+  const parseOptions = (optionsCopy) => {
+    const parsedOptions = { series: [], ...cloneDeep(optionsCopy)}
 
     // Object form of series, used by most charts
     if (parsedOptions.series.some(entry => Array.isArray(entry?.data))) {
@@ -41,7 +44,7 @@
     return parsedOptions;
   }
 
-  $: parsedOptions = parseOptions(options);
+  $: parsedOptions = parseOptions(optionsCopy);
   */
 
   let chartElement;
@@ -58,7 +61,7 @@
   const renderChart = async (newChartElement) => {
     try {
       await chart?.destroy()
-      chart = new ApexCharts(newChartElement, options)
+      chart = new ApexCharts(newChartElement, optionsCopy)
       await chart.render()
     } catch(e) {
       //console.log(e)
@@ -69,17 +72,17 @@
     return true
   }
 
-  $: noData = options == null || options?.series?.length === 0
+  $: noData = optionsCopy == null || optionsCopy?.series?.length === 0
   $: hide = noData || !seriesValid
 
   // Call render chart upon changes to hide, as apex charts has issues with rendering upon changes automatically
   // if the chart is hidden.
   $: renderChart(chartElement, hide)
-  $: updateChart(options)
-  $: seriesValid = isSeriesValid(options?.series || [])
+  $: updateChart(optionsCopy)
+  $: seriesValid = isSeriesValid(optionsCopy?.series || [])
 </script>
 
-{#key options?.customColor}
+{#key optionsCopy?.customColor}
   <div class:hide use:styleable={$component.styles} bind:this={chartElement} />
   {#if $builderStore.inBuilder && noData }
     <div class="component-placeholder" use:styleable={{ ...$component.styles, normal: {}, custom: null, empty: true }}>
diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte
index e18ac77cf7..5e3aa104b2 100644
--- a/packages/client/src/components/app/charts/BarChart.svelte
+++ b/packages/client/src/components/app/charts/BarChart.svelte
@@ -16,7 +16,7 @@
   export let animate
   export let legend
   export let stacked
-  export let yAxisUnits
+  export let valueUnits
   export let palette
   export let c1, c2, c3, c4, c5
   export let horizontal
@@ -25,13 +25,17 @@
     ["Default"]: val => val,
     ["Thousands"]: val => `${Math.round(val / 1000)}K`,
     ["Millions"]: val => `${Math.round(val / 1000000)}M`,
+    ["Datetime"]: val => (new Date(val)).toLocaleString()
   }
 
   $: series = getSeries(dataProvider, valueColumns)
   $: categories = getCategories(dataProvider, labelColumn);
 
-  $: dataType = dataProvider?.schema?.[labelColumn]?.type === 'datetime' ? 
+  $: labelType = dataProvider?.schema?.[labelColumn]?.type === 'datetime' ? 
     "datetime" : "category"
+  $: formatter = getFormatter(labelType, valueUnits)
+  $: xAxisFormatter = getFormatter(labelType, valueUnits, horizontal, "x")
+  $: yAxisFormatter = getFormatter(labelType, valueUnits, horizontal, "y")
 
   $: options = {
     series,
@@ -68,19 +72,29 @@
         enabled: false,
       },
     },
+    plotOptions: {
+      bar: {
+        horizontal
+      }
+    },
+    // We can just always provide the categories to the xaxis and horizontal mode automatically handles "tranposing" the categories to the yaxis, but certain things like labels need to be manually put on a certain axis based on the selected mode. Titles do not need to be handled this way, they are exposed to the user as "X axis" and Y Axis" so flipping them would be confusing.
     xaxis: {
-      type: dataType,
+      type: labelType,
       categories,
+      labels: {
+        formatter: xAxisFormatter
+      },
       title: {
         text: xAxisLabel
       }
     },
+    // bar charts in horizontal mode don't have a default setting for parsing the labels of dates, and will just spit out the unix epoch value. It also doesn't seem to respect any date based formatting properties passed in. So we'll just manualy format the labels, the chart still sorts the dates correctly in any case
     yaxis: {
+      labels: {
+        formatter: yAxisFormatter
+      },
       title: {
         text: yAxisLabel
-      },
-      labels: {
-        formatter: formatters[yAxisUnits]
       }
     }
   }
@@ -111,6 +125,15 @@
     })
   }
 
+  const getFormatter = (labelType, valueUnits, horizontal, axis) => {
+    const isLabelAxis = (axis === "y" && horizontal) || axis === "x" && !horizontal
+    if (labelType === "datetime" && isLabelAxis) {
+      return formatters["Datetime"]
+    }
+
+    return formatters[valueUnits]
+  }
+
   $: console.log("opt", options);
 </script>