diff --git a/src/components/Recharts/index.js b/src/components/Recharts/index.js
new file mode 100644
index 0000000..490a5b2
--- /dev/null
+++ b/src/components/Recharts/index.js
@@ -0,0 +1,32 @@
+import React from "react";
+import { LineChart, XAxis, Tooltip, CartesianGrid, Line } from "recharts";
+
+function Recharts({ data }) {
+  return (
+    <LineChart
+      width={400}
+      height={400}
+      data={data}
+      margin={{ top: 5, right: 20, left: 10, bottom: 5 }}
+    >
+      <XAxis dataKey="name" />
+      <Tooltip />
+      <CartesianGrid stroke="#ddd" />
+      {/* <Line type="monotone" dataKey="uv" stroke="#ff7300" yAxisId={0} /> */}
+      <Line type="monotone" dataKey="pv" stroke="#387908" yAxisId={1} />
+    </LineChart>
+  );
+}
+
+export default Recharts;
+
+Recharts.defaultProps = {
+  data: [
+    { name: "", uv: 400, pv: 100, amt: 600 },
+    { name: "", uv: 400, pv: 200, amt: 500 },
+    { name: "", uv: 400, pv: 300, amt: 400 },
+    { name: "", uv: 400, pv: 400, amt: 300 },
+    { name: "", uv: 400, pv: 500, amt: 200 },
+    { name: "", uv: 400, pv: 600, amt: 100 },
+  ],
+};
diff --git a/src/redux/data.js b/src/redux/data.js
index 27def74..106752c 100644
--- a/src/redux/data.js
+++ b/src/redux/data.js
@@ -8,6 +8,7 @@ import Toast from "../components/Toast";
 import Banners from "../components/Banners";
 import Blogss from "../components/Blogss";
 import CardTrelloDesign from "../components/CardTrelloDesign";
+import Chart from "../components/Recharts";
 
 // mini components
 import MiniComponents from "../components/MiniComponents";
@@ -202,6 +203,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Chart",
+    author: "Ashrafi",
+    props: [],
+    content: {
+      name: "Chart",
+      component: <Chart />,
+      code: null,
+    },
+  },
   // mini components
   {
     name: "Mini Components",