diff --git a/app/assets/javascripts/monitoring/components/charts/time_series.vue b/app/assets/javascripts/monitoring/components/charts/time_series.vue
index f3f3bf1529540acdb9a74cbd494cc757f4ba9a1f..64d0a713b13feeafabf7324d275b3ec05e1f9aaa 100644
--- a/app/assets/javascripts/monitoring/components/charts/time_series.vue
+++ b/app/assets/javascripts/monitoring/components/charts/time_series.vue
@@ -122,7 +122,7 @@ export default {
           },
         },
         series: this.scatterSeries,
-        dataZoom: this.dataZoomConfig,
+        dataZoom: [this.dataZoomConfig],
       };
     },
     dataZoomConfig() {
diff --git a/ee/changelogs/unreleased/fix-scrollhandle-in-time-series.yml b/ee/changelogs/unreleased/fix-scrollhandle-in-time-series.yml
new file mode 100644
index 0000000000000000000000000000000000000000..33c7a4000504c6c137e8a850200a00ae45d1dcf2
--- /dev/null
+++ b/ee/changelogs/unreleased/fix-scrollhandle-in-time-series.yml
@@ -0,0 +1,5 @@
+---
+title: Fixes scroll handle icon in time series
+merge_request: 16354
+author:
+type: fixed
diff --git a/spec/javascripts/monitoring/charts/time_series_spec.js b/spec/javascripts/monitoring/charts/time_series_spec.js
index f6a5ed03c0dfb2e7a055c9a8bef2d69b4a592c12..091ab06523e6797d8ce6a08f45955a299651b7ef 100644
--- a/spec/javascripts/monitoring/charts/time_series_spec.js
+++ b/spec/javascripts/monitoring/charts/time_series_spec.js
@@ -140,6 +140,16 @@ describe('Time series component', () => {
             expect(timeSeriesChart.vm.svgs[mockSvgName]).toBe(`path://${mockSvgPathContent}`);
           });
         });
+
+        it('contains an svg object within an array to properly render icon', () => {
+          timeSeriesChart.vm.$nextTick(() => {
+            expect(timeSeriesChart.vm.chartOptions.dataZoom).toEqual([
+              {
+                handleIcon: `path://${mockSvgPathContent}`,
+              },
+            ]);
+          });
+        });
       });
 
       describe('onResize', () => {