Merge pull request #123 from gdfreitas/y-axis-overlapping

add minor adjustments on y axis label to prevent overlapping
rcpch · Oct 25, 2024 · 7305c2c · 7305c2c
2 parents e27fd71 + b0f1c12
commit 7305c2c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git 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
@@ -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,