add padding between the legend and the chart

2024-09-30 14:53:47 +01:00 · 2024-09-30 14:53:47 +01:00 · 3e91c5d98a
commit 3e91c5d98a
parent 7a8ece1587
1 changed files with 18 additions and 1 deletions
--- 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>
  );
 }