diff --git a/src/components/TotalOrgSummary/BlueSquareStats/BlueSquareStats.jsx b/src/components/TotalOrgSummary/BlueSquareStats/BlueSquareStats.jsx
index 1c9dcdee28..581e55c695 100644
--- a/src/components/TotalOrgSummary/BlueSquareStats/BlueSquareStats.jsx
+++ b/src/components/TotalOrgSummary/BlueSquareStats/BlueSquareStats.jsx
@@ -49,7 +49,7 @@ function BlueSquareStats({ isLoading, blueSquareStats, comparisonType, darkMode
         <DonutChart
           title="TOTAL BLUE SQUARES"
           totalCount={totalBlueSquares.count}
-          percentageChange={pctChange}
+          percentageChange={Number(pctChange)}
           data={data}
           colors={BLUE_SQUARE_STATS_COLORS}
           comparisonType={comparisonType}
diff --git a/src/components/TotalOrgSummary/VolunteerRolesTeamDynamics/RoleDistributionPieChart.jsx b/src/components/TotalOrgSummary/VolunteerRolesTeamDynamics/RoleDistributionPieChart.jsx
index 54f126f1dd..ac34eedc74 100644
--- a/src/components/TotalOrgSummary/VolunteerRolesTeamDynamics/RoleDistributionPieChart.jsx
+++ b/src/components/TotalOrgSummary/VolunteerRolesTeamDynamics/RoleDistributionPieChart.jsx
@@ -28,6 +28,18 @@ const ROLE_COLOR_MAP = {
 import CustomTooltip from '../../CustomTooltip';
 
 const RoleDistributionPieChart = ({ roleDistributionStats = [], isLoading, darkMode }) => {
+  // Reusable function to sort data and assign colors.
+  const sortDataAndAssignColors = statsData => {
+    statsData?.sort((a, b) => b.count - a.count);
+    const mappedData = statsData?.map((item, index) => ({
+      name: item._id,
+      value: item.count,
+      // Use a stable role mapping first, otherwise fallback by index.
+      color: ROLE_COLOR_MAP[item._id] || COLORS[index % COLORS.length],
+    }));
+    return mappedData;
+  };
+
   if (isLoading) {
     return (
       <div className="d-flex justify-content-center align-items-center">
@@ -38,13 +50,16 @@ const RoleDistributionPieChart = ({ roleDistributionStats = [], isLoading, darkM
     );
   }
 
-  roleDistributionStats.sort((a, b) => b.count - a.count);
-  const data = roleDistributionStats.map((item, index) => ({
-    name: item._id,
-    value: item.count,
-    // Use a stable role mapping first, otherwise fallback by index.
-    color: ROLE_COLOR_MAP[item._id] || COLORS[index % COLORS.length],
-  }));
+  let data = [];
+  // This is to handle the case when we are comparing the data with other time periods. In that case, the data structure is different and we need to access the comparison data.
+  if (roleDistributionStats?.comparison) {
+    data = sortDataAndAssignColors(roleDistributionStats?.comparison);
+  }
+  // Fallback to the original data structure when we are not comparing the data with other time periods.
+  else {
+    data = sortDataAndAssignColors(roleDistributionStats);
+  }
+
   const totalValue = data.reduce((sum, entry) => sum + entry.value, 0);
 
   const RADIAN = Math.PI / 180;