diff --git a/src/app/submission/charts.tsx b/src/app/submission/charts.tsx
new file mode 100644
index 0000000..fba4b91
--- /dev/null
+++ b/src/app/submission/charts.tsx
@@ -0,0 +1,39 @@
+"use client"
+import { LineChart, Line, CartesianGrid, XAxis, YAxis, PieChart, Pie } from "recharts"
+import { SubComplete } from "./page"
+export function SubsChart({ data }: { data: Array<SubComplete> }) {
+  const pieData: Array<{ story: string, occurrences: number }> = []
+  data.forEach(dataRow => {
+    const story = dataRow.story.title
+    const exists = pieData.findIndex(pieRow => story === pieRow.story)
+    if (exists === -1) {
+      //add the story to pieData if it doesn't already exist
+      pieData.push({ story: story, occurrences: 0 })
+      return
+    }
+    pieData[exists].occurrences++
+  })
+  console.log(pieData)
+
+
+
+  return (
+    <>
+      <PieChart width={400} height={400}>
+        <Pie data={pieData} dataKey="story" outerRadius={50} fill="teal" />
+      </PieChart>
+
+
+
+
+      <LineChart width={400} height={400} data={data}>
+        <Line type="monotone" dataKey="id" stroke="#8884d8" />
+        <CartesianGrid />
+        <XAxis dataKey="submitted" />
+        <YAxis />
+
+      </LineChart>
+    </>
+
+  )
+}