From 78bd5f2c7393d91288e5eceda514ce730af8777a Mon Sep 17 00:00:00 2001
From: mchacks-github-demo <46543122+chenxuan-zhou@users.noreply.github.com>
Date: Thu, 25 Nov 2021 21:33:45 -0500
Subject: [PATCH] feat: responsive container for application graph

---
 src/features/Stats/StatsApplicationsGraph.tsx | 47 ++++++++++---------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/src/features/Stats/StatsApplicationsGraph.tsx b/src/features/Stats/StatsApplicationsGraph.tsx
index c744a561..4e45adf6 100644
--- a/src/features/Stats/StatsApplicationsGraph.tsx
+++ b/src/features/Stats/StatsApplicationsGraph.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { IStatsApplications } from '../../config';
 
 import {
+    ResponsiveContainer,
     LineChart,
     Line,
     XAxis,
@@ -22,29 +23,29 @@ const StatsApplicationsGraph: React.FC<IStatsApplicationsGraph> = (props) => {
 
     // cannot use ResponsiveContainer since parent has no width and height
     return (
-        <LineChart
-            width={700}
-            height={300}
-            data={applications}
-            margin={{
-                top: 5,
-                right: 30,
-                left: 20,
-                bottom: 5
-            }}
-        >
-            <CartesianGrid strokeDasharray="3 3" />
-            <XAxis dataKey="date" />
-            <YAxis />
-            <Tooltip />
-            <Legend />
-            <Line
-                type="monotone"
-                dataKey="applications"
-                stroke="#8884d8"
-                activeDot={{ r: 8 }}
-            />
-        </LineChart>
+        <ResponsiveContainer width="100%" height={300}>
+            <LineChart
+                data={applications}
+                margin={{
+                    top: 5,
+                    right: 30,
+                    left: 20,
+                    bottom: 5
+                }}
+            >
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="date" />
+                <YAxis />
+                <Tooltip />
+                <Legend />
+                <Line
+                    type="monotone"
+                    dataKey="applications"
+                    stroke="#8884d8"
+                    activeDot={{ r: 8 }}
+                />
+            </LineChart>
+        </ResponsiveContainer>
     );
 }