diff --git a/web/src/app/services/AlertMetrics/AlertAveragesGraph.tsx b/web/src/app/services/AlertMetrics/AlertAveragesGraph.tsx
index c1ea7b054a..b5b2b034fe 100644
--- a/web/src/app/services/AlertMetrics/AlertAveragesGraph.tsx
+++ b/web/src/app/services/AlertMetrics/AlertAveragesGraph.tsx
@@ -2,12 +2,12 @@ import React from 'react'
 import { Grid, Paper, Typography } from '@mui/material'
 import makeStyles from '@mui/styles/makeStyles/makeStyles'
 import { Theme, useTheme } from '@mui/material/styles'
+import AutoSizer from 'react-virtualized-auto-sizer'
 import {
   XAxis,
   YAxis,
   CartesianGrid,
   Tooltip,
-  ResponsiveContainer,
   LineChart,
   Line,
   Legend,
@@ -59,81 +59,83 @@ export default function AlertAveragesGraph(
   return (
     <Grid container className={classes.graphContent}>
       <Grid item xs={12} data-cy='metrics-averages-graph'>
-        <ResponsiveContainer width='100%' height='100%'>
-          <LineChart
-            width={730}
-            height={250}
-            data={props.data}
-            margin={{
-              top: 50,
-              right: 30,
-              bottom: 50,
-            }}
-          >
-            <CartesianGrid
-              strokeDasharray='4'
-              vertical={false}
-              stroke={theme.palette.text.secondary}
-            />
-            <XAxis
-              dataKey='date'
-              type='category'
-              stroke={theme.palette.text.secondary}
-            />
-            <YAxis
-              type='number'
-              allowDecimals={false}
-              interval='preserveStart'
-              stroke={theme.palette.text.secondary}
-            />
-            <Tooltip
-              data-cy='metrics-tooltip'
-              cursor={{ fill: theme.palette.background.default }}
-              content={({ active, payload, label }) => {
-                if (!active || !payload?.length) return null
-
-                const ackAvg = `${payload[0].name}: ${Math.round(
-                  payload[0].payload.avgTimeToAck,
-                )} min`
-                const closeAvg = `${payload[1].name}: ${Math.round(
-                  payload[1].payload.avgTimeToClose,
-                )} min`
-                return (
-                  <Paper variant='outlined' sx={{ p: 1 }}>
-                    <Typography variant='body2'>{label}</Typography>
-                    <Typography variant='body2'>{closeAvg}</Typography>
-                    <Typography variant='body2'>{ackAvg}</Typography>
-                  </Paper>
-                )
+        <AutoSizer>
+          {({ width, height }) => (
+            <LineChart
+              width={width}
+              height={height}
+              data={props.data}
+              margin={{
+                top: 50,
+                right: 30,
+                bottom: 50,
               }}
-            />
-            <Legend />
-            <Line
-              type='monotone'
-              dataKey='avgTimeToAck'
-              strokeWidth={2}
-              stroke={theme.palette.primary.main}
-              activeDot={{ r: 8 }}
-              isAnimationActive={false}
-              dot={CustomDot}
-              name='Avg. Ack'
-            />
-            <Line
-              type='monotone'
-              strokeWidth={2}
-              dataKey='avgTimeToClose'
-              isAnimationActive={false}
-              stroke={
-                theme.palette.mode === 'light'
-                  ? theme.palette.secondary.dark
-                  : theme.palette.secondary.light
-              }
-              activeDot={{ r: 8 }}
-              dot={CustomDot}
-              name='Avg. Close'
-            />
-          </LineChart>
-        </ResponsiveContainer>
+            >
+              <CartesianGrid
+                strokeDasharray='4'
+                vertical={false}
+                stroke={theme.palette.text.secondary}
+              />
+              <XAxis
+                dataKey='date'
+                type='category'
+                stroke={theme.palette.text.secondary}
+              />
+              <YAxis
+                type='number'
+                allowDecimals={false}
+                interval='preserveStart'
+                stroke={theme.palette.text.secondary}
+              />
+              <Tooltip
+                data-cy='metrics-tooltip'
+                cursor={{ fill: theme.palette.background.default }}
+                content={({ active, payload, label }) => {
+                  if (!active || !payload?.length) return null
+
+                  const ackAvg = `${payload[0].name}: ${Math.round(
+                    payload[0].payload.avgTimeToAck,
+                  )} min`
+                  const closeAvg = `${payload[1].name}: ${Math.round(
+                    payload[1].payload.avgTimeToClose,
+                  )} min`
+                  return (
+                    <Paper variant='outlined' sx={{ p: 1 }}>
+                      <Typography variant='body2'>{label}</Typography>
+                      <Typography variant='body2'>{closeAvg}</Typography>
+                      <Typography variant='body2'>{ackAvg}</Typography>
+                    </Paper>
+                  )
+                }}
+              />
+              <Legend />
+              <Line
+                type='monotone'
+                dataKey='avgTimeToAck'
+                strokeWidth={2}
+                stroke={theme.palette.primary.main}
+                activeDot={{ r: 8 }}
+                isAnimationActive={false}
+                dot={CustomDot}
+                name='Avg. Ack'
+              />
+              <Line
+                type='monotone'
+                strokeWidth={2}
+                dataKey='avgTimeToClose'
+                isAnimationActive={false}
+                stroke={
+                  theme.palette.mode === 'light'
+                    ? theme.palette.secondary.dark
+                    : theme.palette.secondary.light
+                }
+                activeDot={{ r: 8 }}
+                dot={CustomDot}
+                name='Avg. Close'
+              />
+            </LineChart>
+          )}
+        </AutoSizer>
       </Grid>
     </Grid>
   )
diff --git a/web/src/app/services/AlertMetrics/AlertCountGraph.tsx b/web/src/app/services/AlertMetrics/AlertCountGraph.tsx
index 29fc868205..41388c8990 100644
--- a/web/src/app/services/AlertMetrics/AlertCountGraph.tsx
+++ b/web/src/app/services/AlertMetrics/AlertCountGraph.tsx
@@ -2,12 +2,12 @@ import React from 'react'
 import { Grid, Paper, Typography } from '@mui/material'
 import makeStyles from '@mui/styles/makeStyles/makeStyles'
 import { Theme, useTheme } from '@mui/material/styles'
+import AutoSizer from 'react-virtualized-auto-sizer'
 import {
   XAxis,
   YAxis,
   CartesianGrid,
   Tooltip,
-  ResponsiveContainer,
   BarChart,
   Bar,
   Legend,
@@ -37,72 +37,76 @@ export default function AlertCountGraph(
   return (
     <Grid container className={classes.graphContent}>
       <Grid item xs={12} data-cy='metrics-count-graph'>
-        <ResponsiveContainer width='100%' height='100%'>
-          <BarChart
-            width={730}
-            height={250}
-            data={props.data}
-            margin={{
-              top: 50,
-              right: 30,
-              bottom: 50,
-            }}
-          >
-            <CartesianGrid
-              strokeDasharray='4'
-              vertical={false}
-              stroke={theme.palette.text.secondary}
-            />
-            <XAxis
-              dataKey='date'
-              type='category'
-              stroke={theme.palette.text.secondary}
-            />
-            <YAxis
-              allowDecimals={false}
-              dataKey='count'
-              stroke={theme.palette.text.secondary}
-            />
-            <Tooltip
-              data-cy='metrics-tooltip'
-              cursor={{ fill: theme.palette.background.default }}
-              content={({ active, payload, label }) => {
-                if (!active || !payload?.length) return null
-
-                const alertCountStr = `${payload[1].name}: ${
-                  (payload[1].value as number) + (payload[0].value as number)
-                }`
-                const escalatedCountStr = `${payload[0].name}: ${payload[0].value}`
-                return (
-                  <Paper variant='outlined' sx={{ p: 1 }}>
-                    <Typography variant='body2'>{label}</Typography>
-                    <Typography variant='body2'>{alertCountStr}</Typography>
-                    <Typography variant='body2'>{escalatedCountStr}</Typography>
-                  </Paper>
-                )
+        <AutoSizer>
+          {({ width, height }) => (
+            <BarChart
+              width={width}
+              height={height}
+              data={props.data}
+              margin={{
+                top: 50,
+                right: 30,
+                bottom: 50,
               }}
-            />
-            <Legend />
-            <Bar
-              dataKey='escalatedCount'
-              stackId='a'
-              fill={theme.palette.primary.main}
-              className={classes.bar}
-              name='Escalated'
-            />
-            <Bar
-              stackId='a'
-              dataKey='nonEscalatedCount'
-              fill={
-                theme.palette.mode === 'light'
-                  ? theme.palette.secondary.dark
-                  : theme.palette.secondary.light
-              }
-              className={classes.bar}
-              name='Alert Count'
-            />
-          </BarChart>
-        </ResponsiveContainer>
+            >
+              <CartesianGrid
+                strokeDasharray='4'
+                vertical={false}
+                stroke={theme.palette.text.secondary}
+              />
+              <XAxis
+                dataKey='date'
+                type='category'
+                stroke={theme.palette.text.secondary}
+              />
+              <YAxis
+                allowDecimals={false}
+                dataKey='count'
+                stroke={theme.palette.text.secondary}
+              />
+              <Tooltip
+                data-cy='metrics-tooltip'
+                cursor={{ fill: theme.palette.background.default }}
+                content={({ active, payload, label }) => {
+                  if (!active || !payload?.length) return null
+
+                  const alertCountStr = `${payload[1].name}: ${
+                    (payload[1].value as number) + (payload[0].value as number)
+                  }`
+                  const escalatedCountStr = `${payload[0].name}: ${payload[0].value}`
+                  return (
+                    <Paper variant='outlined' sx={{ p: 1 }}>
+                      <Typography variant='body2'>{label}</Typography>
+                      <Typography variant='body2'>{alertCountStr}</Typography>
+                      <Typography variant='body2'>
+                        {escalatedCountStr}
+                      </Typography>
+                    </Paper>
+                  )
+                }}
+              />
+              <Legend />
+              <Bar
+                dataKey='escalatedCount'
+                stackId='a'
+                fill={theme.palette.primary.main}
+                className={classes.bar}
+                name='Escalated'
+              />
+              <Bar
+                stackId='a'
+                dataKey='nonEscalatedCount'
+                fill={
+                  theme.palette.mode === 'light'
+                    ? theme.palette.secondary.dark
+                    : theme.palette.secondary.light
+                }
+                className={classes.bar}
+                name='Alert Count'
+              />
+            </BarChart>
+          )}
+        </AutoSizer>
       </Grid>
     </Grid>
   )
diff --git a/web/src/package.json b/web/src/package.json
index 864a3fb50a..fa7c6037c2 100644
--- a/web/src/package.json
+++ b/web/src/package.json
@@ -54,6 +54,7 @@
     "react-markdown": "8.0.0",
     "react-redux": "8.0.0",
     "react-transition-group": "4.4.2",
+    "react-virtualized-auto-sizer": "1.0.6",
     "recharts": "2.1.8",
     "redux-thunk": "2.4.0",
     "remark-gfm": "3.0.0",
@@ -71,6 +72,7 @@
     "@types/react-beautiful-dnd": "13.1.1",
     "@types/react-big-calendar": "0.38.0",
     "@types/react-dom": "18.0.1",
+    "@types/react-virtualized-auto-sizer": "1.0.1",
     "chance": "1.1.7",
     "cypress": "9.7.0",
     "esbuild-jest": "0.5.0",
diff --git a/yarn.lock b/yarn.lock
index 48ae00d12c..ecaf6b3d22 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1441,6 +1441,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-virtualized-auto-sizer@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.1.tgz#b3187dae1dfc4c15880c9cfc5b45f2719ea6ebd4"
+  integrity sha512-GH8sAnBEM5GV9LTeiz56r4ZhMOUSrP43tAQNSRVxNexDjcNKLCEtnxusAItg1owFUFE6k0NslV26gqVClVvong==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@18.0.5", "@types/react@>=16.9.11":
   version "18.0.5"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.5.tgz#1a4d4b705ae6af5aed369dec22800b20f89f5301"
@@ -6609,6 +6616,11 @@ react-transition-group@4.4.2, react-transition-group@^4.4.2:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-virtualized-auto-sizer@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.6.tgz#66c5b1c9278064c5ef1699ed40a29c11518f97ca"
+  integrity sha512-7tQ0BmZqfVF6YYEWcIGuoR3OdYe8I/ZFbNclFlGOC3pMqunkYF/oL30NCjSGl9sMEb17AnzixDz98Kqc3N76HQ==
+
 react@18.1.0:
   version "18.1.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"