From 3e91c5d98aa59dfc5bbdb7744e90e3a1020ee2db Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Mon, 30 Sep 2024 14:53:47 +0100
Subject: [PATCH] add padding between the legend and the chart

---
 src/components/player/player-rank-chart.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/player/player-rank-chart.tsx b/src/components/player/player-rank-chart.tsx
index 8911375..e42ea0e 100644
--- a/src/components/player/player-rank-chart.tsx
+++ b/src/components/player/player-rank-chart.tsx
@@ -315,7 +315,24 @@ export default function PlayerRankChart({ player }: Props) {
 
   return (
     <div className="h-96">
-      <Line className="w-fit" options={options} data={data} />
+      <Line
+        className="w-fit"
+        options={options}
+        data={data}
+        plugins={[
+          {
+            id: "legend-padding",
+            beforeInit: (chart: any) => {
+              const originalFit = chart.legend.fit;
+
+              chart.legend.fit = function fit() {
+                originalFit.bind(chart.legend)();
+                this.height += 2;
+              };
+            },
+          },
+        ]}
+      />
     </div>
   );
 }