1 files changed, 11 insertions, 2 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/column.vue b/app/assets/javascripts/monitoring/components/charts/column.vue
index 7a2e3e1b511..d7d01def45e 100644
--- a/app/assets/javascripts/monitoring/components/charts/column.vue
+++ b/app/assets/javascripts/monitoring/components/charts/column.vue
@@ -5,7 +5,8 @@ import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
 import { chartHeight } from '../../constants';
 import { makeDataSeries } from '~/helpers/monitor_helper';
 import { graphDataValidatorForValues } from '../../utils';
-import { getYAxisOptions, getChartGrid } from './options';
+import { getTimeAxisOptions, getYAxisOptions, getChartGrid } from './options';
+import { timezones } from '../../format_date';
 
 export default {
   components: {
@@ -20,6 +21,11 @@ export default {
       required: true,
       validator: graphDataValidatorForValues.bind(null, false),
     },
+    timezone: {
+      type: String,
+      required: false,
+      default: timezones.LOCAL,
+    },
   },
   data() {
     return {
@@ -43,6 +49,8 @@ export default {
       };
     },
     chartOptions() {
+      const xAxis = getTimeAxisOptions({ timezone: this.timezone });
+
       const yAxis = {
         ...getYAxisOptions(this.graphData.yAxis),
         scale: false,
@@ -50,8 +58,9 @@ export default {
 
       return {
         grid: getChartGrid(),
+        xAxis,
         yAxis,
-        dataZoom: this.dataZoomConfig,
+        dataZoom: [this.dataZoomConfig],
       };
     },
     xAxisTitle() {