graph

src/App/mediarules.css

@@ -98,6 +98,10 @@
     #Cystic\ Fibrosis6 h2 {
         font-size: 1.5em !important; /* Mobile size */
       }
+      .pie-chart-container-small {
+        width: 200px; /* Make smaller for mobile */
+        height: 200px; /* Adjust height accordingly */
+      }  
 
     .row-if-small{
         --bs-gutter-x: 1.5rem;

src/components/Graph.tsx

@@ -56,11 +56,16 @@ const PieChart: React.FC = () => {
     responsive: true,
     maintainAspectRatio: false,
     plugins: {
-      title: {
+      legend: {
         display: true,
-        text: '',
+        position: 'bottom' as const, // Puts labels below the chart
+        labels: {
+          boxWidth: 20, // Controls the size of the color box next to the labels
+          padding: 15,   // Adds some padding between labels and the chart
+          usePointStyle: true, 
       },
-    }
+    },
+   },
   };
 
   return (