diff --git a/ui/src/shared/constants/timeRanges.ts b/ui/src/shared/constants/timeRanges.ts
index de1180aedbe..10d2c0787ce 100644
--- a/ui/src/shared/constants/timeRanges.ts
+++ b/ui/src/shared/constants/timeRanges.ts
@@ -11,6 +11,7 @@ export const pastHourTimeRange: SelectableDurationTimeRange = {
   label: 'Past 1h',
   duration: '1h',
   type: 'selectable-duration',
+  windowPeriod: 10000, // 10s
 }
 
 export const pastThirtyDaysTimeRange: SelectableDurationTimeRange = {
@@ -20,6 +21,7 @@ export const pastThirtyDaysTimeRange: SelectableDurationTimeRange = {
   label: 'Past 30d',
   duration: '30d',
   type: 'selectable-duration',
+  windowPeriod: 3600000, // 1h
 }
 
 export const pastFifteenMinTimeRange: SelectableDurationTimeRange = {
@@ -29,6 +31,7 @@ export const pastFifteenMinTimeRange: SelectableDurationTimeRange = {
   label: 'Past 15m',
   duration: '15m',
   type: 'selectable-duration',
+  windowPeriod: 10000, // 10s
 }
 
 export const CUSTOM_TIME_RANGE: {label: string; type: 'custom'} = {
@@ -44,6 +47,7 @@ export const SELECTABLE_TIME_RANGES: SelectableDurationTimeRange[] = [
     label: 'Past 5m',
     duration: '5m',
     type: 'selectable-duration',
+    windowPeriod: 10000, // 10s
   },
   pastFifteenMinTimeRange,
   pastHourTimeRange,
@@ -54,6 +58,7 @@ export const SELECTABLE_TIME_RANGES: SelectableDurationTimeRange[] = [
     label: 'Past 6h',
     duration: '6h',
     type: 'selectable-duration',
+    windowPeriod: 60000, // 1m
   },
   {
     seconds: 43200,
@@ -62,6 +67,7 @@ export const SELECTABLE_TIME_RANGES: SelectableDurationTimeRange[] = [
     label: 'Past 12h',
     duration: '12h',
     type: 'selectable-duration',
+    windowPeriod: 120000, // 2m
   },
   {
     seconds: 86400,
@@ -70,6 +76,7 @@ export const SELECTABLE_TIME_RANGES: SelectableDurationTimeRange[] = [
     label: 'Past 24h',
     duration: '24h',
     type: 'selectable-duration',
+    windowPeriod: 300000, // 5m
   },
   {
     seconds: 172800,
@@ -78,6 +85,7 @@ export const SELECTABLE_TIME_RANGES: SelectableDurationTimeRange[] = [
     label: 'Past 2d',
     duration: '2d',
     type: 'selectable-duration',
+    windowPeriod: 600000, // 10m
   },
   {
     seconds: 604800,
@@ -86,6 +94,7 @@ export const SELECTABLE_TIME_RANGES: SelectableDurationTimeRange[] = [
     label: 'Past 7d',
     duration: '7d',
     type: 'selectable-duration',
+    windowPeriod: 1800000, // 30 min
   },
   pastThirtyDaysTimeRange,
 ]
diff --git a/ui/src/types/queries.ts b/ui/src/types/queries.ts
index 711cb4c9637..b5678a2a9ad 100644
--- a/ui/src/types/queries.ts
+++ b/ui/src/types/queries.ts
@@ -24,6 +24,7 @@ export interface SelectableDurationTimeRange {
   label: string
   duration: string
   type: 'selectable-duration'
+  windowPeriod: number
 }
 
 export interface DurationTimeRange {
diff --git a/ui/src/variables/utils/getWindowVars.ts b/ui/src/variables/utils/getWindowVars.ts
index 326bf06ec39..bbcd4027ccf 100644
--- a/ui/src/variables/utils/getWindowVars.ts
+++ b/ui/src/variables/utils/getWindowVars.ts
@@ -10,6 +10,7 @@ import {WINDOW_PERIOD} from 'src/variables/constants'
 
 // Types
 import {VariableAssignment, Package} from 'src/types/ast'
+import {SELECTABLE_TIME_RANGES} from 'src/shared/constants/timeRanges'
 
 const DESIRED_POINTS_PER_GRAPH = 360
 const FALLBACK_WINDOW_PERIOD = 15000
@@ -63,7 +64,15 @@ export const getWindowPeriod = (
       files: [ast, buildVarsOption(variables)],
     }
 
-    const queryDuration = getMinDurationFromAST(substitutedAST)
+    const queryDuration = getMinDurationFromAST(substitutedAST) // in ms
+
+    const foundDuration = SELECTABLE_TIME_RANGES.find(
+      tr => tr.seconds * 1000 == queryDuration
+    )
+
+    if (foundDuration) {
+      return foundDuration.windowPeriod
+    }
 
     return Math.round(queryDuration / DESIRED_POINTS_PER_GRAPH)
   } catch (error) {