Fix: allow for tickValues to be honored in multiple Y Axes (#438)

FormidableLabs · Dec 6, 2024 · 04be366 · 04be366
1 parent 4aa3a56
commit 04be366
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/.changeset/hungry-adults-cover.md b/.changeset/hungry-adults-cover.md
@@ -0,0 +1,5 @@
+---
+"victory-native": patch
+---
+
+allow tickValues for multiple Y axes
diff --git a/example/app/multiple-y-axes.tsx b/example/app/multiple-y-axes.tsx
@@ -141,7 +141,8 @@ export default function MultipleYAxesPage() {
                   return value.toFixed(0);
                 },
                 axisSide: "right",
-                lineColor: "green",
+                lineWidth: 0,
+                tickValues: [10000, 10030],
               },
             ]}
             data={data}

diff --git a/lib/src/cartesian/CartesianChart.tsx b/lib/src/cartesian/CartesianChart.tsx
@@ -33,7 +33,6 @@ import type {
 } from "./hooks/useChartPressState";
 import { useFunctionRef } from "../hooks/useFunctionRef";
 import { CartesianChartProvider } from "./contexts/CartesianChartContext";
-import { normalizeYAxisTicks } from "../utils/normalizeYAxisTicks";
 import { XAxis } from "./components/XAxis";
 import { YAxis } from "./components/YAxis";
 import { Frame } from "./components/Frame";
@@ -50,6 +49,7 @@ import {
 } from "./contexts/CartesianTransformContext";
 import { downsampleTicks } from "../utils/tickHelpers";
 import { GestureHandler } from "../shared/GestureHandler";
+import { normalizeYAxisTicks } from "../utils/normalizeYAxisTicks";
 
 export type CartesianActionsHandle<T = undefined> =
   T extends ChartPressState<infer S>
@@ -527,13 +527,19 @@ function CartesianChartContent<
     hasMeasuredLayoutSize && (axisOptions || yAxes)
       ? normalizedAxisProps.yAxes?.map((axis, index) => {
           const yAxis = yAxes[index];
+
           if (!yAxis) return null;
 
           const primaryAxisProps = normalizedAxisProps.yAxes[0]!;
           const primaryRescaled = zoom.rescaleY(primaryYScale);
-
           const rescaled = zoom.rescaleY(yAxis.yScale);
 
+          const rescaledTicks = axis.tickValues
+            ? downsampleTicks(axis.tickValues, axis.tickCount)
+            : axis.enableRescaling
+              ? rescaled.ticks(axis.tickCount)
+              : yAxis.yScale.ticks(axis.tickCount);
+
           const primaryTicksRescaled = primaryAxisProps.tickValues
             ? downsampleTicks(
                 primaryAxisProps.tickValues,
@@ -542,21 +548,21 @@ function CartesianChartContent<
             : primaryAxisProps.enableRescaling
               ? primaryRescaled.ticks(primaryAxisProps.tickCount)
               : primaryYScale.ticks(primaryAxisProps.tickCount);
+
           return (
             <YAxis
               key={index}
               {...axis}
               xScale={zoom.rescaleX(xScale)}
               yScale={rescaled}
               yTicksNormalized={
-                // Since we treat the first yAxis as the primary yAxis, we normalize the other Y ticks against it so the ticks line up nicely
-                index > 0
+                index > 0 && !axis.tickValues
                   ? normalizeYAxisTicks(
                       primaryTicksRescaled,
                       primaryRescaled,
                       rescaled,
                     )
-                  : primaryTicksRescaled
+                  : rescaledTicks
               }
               chartBounds={clipRect}
             />