Fixed pie chart spacing issues

components/PieChart.tsx

@@ -24,6 +24,8 @@ interface PieChartProps {
   labelTextXOffset?: number;
   /** Y-axis offset of the label text, in pixels. */
   labelTextYOffset?: number;
+  /** The radial offset of the label text, in pixels. */
+  labelTextRadialOffset?: number;
   /** If set, the minimum width of this graph */
   minWidth?: number;
   /** Accessor function to get value to display as label text from datum. */
@@ -46,6 +48,7 @@ export const PieChart = withTooltip<PieChartProps>(
     labelTextSize = 40,
     labelTextXOffset = 0,
     labelTextYOffset = 0,
+    labelTextRadialOffset = -20,
     minWidth,
     getLabelDisplayValueFromDatum = (datum: PieChartData) =>
       `${datum.category}`,
@@ -116,6 +119,7 @@ export const PieChart = withTooltip<PieChartProps>(
                   labelTextSize={labelTextSize}
                   labelTextXOffset={labelTextXOffset}
                   labelTextYOffset={labelTextYOffset}
+                  labelTextRadialOffset={labelTextRadialOffset}
                   getLabelDisplayValueFromDatum={getLabelDisplayValueFromDatum}
                 />
               )}
@@ -139,6 +143,7 @@ type PieSliceLabelProps<PieChartData> = ProvidedProps<PieChartData> & {
   labelTextSize: number;
   labelTextXOffset: number;
   labelTextYOffset: number;
+  labelTextRadialOffset: number;
   getLabelDisplayValueFromDatum: (datum: PieChartData) => string;
 };
 
@@ -148,6 +153,7 @@ export function PieSliceLabel({
   labelTextSize,
   labelTextXOffset,
   labelTextYOffset,
+  labelTextRadialOffset,
   getLabelDisplayValueFromDatum,
 }: PieSliceLabelProps<PieChartData>) {
   return (
@@ -161,9 +167,21 @@ export function PieSliceLabel({
             <path className={styles.labelPath} d={pathArc} />
             <Text
               className={styles.labelText}
-              x={centroidX + labelTextXOffset}
-              y={centroidY + labelTextYOffset}
-              textAnchor="middle"
+              x={
+                (labelTextRadialOffset * centroidX) /
+                  Math.sqrt(centroidX ** 2 + centroidY ** 2) +
+                centroidX +
+                labelTextXOffset
+              }
+              y={
+                (labelTextRadialOffset * centroidY) /
+                  Math.sqrt(centroidX ** 2 + centroidY ** 2) +
+                centroidY +
+                labelTextYOffset
+              }
+              textAnchor={
+                centroidX > 100 ? "start" : centroidX < -100 ? "end" : "middle"
+              }
               fontSize={labelTextSize}
             >
               {`${getLabelDisplayValueFromDatum(arc.data)}`}

pages/friends.tsx

@@ -72,7 +72,12 @@ export default function Demographics() {
         align="right"
       >
         <div className={styles.graphContainer}>
-          <PieChart data={F2} {...pieChartProps(isMobile, pageWidth)} />
+          <PieChart
+            data={F2}
+            {...pieChartProps(isMobile, pageWidth)}
+            labelWidth={145}
+            labelTextRadialOffset={-50}
+          />
         </div>
       </ComponentWrapper>
 
@@ -120,7 +125,11 @@ export default function Demographics() {
         align="right"
       >
         <div className={styles.graphContainer}>
-          <PieChart data={F6} {...pieChartProps(isMobile, pageWidth)} />
+          <PieChart
+            data={F6}
+            {...pieChartProps(isMobile, pageWidth)}
+            labelTextRadialOffset={-30}
+          />
         </div>
       </ComponentWrapper>
 

utils/defaultProps.ts

@@ -32,7 +32,7 @@ export const barGraphMargin = {
 export const DefaultProp: { [key in PropName]: number } = {
   graphHeight: 500,
   labelSize: 24,
-  labelWidth: 100,
+  labelWidth: 120,
 };
 
 export const barGraphProps = (isMobile: boolean, pageWidth: number) => {