From fc542cd7d27704bb5e3ee3ec9135ec305586e4e5 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Fri, 21 Feb 2025 10:33:10 +0100
Subject: [PATCH] ui: fix chart label alignments

---
 frontend/app/components/Charts/BarChart.tsx    | 2 +-
 frontend/app/components/Charts/ColumnChart.tsx | 4 ++--
 frontend/app/components/Charts/LineChart.tsx   | 7 +++++--
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/frontend/app/components/Charts/BarChart.tsx b/frontend/app/components/Charts/BarChart.tsx
index 5527ea978..386770505 100644
--- a/frontend/app/components/Charts/BarChart.tsx
+++ b/frontend/app/components/Charts/BarChart.tsx
@@ -53,7 +53,7 @@ function ORBarChart(props: BarChartProps) {
       type: 'value',
       data: undefined,
       name: props.label ?? 'Number of Sessions',
-      nameLocation: 'middle',
+      nameLocation: 'center',
       nameGap: 45,
     };
 
diff --git a/frontend/app/components/Charts/ColumnChart.tsx b/frontend/app/components/Charts/ColumnChart.tsx
index 50482b7c9..f16992761 100644
--- a/frontend/app/components/Charts/ColumnChart.tsx
+++ b/frontend/app/components/Charts/ColumnChart.tsx
@@ -74,8 +74,8 @@ function ColumnChart(props: ColumnChartProps) {
       xAxis: {
         type: 'value',
         name: label ?? 'Total',
-        nameLocation: 'middle',
-        nameGap: 45,
+        nameLocation: 'center',
+        nameGap: 35,
       },
       yAxis: {
         type: 'category',
diff --git a/frontend/app/components/Charts/LineChart.tsx b/frontend/app/components/Charts/LineChart.tsx
index 0629cc9db..0c2d1ead9 100644
--- a/frontend/app/components/Charts/LineChart.tsx
+++ b/frontend/app/components/Charts/LineChart.tsx
@@ -69,8 +69,11 @@ function ORLineChart(props: Props) {
       },
       yAxis: {
         name: props.label ?? 'Number of Sessions',
-        nameLocation: 'middle',
-        nameGap: 45,
+        // nameLocation: 'center',
+        // nameGap: 40,
+        nameTextStyle: {
+          padding: [0, 0, 0, 15],
+        }
       },
       tooltip: {
         ...defaultOptions.tooltip,