charts

src/App/HP.css

@@ -73,5 +73,12 @@
 
   .pie-chart-container-small{
     height: auto;
+  }
+
+  .pie-chart-container-other{
+    height: 250px !important;
+  }
 
+  .pie-chart-container-small, .pie-chart-container, .pie-chart-container-other, .bar-chart-container {
+    margin-bottom: 10px;
   }
\ No newline at end of file

src/components/Graph.tsx

@@ -64,7 +64,7 @@ const PieChart: React.FC = () => {
   };
 
   return (
-    <div className="pie-chart-container">
+    <div className="pie-chart-container-small">
       <Pie data={data} options={options} />
       </div>
   );
@@ -139,7 +139,7 @@ export const MostStressfulForRelativeatients: React.FC = () => {
   };
 
   return (
-    <div className="pie-chart-container">
+    <div className="pie-chart-container-other">
       <Pie data={data} options={options} />
       </div>
   );
@@ -173,7 +173,7 @@ export const WhoAffectedatients: React.FC = () => {
   };
 
   return (
-    <div className="pie-chart-container">
+    <div className="pie-chart-container-small">
       <Pie data={data} options={options} />
       </div>
   );
@@ -602,7 +602,7 @@ export const HeardOfCFPublic: React.FC = () => {
   };
 
   return (
-    <div className="pie-chart-container">
+    <div className="pie-chart-container-small">
       <Pie data={data} options={options} />
       </div>
   );
@@ -675,6 +675,16 @@ export const HowDidYouLearnPublic: React.FC = () => {
           text: 'How did you mainly learn about cystic fibrosis? ',
         },
       },
+      scales: {
+        x: {
+          beginAtZero: true,
+          barPercentage: 0.5, // Schmaler machen, 0.5 = 50% der Kategorie-Breite
+          categoryPercentage: 0.5, // Platz pro Kategorie schmaler machen
+        },
+        y: {
+          beginAtZero: true,
+        },
+      },
     };
 
   return (
@@ -714,7 +724,7 @@ export const HowWellDoYouUnderstandGFPublic: React.FC = () => {
   };
 
   return (
-    <div className="pie-chart-container">
+    <div className="pie-chart-container-small">
       <Pie data={data} options={options} />
       </div>
   );
@@ -749,7 +759,7 @@ export const HowWellInformedAboutCFPublic: React.FC = () => {
   };
 
   return (
-    <div className="pie-chart-container">
+    <div className="pie-chart-container-other">
       <Pie data={data} options={options} />
       </div>
   );
@@ -782,7 +792,7 @@ export const WhatCouldGeneTherapyMeanForMedicinePublic: React.FC = () => {
   };
 
   return (
-    <div className="pie-chart-container">
+    <div className="pie-chart-container-other">
       <Pie data={data} options={options} />
       </div>
   );
@@ -862,7 +872,7 @@ export const WouldYouDoGeneTherapyPublic: React.FC = () => {
   };
 
   return (
-    <div className="pie-chart-container">
+    <div className="pie-chart-container-other">
       <Pie data={data} options={options} />
       </div>
   );