From 51fbf8763fb6e566dff0fe71898fc8e428f5e3b5 Mon Sep 17 00:00:00 2001
From: aarthificial <aarthificial@gmail.com>
Date: Thu, 30 Nov 2023 00:37:22 +0100
Subject: [PATCH] :bug: Fix centering of tick labels

---
 src/Plot.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/Plot.tsx b/src/Plot.tsx
index b2a1aeb..3fcc739 100644
--- a/src/Plot.tsx
+++ b/src/Plot.tsx
@@ -174,7 +174,8 @@ export class Plot extends Layout {
 
       context.fillStyle = resolveCanvasStyle(this.xAxisTextColor(), context);
       context.font = `${this.tickLabelSize().y}px sans-serif`;
-      context.textAlign = 'right';
+      context.textAlign = 'center';
+      context.textBaseline = 'top';
       context.fillText(
         `${this.xLabelFormatter(this.mapToX(i / this.ticks().x))}`,
         startPosition.x,
@@ -203,13 +204,14 @@ export class Plot extends Layout {
       context.fillStyle = resolveCanvasStyle(this.yAxisTextColor(), context);
       context.font = `${this.tickLabelSize().y}px ${this.fontFamily()}`;
       context.textAlign = 'right';
+      context.textBaseline = 'middle';
       context.fillText(
         `${this.yLabelFormatter(this.mapToY(i / this.ticks().y))}`,
         tl.x -
           this.tickLabelSize().y -
           this.tickOverflow().y -
           this.axisStrokeWidth().y,
-        startPosition.y + this.tickLabelSize().y / 2,
+        startPosition.y,
       );
     }
 
@@ -247,6 +249,7 @@ export class Plot extends Layout {
     context.fillStyle = resolveCanvasStyle(this.xAxisTextColor(), context);
     context.font = `${this.labelSize().y}px ${this.fontFamily()}`;
     context.textAlign = 'center';
+    context.textBaseline = 'alphabetic';
     context.fillText(
       this.xAxisLabel(),
       this.edgePadding().x / 2,
@@ -257,6 +260,7 @@ export class Plot extends Layout {
     context.fillStyle = resolveCanvasStyle(this.yAxisTextColor(), context);
     context.font = `${this.labelSize().y}px ${this.fontFamily()}`;
     context.textAlign = 'center';
+    context.textBaseline = 'alphabetic';
     context.save();
     context.translate(
       -halfSize.x + this.labelPadding().y / 2 + this.labelSize().y,