Merge branch '351906-stacked-column-chart-responsiveness' into 'master'

Refactored stack column chart responsiveness

See merge request gitlab-org/gitlab!81452

app/assets/javascripts/monitoring/components/charts/stacked_column.vue

 <script>
-import { GlResizeObserverDirective } from '@gitlab/ui';
 import { GlStackedColumnChart } from '@gitlab/ui/dist/charts';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
 import { s__ } from '~/locale';
@@ -12,9 +11,6 @@ export default {
   components: {
     GlStackedColumnChart,
   },
-  directives: {
-    GlResizeObserverDirective,
-  },
   props: {
     graphData: {
       type: Object,
@@ -125,19 +121,14 @@ export default {
           console.error('SVG could not be rendered correctly: ', e);
         });
     },
-    onResize() {
-      if (!this.$refs.chart) return;
-      const { width } = this.$refs.chart.$el.getBoundingClientRect();
-      this.width = width;
-    },
   },
 };
 </script>
 <template>
-  <div v-gl-resize-observer-directive="onResize">
   <gl-stacked-column-chart
     ref="chart"
     v-bind="$attrs"
+    :responsive="true"
     :bars="chartData"
     :option="chartOptions"
     :x-axis-title="xAxisTitle"
@@ -152,5 +143,4 @@ export default {
     :legend-max-text="legendMaxText"
     :legend-min-text="legendMinText"
   />
-  </div>
 </template>