add recharts to DataCard

package.json

@@ -11,7 +11,8 @@
     "react-dom": "^16.8.6",
     "react-icons": "^3.7.0",
     "react-router-dom": "^5.0.1",
-    "react-scripts": "3.0.1"
+    "react-scripts": "3.0.1",
+    "recharts": "^1.6.2"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/DataCard.js

 import React from 'react';
 import { Card, Col, Row } from 'react-bootstrap';
 import { FaMoneyBillAlt, FaArrowUp, FaArrowDown } from 'react-icons/fa';
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
+
+const chartdata = [
+	{
+		name: 'Page A',
+		uv: 4000,
+	},
+	{
+		name: 'Page B',
+		uv: 3000,
+	},
+	{
+		name: 'Page C',
+		uv: 2000,
+	},
+	{
+		name: 'Page D',
+		uv: 2780,
+	},
+	{
+		name: 'Page E',
+		uv: 1890,
+	},
+	{
+		name: 'Page F',
+		uv: 2390,
+	},
+	{
+		name: 'Page G',
+		uv: 3490,
+	},
+];
 
 const SmCard = props => {
 	const smdata = props.smitem;
@@ -39,6 +71,23 @@ const DataCard = props => {
 				}}
 			>
 				<h4 style={{ textAlign: 'center' }}>{data.title}</h4>
+				<div style={{ width: '100%', height: 300, padding: '1em' }}>
+					<ResponsiveContainer>
+						<AreaChart
+							data={chartdata}
+							margin={{
+								top: 10,
+								right: 30,
+								left: 0,
+								bottom: 0,
+							}}
+						>
+							<XAxis stroke="white" dataKey="name" tick={{ fill: 'white' }} />
+							<YAxis stroke="white" tick={{ fill: 'white' }} />
+							<Area type="monotone" dataKey="uv" stroke="white" fill="white" />
+						</AreaChart>
+					</ResponsiveContainer>
+				</div>
 			</Card>
 			<Row>
 				{data.detail.map((item, index) => (