1 files changed, 11 insertions, 10 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/stacked_column.vue b/app/assets/javascripts/monitoring/components/charts/stacked_column.vue
index 9bcd4419a14..66b4d0d86e6 100644
--- a/app/assets/javascripts/monitoring/components/charts/stacked_column.vue
+++ b/app/assets/javascripts/monitoring/components/charts/stacked_column.vue
@@ -61,14 +61,16 @@ export default {
   },
   computed: {
     chartData() {
-      return this.graphData.metrics.map(({ result }) => {
-        // This needs a fix. Not only metrics[0] should be shown.
-        // See https://gitlab.com/gitlab-org/gitlab/-/issues/220492
-        if (!result || result.length === 0) {
-          return [];
-        }
-        return result[0].values.map(val => val[1]);
-      });
+      return this.graphData.metrics
+        .map(({ label: name, result }) => {
+          // This needs a fix. Not only metrics[0] should be shown.
+          // See https://gitlab.com/gitlab-org/gitlab/-/issues/220492
+          if (!result || result.length === 0) {
+            return [];
+          }
+          return { name, data: result[0].values.map(val => val[1]) };
+        })
+        .slice(0, 1);
     },
     xAxisTitle() {
       return this.graphData.x_label !== undefined ? this.graphData.x_label : '';
@@ -136,7 +138,7 @@ export default {
     <gl-stacked-column-chart
       ref="chart"
       v-bind="$attrs"
-      :data="chartData"
+      :bars="chartData"
       :option="chartOptions"
       :x-axis-title="xAxisTitle"
       :y-axis-title="yAxisTitle"
@@ -144,7 +146,6 @@ export default {
       :group-by="groupBy"
       :width="width"
       :height="height"
-      :series-names="seriesNames"
       :legend-layout="legendLayout"
       :legend-average-text="legendAverageText"
       :legend-current-text="legendCurrentText"