Wrap chart in ResizableChartContainer

app/assets/javascripts/projects/pipelines/charts/components/pipelines_area_chart.vue

 <script>
 import { GlAreaChart } from '@gitlab/ui/dist/charts';
-import { __ } from '~/locale';
+import { s__ } from '~/locale';
+import ResizableChartContainer from '~/vue_shared/components/resizable_chart/resizable_chart_container.vue';
 import { CHART_CONTAINER_HEIGHT } from '../constants';
 
 export default {
   components: {
     GlAreaChart,
+    ResizableChartContainer,
   },
   props: {
     chartData: {
@@ -15,11 +17,11 @@ export default {
   },
   areaChartOptions: {
     xAxis: {
-      name: __('Date'),
+      name: s__('Pipeline|Date'),
       type: 'category',
     },
     yAxis: {
-      name: __('Pipelines'),
+      name: s__('Pipeline|Pipelines'),
     },
   },
   chartContainerHeight: CHART_CONTAINER_HEIGHT,
@@ -30,13 +32,15 @@ export default {
     <p>
       <slot></slot>
     </p>
-    <div>
+    <resizable-chart-container>
       <gl-area-chart
+        slot-scope="{ width }"
+        :width="width"
         :height="$options.chartContainerHeight"
         :data="chartData"
         :include-legend-avg-max="false"
         :option="$options.areaChartOptions"
       />
-    </div>
+    </resizable-chart-container>
   </div>
 </template>

locale/gitlab.pot

@@ -13741,6 +13741,9 @@ msgstr ""
 msgid "Pipeline|Coverage"
 msgstr ""
 
+msgid "Pipeline|Date"
+msgstr ""
+
 msgid "Pipeline|Detached merge request pipeline"
 msgstr ""
 
@@ -13762,6 +13765,9 @@ msgstr ""
 msgid "Pipeline|Pipeline"
 msgstr ""
 
+msgid "Pipeline|Pipelines"
+msgstr ""
+
 msgid "Pipeline|Run Pipeline"
 msgstr ""
 

spec/frontend/projects/pipelines/charts/components/__snapshots__/pipelines_area_chart_spec.js.snap

@@ -9,13 +9,14 @@ exports[`PipelinesAreaChart matches the snapshot 1`] = `
   </p>
    
   <div>
-    <gl-area-chart-stub
+    <glareachart-stub
       data="[object Object],[object Object]"
       height="300"
       legendaveragetext="Avg"
       legendmaxtext="Max"
       option="[object Object]"
       thresholds=""
+      width="0"
     />
   </div>
 </div>

spec/frontend/projects/pipelines/charts/components/pipelines_area_chart_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import Component from '~/projects/pipelines/charts/components/pipelines_area_chart.vue';
 import { transformedAreaChartData } from '../mock_data';
 
@@ -6,13 +6,16 @@ describe('PipelinesAreaChart', () => {
   let wrapper;
 
   beforeEach(() => {
-    wrapper = shallowMount(Component, {
+    wrapper = mount(Component, {
       propsData: {
         chartData: transformedAreaChartData,
       },
       slots: {
         default: 'Some title',
       },
+      stubs: {
+        GlAreaChart: true,
+      },
     });
   });