diff --git a/web/src/api/asset_interfaces/metric/defaults.ts b/web/src/api/asset_interfaces/metric/defaults.ts
index dcabefdac..1a077e1f0 100644
--- a/web/src/api/asset_interfaces/metric/defaults.ts
+++ b/web/src/api/asset_interfaces/metric/defaults.ts
@@ -18,6 +18,7 @@ export const DEFAULT_CHART_CONFIG: IBusterMetricChartConfig = {
   y2AxisShowAxisTitle: true,
   y2AxisStartAxisAtZero: true,
   y2AxisScaleType: 'linear',
+  xAxisTimeInterval: null,
   xAxisShowAxisLabel: true,
   xAxisShowAxisTitle: true,
   xAxisAxisTitle: null,
diff --git a/web/src/app/app/_controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxis.tsx b/web/src/app/app/_controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxis.tsx
index 1001af0b1..aa62e4c0d 100644
--- a/web/src/app/app/_controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxis.tsx
+++ b/web/src/app/app/_controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxis.tsx
@@ -18,7 +18,7 @@ import { SelectAxisEmptyState } from './SelectAxisEmptyState';
 
 export const SelectAxis: React.FC<
   Required<YAxisConfig> &
-    Required<XAxisConfig> &
+    Required<Omit<XAxisConfig, 'xAxisTimeInterval'>> &
     Required<CategoryAxisStyleConfig> &
     Required<Y2AxisConfig> &
     ISelectAxisContext
diff --git a/web/src/app/app/_controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/useSelectAxisContext.tsx b/web/src/app/app/_controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/useSelectAxisContext.tsx
index ced0b1052..1c956773c 100644
--- a/web/src/app/app/_controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/useSelectAxisContext.tsx
+++ b/web/src/app/app/_controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/useSelectAxisContext.tsx
@@ -17,7 +17,7 @@ import React from 'react';
 export interface ISelectAxisContext
   extends Required<YAxisConfig>,
     Required<Y2AxisConfig>,
-    Required<XAxisConfig>,
+    Required<Omit<XAxisConfig, 'xAxisTimeInterval'>>,
     Required<CategoryAxisStyleConfig> {
   selectedAxis: ChartEncodes | null;
   columnLabelFormats: IBusterMetricChartConfig['columnLabelFormats'];
diff --git a/web/src/app/app/_controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/StylingAppVisualize.tsx b/web/src/app/app/_controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/StylingAppVisualize.tsx
index 6cc6ddce2..75b5af896 100644
--- a/web/src/app/app/_controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/StylingAppVisualize.tsx
+++ b/web/src/app/app/_controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/StylingAppVisualize.tsx
@@ -23,7 +23,6 @@ export const StylingAppVisualize: React.FC<
     colors: string[];
     disableTooltip: IBusterMetricChartConfig['disableTooltip'];
   } & Required<YAxisConfig> &
-    Required<XAxisConfig> &
     Required<CategoryAxisStyleConfig> &
     Required<Y2AxisConfig> &
     Omit<ISelectAxisContext, 'selectedAxis'> &
diff --git a/web/src/components/charts/BusterChartJS/BusterChartJSComponent.tsx b/web/src/components/charts/BusterChartJS/BusterChartJSComponent.tsx
index 4036e3a87..3b0997524 100644
--- a/web/src/components/charts/BusterChartJS/BusterChartJSComponent.tsx
+++ b/web/src/components/charts/BusterChartJS/BusterChartJSComponent.tsx
@@ -64,6 +64,7 @@ export const BusterChartJSComponent = React.memo(
         goalLines,
         lineGroupType,
         disableTooltip,
+        xAxisTimeInterval,
         //TODO
         xAxisDataZoom,
         useRapidResizeObserver = false,
@@ -158,7 +159,8 @@ export const BusterChartJSComponent = React.memo(
         y2AxisStartAxisAtZero,
         yAxisScaleType,
         animate,
-        disableTooltip
+        disableTooltip,
+        xAxisTimeInterval
       });
 
       const type = useMemo(() => {
diff --git a/web/src/components/charts/BusterChartJS/hooks/useOptions/useOptions.tsx b/web/src/components/charts/BusterChartJS/hooks/useOptions/useOptions.tsx
index d6cc7a4f0..5754ac04a 100644
--- a/web/src/components/charts/BusterChartJS/hooks/useOptions/useOptions.tsx
+++ b/web/src/components/charts/BusterChartJS/hooks/useOptions/useOptions.tsx
@@ -54,6 +54,7 @@ interface UseOptionsProps {
   goalLinesAnnotations: AnnotationPluginOptions['annotations'];
   trendlineAnnotations: AnnotationPluginOptions['annotations'];
   disableTooltip: boolean;
+  xAxisTimeInterval: BusterChartProps['xAxisTimeInterval'];
 }
 
 export const useOptions = ({
@@ -92,7 +93,8 @@ export const useOptions = ({
   animate,
   goalLinesAnnotations,
   trendlineAnnotations,
-  disableTooltip
+  disableTooltip,
+  xAxisTimeInterval
 }: UseOptionsProps) => {
   const xAxis = useXAxis({
     columnLabelFormats,
@@ -106,7 +108,8 @@ export const useOptions = ({
     xAxisAxisTitle,
     xAxisShowAxisTitle,
     lineGroupType,
-    barGroupType
+    barGroupType,
+    xAxisTimeInterval
   });
 
   const yAxis = useYAxis({
diff --git a/web/src/components/charts/BusterChartJS/hooks/useOptions/useXAxis.ts b/web/src/components/charts/BusterChartJS/hooks/useOptions/useXAxis.ts
index bd35984c5..1d2fe294b 100644
--- a/web/src/components/charts/BusterChartJS/hooks/useOptions/useXAxis.ts
+++ b/web/src/components/charts/BusterChartJS/hooks/useOptions/useXAxis.ts
@@ -27,7 +27,8 @@ export const useXAxis = ({
   xAxisShowAxisTitle,
   gridLines,
   lineGroupType,
-  barGroupType
+  barGroupType,
+  xAxisTimeInterval
 }: {
   columnLabelFormats: NonNullable<BusterChartConfigProps['columnLabelFormats']>;
   selectedAxis: ChartEncodes;
@@ -41,6 +42,7 @@ export const useXAxis = ({
   lineGroupType: BusterChartProps['lineGroupType'];
   barGroupType: BusterChartProps['barGroupType'];
   columnSettings: BusterChartProps['columnSettings'];
+  xAxisTimeInterval: BusterChartProps['xAxisTimeInterval'];
 }): DeepPartial<ScaleChartOptions<'bar'>['scales']['x']> | undefined => {
   const isScatterChart = selectedChartType === ChartType.Scatter;
   const isPieChart = selectedChartType === ChartType.Pie;
@@ -161,7 +163,11 @@ export const useXAxis = ({
           callback: useTicketCallback ? tickCallback : null,
           autoSkip: true,
           autoSkipPadding: 3,
-          align: 'center'
+          align: 'center',
+          time: {
+            unit: xAxisTimeInterval
+          },
+          source: 'auto'
         },
         display: true,
         border: {
diff --git a/web/src/components/charts/interfaces/tickInterfaces.ts b/web/src/components/charts/interfaces/tickInterfaces.ts
index 1690603bf..6baa310f6 100644
--- a/web/src/components/charts/interfaces/tickInterfaces.ts
+++ b/web/src/components/charts/interfaces/tickInterfaces.ts
@@ -16,6 +16,7 @@ export type Y2AxisConfig = {
 };
 
 export type XAxisConfig = {
+  xAxisTimeInterval?: 'day' | 'week' | 'month' | 'quarter' | 'year' | null; //OPTIONAL: default is null. Will only apply to combo and line charts
   xAxisShowAxisLabel?: boolean; //OPTIONAL: default is true.
   xAxisShowAxisTitle?: boolean; //OPTIONAL: default is true.
   xAxisAxisTitle?: string | null; //OPTIONAL: default is null. If null the axis title will be a concatenation of all the x columns applied to the axis.
diff --git a/web/src/context/Metrics/BusterMetricsProvider.tsx b/web/src/context/Metrics/BusterMetricsProvider.tsx
index 570c5b054..86ce2847d 100644
--- a/web/src/context/Metrics/BusterMetricsProvider.tsx
+++ b/web/src/context/Metrics/BusterMetricsProvider.tsx
@@ -17,7 +17,7 @@ import { RustApiError } from '@/api/buster_rest/errors';
 import { resolveEmptyMetric, upgradeMetricToIMetric } from './helpers';
 import { MetricUpdateMetric } from '@/api/buster_socket/metrics';
 import { useBusterMetricDataContextSelector } from '../MetricData';
-import { createMockMetric, MOCK_METRIC } from './MOCK_METRIC';
+import { createMockMetric } from './MOCK_METRIC';
 import { useUpdateMetricConfig } from './useUpdateMetricConfig';
 import { useUpdateMetricAssosciations } from './useUpdateMetricAssosciations';