From b0f1c12c9a44c22c05801949824cb59a29f08376 Mon Sep 17 00:00:00 2001
From: Gabriel Freitas <gdfreitasdev@gmail.com>
Date: Fri, 25 Oct 2024 17:28:37 -0300
Subject: [PATCH] add minor adjustments on y axis label to prevent overlapping

---
 src/CentileChart/CentileChart.tsx | 8 ++++++++
 src/SDSChart/SDSChart.tsx         | 8 ++++++++
 2 files changed, 16 insertions(+)

diff --git a/src/CentileChart/CentileChart.tsx b/src/CentileChart/CentileChart.tsx
index a89ef0f..dc6478a 100644
--- a/src/CentileChart/CentileChart.tsx
+++ b/src/CentileChart/CentileChart.tsx
@@ -364,6 +364,14 @@ function CentileChart({
                         <VictoryAxis
                             minDomain={0}
                             label={yAxisLabel(measurementMethod, false)}
+                            axisLabelComponent={
+                                <VictoryLabel
+                                    dx={0}
+                                    // adjust label margins relatively to font size of yAxis text to prevent overlapping
+                                    dy={(styles.yAxis.tickLabels.fontSize - 5) * -1}
+                                    style={styles.yAxis.axisLabel}
+                                />
+                            }
                             style={styles.yAxis}
                             dependentAxis
                         />
diff --git a/src/SDSChart/SDSChart.tsx b/src/SDSChart/SDSChart.tsx
index 7fef8ba..059fe27 100644
--- a/src/SDSChart/SDSChart.tsx
+++ b/src/SDSChart/SDSChart.tsx
@@ -327,6 +327,14 @@ const SDSChart: React.FC<SDSChartProps> = (
                         <VictoryAxis
                             domain={{ y: [newLowerY, newUpperY] }}
                             label={yAxisLabel(measurementMethod, true)}
+                            axisLabelComponent={
+                                <VictoryLabel
+                                    dx={0}
+                                    // adjust label margins relatively to font size of yAxis text to prevent overlapping
+                                    dy={(styles.yAxis.tickLabels.fontSize - 5) * -1}
+                                    style={styles.yAxis.axisLabel}
+                                />
+                            }
                             tickValues={[
                                 -5.33, -4.67, -4.0, -3.33, -2.67, -2.0, -1.33, -0.67, 0, 0.67, 1.33, 2.0, 2.67, 3.33,
                                 4.0, 4.67, 5.33,