--- a
+++ b/client/src/components/PieChart.jsx
@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+import { PieChart, Pie, Cell } from 'recharts';
+
+const COLORS = ['#FFBB28', '#0088FE', '#b2420a'];
+
+function Chart(props) {
+    const RADIAN = Math.PI / 180;
+    const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index }) => {
+        const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
+        const x = cx + radius * Math.cos(-midAngle * RADIAN);
+        const y = cy + radius * Math.sin(-midAngle * RADIAN);
+      
+        return (
+          <text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central">
+            {`${(percent * 100).toFixed(0)}%`}
+          </text>
+        );
+      };
+
+
+    return ( 
+        <PieChart width={props.width} height={props.height}>
+            <Pie
+                data={props.data}
+                dataKey="prob"
+                outerRadius={props.outerRadius}
+                label={props.label ? renderCustomizedLabel: null}
+            >
+                {
+                    props.data.map((entry, index) => <Cell key={entry.name} fill={COLORS[index % COLORS.length]} />)
+                }
+            </Pie>
+        </PieChart>
+     );
+}
+
+export default Chart;
+export { COLORS };
\ No newline at end of file