Fix friends page pie charts

data/friends.ts

@@ -44,7 +44,7 @@ export const F1 = [
 export const F2 = [
   {
     category: "Introvert",
-    value: 53,
+    value: 51,
   },
   {
     category: "Extrovert",
@@ -52,7 +52,7 @@ export const F2 = [
   },
   {
     category: "Ambivert",
-    value: 39,
+    value: 38,
   },
 ];
 
@@ -82,15 +82,15 @@ export const F3 = [
 export const F4 = [
   {
     category: "Rarely",
-    value: 21,
+    value: 20,
   },
   {
     category: "Sometimes",
-    value: 33,
+    value: 32,
   },
   {
     category: "Often",
-    value: 34,
+    value: 33,
   },
   {
     category: "Always",
@@ -136,7 +136,7 @@ export const F6 = [
   },
   {
     category: "Rarely",
-    value: 38,
+    value: 37,
   },
   {
     category: "Never",
@@ -151,11 +151,11 @@ export const F6 = [
 export const F7 = [
   {
     category: "Often",
-    value: 36,
+    value: 35,
   },
   {
     category: "Sometimes",
-    value: 35,
+    value: 34,
   },
   {
     category: "Rarely",
@@ -304,6 +304,10 @@ export const F11 = [
 ];
 
 export const F12 = [
+  {
+    category: "All",
+    value: 4,
+  },
   {
     category: "Most",
     value: 41,
@@ -312,10 +316,6 @@ export const F12 = [
     category: "Some",
     value: 49,
   },
-  {
-    category: "All",
-    value: 4,
-  },
   {
     category: "Barely",
     value: 8,
@@ -466,11 +466,11 @@ export const F15 = [
 export const F16 = [
   {
     category: "Most",
-    value: 49,
+    value: 48,
   },
   {
     category: "Some",
-    value: 36,
+    value: 35,
   },
   {
     category: "All",
@@ -484,4 +484,4 @@ export const F16 = [
     category: "No",
     value: 2,
   },
-];
+];

pages/friends.tsx

@@ -173,9 +173,11 @@ export default function Demographics() {
         bodyText="For a lot of people, most or at least some friendships are made during university. This goes to show how university is an important point in life where people form their most valuable relationships!"
         align="right"
       >
-        <div className={styles.graphContainer}>
-          <PieChart data={F12} {...pieChartProps(isMobile, pageWidth)} />
-        </div>
+        <BarGraphVertical
+          data={F12}
+          {...barGraphProps(isMobile, pageWidth)}
+          lowerLabelDy="0"
+        />
       </ComponentWrapper>
 
       <ComponentWrapper