diff --git a/projects/common/src/utils/number-utils.ts b/projects/common/src/utils/number-utils.ts
new file mode 100644
index 0000000..64c81be
--- /dev/null
+++ b/projects/common/src/utils/number-utils.ts
@@ -0,0 +1,9 @@
+/**
+ * Checks if a number is a whole number
+ *
+ * @param number the number to check
+ * @returns whether the number is a whole number
+ */
+export function isWholeNumber(number: number) {
+  return number % 1 === 0;
+}
diff --git a/projects/website/src/components/chart/generic-chart.tsx b/projects/website/src/components/chart/generic-chart.tsx
index 7603716..97ab7b9 100644
--- a/projects/website/src/components/chart/generic-chart.tsx
+++ b/projects/website/src/components/chart/generic-chart.tsx
@@ -46,7 +46,7 @@ export type DatasetConfig = {
     hideOnMobile?: boolean;
     displayName: string;
     position: AxisPosition;
-    precision?: number; // Added precision option here
+    valueFormatter?: (value: number) => string; // Added precision option here
   };
   labelFormatter: (value: number) => string;
 };
@@ -63,7 +63,7 @@ const generateAxis = (
   display: boolean,
   position: AxisPosition,
   displayName: string,
-  precision: number | undefined // Adding precision parameter
+  valueFormatter?: (value: number) => string
 ): Axis => ({
   id,
   position,
@@ -74,7 +74,7 @@ const generateAxis = (
     stepSize: 10,
     callback: (value: number) => {
       // Apply precision if specified, otherwise default to no decimal places
-      return precision !== undefined ? value.toFixed(precision) : value.toString();
+      return valueFormatter !== undefined ? valueFormatter(value) : value.toString();
     },
   },
   reverse,
@@ -127,7 +127,7 @@ export default function GenericChart({ labels, datasetConfig, histories }: Chart
           isMobile && config.axisConfig.hideOnMobile ? false : config.axisConfig.display,
           config.axisConfig.position,
           config.axisConfig.displayName,
-          config.axisConfig.precision // Pass precision from config to generateAxis
+          config.axisConfig.valueFormatter
         );
 
         return generateDataset(config.title, historyArray, config.color, config.axisId);
diff --git a/projects/website/src/components/player/chart/player-ranking-chart.tsx b/projects/website/src/components/player/chart/player-ranking-chart.tsx
index ef9672e..c9719a9 100644
--- a/projects/website/src/components/player/chart/player-ranking-chart.tsx
+++ b/projects/website/src/components/player/chart/player-ranking-chart.tsx
@@ -5,6 +5,7 @@ import React from "react";
 import { DatasetConfig } from "@/components/chart/generic-chart";
 import GenericPlayerChart from "@/components/player/chart/generic-player-chart";
 import ScoreSaberPlayer from "@ssr/common/types/player/impl/scoresaber-player";
+import { isWholeNumber } from "@ssr/common/utils/number-utils";
 
 type Props = {
   player: ScoreSaberPlayer;
@@ -49,7 +50,12 @@ const datasetConfig: DatasetConfig[] = [
       hideOnMobile: true,
       displayName: "PP",
       position: "right",
-      precision: 1,
+      valueFormatter: value => {
+        if (isWholeNumber(value)) {
+          return value.toString();
+        }
+        return value.toFixed(1);
+      },
     },
     labelFormatter: (value: number) => `PP ${formatNumberWithCommas(value)}pp`,
   },