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

add minor adjustments on y axis label to prevent overlapping

Author: eatyourpeas

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
                         />

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,