From 69d530c9ff7f9fe88fbc10ee183e8e4ef5cc7f08 Mon Sep 17 00:00:00 2001
From: Eli Zibin <1131641+zibs@users.noreply.github.com>
Date: Wed, 2 Oct 2024 15:24:45 -0700
Subject: [PATCH] Add `dashPathEffect` prop to x/y axis (#372)

---
 .changeset/honest-kiwis-share.md          |   5 +
 example/app/bar-chart.tsx                 |  10 +-
 example/app/consts/routes.ts              |   5 +
 example/app/dashed-axes.tsx               | 134 ++++++++++++++++++++++
 lib/src/cartesian/components/Frame.tsx    |  12 +-
 lib/src/cartesian/components/XAxis.tsx    |   6 +-
 lib/src/cartesian/components/YAxis.tsx    |   5 +-
 lib/src/types.ts                          |  32 +++++-
 website/docs/cartesian/cartesian-chart.md |  63 +++++-----
 9 files changed, 228 insertions(+), 44 deletions(-)
 create mode 100644 .changeset/honest-kiwis-share.md
 create mode 100644 example/app/dashed-axes.tsx

diff --git a/.changeset/honest-kiwis-share.md b/.changeset/honest-kiwis-share.md
new file mode 100644
index 00000000..94a3a958
--- /dev/null
+++ b/.changeset/honest-kiwis-share.md
@@ -0,0 +1,5 @@
+---
+"victory-native": minor
+---
+
+Add dashed path effect option for X and Y axes
diff --git a/example/app/bar-chart.tsx b/example/app/bar-chart.tsx
index f71ef2cd..be9dbde2 100644
--- a/example/app/bar-chart.tsx
+++ b/example/app/bar-chart.tsx
@@ -1,4 +1,5 @@
 import {
+  DashPathEffect,
   LinearGradient,
   useFont,
   vec,
@@ -56,17 +57,18 @@ export default function BarChartPage(props: { segment: string }) {
                 const date = new Date(2023, value - 1);
                 return date.toLocaleString("default", { month: "short" });
               },
+              linePathEffect: <DashPathEffect intervals={[4, 4]} />,
+            }}
+            frame={{
+              lineWidth: 0,
             }}
             yAxis={[
               {
                 yKeys: ["listenCount"],
                 font,
-                lineWidth: 0,
+                linePathEffect: <DashPathEffect intervals={[4, 4]} />,
               },
             ]}
-            frame={{
-              lineWidth: 0,
-            }}
             data={data}
           >
             {({ points, chartBounds }) => {
diff --git a/example/app/consts/routes.ts b/example/app/consts/routes.ts
index 59271be4..4904f55b 100644
--- a/example/app/consts/routes.ts
+++ b/example/app/consts/routes.ts
@@ -118,6 +118,11 @@ export const ChartRoutes: {
       "This is mixture of Pie and Donut charts, showing off the different ways to customize the charts.",
     path: "/pie-and-donut-charts",
   },
+  {
+    title: "Dashed Axes",
+    description: "This is an Area chart with dashed X and Y axes.",
+    path: "/dashed-axes",
+  },
 ];
 
 if (__DEV__) {
diff --git a/example/app/dashed-axes.tsx b/example/app/dashed-axes.tsx
new file mode 100644
index 00000000..84ca484e
--- /dev/null
+++ b/example/app/dashed-axes.tsx
@@ -0,0 +1,134 @@
+import {
+  DashPathEffect,
+  LinearGradient,
+  useFont,
+  vec,
+} from "@shopify/react-native-skia";
+import * as React from "react";
+import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native";
+import { Area, CartesianChart, Line } from "victory-native";
+import inter from "../assets/inter-medium.ttf";
+import { appColors } from "./consts/colors";
+import { InfoCard } from "../components/InfoCard";
+import { descriptionForRoute } from "./consts/routes";
+import { Button } from "../components/Button";
+
+const generateData = () =>
+  Array.from({ length: 12 }, (_, index) => {
+    const low = Math.round(20 + 20 * Math.random());
+    const high = Math.round(low + 3 + 20 * Math.random());
+
+    return {
+      month: new Date(2020, index).toLocaleString("default", {
+        month: "short",
+      }),
+      low,
+      high,
+    };
+  });
+
+export default function DashedAxesPage(props: { segment: string }) {
+  const description = descriptionForRoute(props.segment);
+  const font = useFont(inter, 12);
+  const [data, setData] = React.useState(generateData);
+  const [, setW] = React.useState(0);
+  const [, setH] = React.useState(0);
+
+  return (
+    <>
+      <SafeAreaView style={styles.safeView}>
+        <View style={styles.chart}>
+          <CartesianChart
+            data={data}
+            xKey="month"
+            yKeys={["low", "high"]}
+            padding={16}
+            domain={{ y: [0, 65] }}
+            domainPadding={{ top: 20 }}
+            xAxis={{
+              font,
+              labelOffset: 4,
+              linePathEffect: <DashPathEffect intervals={[4, 4]} />,
+            }}
+            yAxis={[
+              {
+                labelOffset: 8,
+                yKeys: ["high"],
+                font,
+
+                linePathEffect: <DashPathEffect intervals={[4, 4]} />,
+              },
+            ]}
+            onChartBoundsChange={({ left, right, top, bottom }) => {
+              setW(right - left);
+              setH(bottom - top);
+            }}
+          >
+            {({ points, chartBounds }) => (
+              <>
+                <Area
+                  points={points.high}
+                  y0={chartBounds.bottom}
+                  color="black"
+                  opacity={0.5}
+                  curveType="natural"
+                  animate={{ type: "timing" }}
+                >
+                  <LinearGradient
+                    start={vec(0, 50)}
+                    end={vec(0, 200)}
+                    colors={["#f7ce64", "#f7ce6420"]}
+                  />
+                </Area>
+                <Line
+                  strokeWidth={3}
+                  color={"#f7ce64"}
+                  curveType="natural"
+                  points={points.high}
+                />
+              </>
+            )}
+          </CartesianChart>
+        </View>
+        <ScrollView
+          style={styles.optionsScrollView}
+          contentContainerStyle={styles.options}
+        >
+          <InfoCard style={{ marginBottom: 16 }}>{description}</InfoCard>
+          <Button
+            title="Shuffle Data"
+            onPress={() => setData(generateData())}
+            style={{ width: "100%" }}
+          />
+        </ScrollView>
+      </SafeAreaView>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  safeView: {
+    flex: 1,
+    backgroundColor: appColors.viewBackground.light,
+    $dark: {
+      backgroundColor: appColors.viewBackground.dark,
+    },
+  },
+  chart: {
+    flex: 1,
+    maxHeight: 350,
+  },
+  optionsScrollView: {
+    flex: 1,
+    backgroundColor: appColors.cardBackground.light,
+    $dark: {
+      backgroundColor: appColors.cardBackground.dark,
+    },
+  },
+  options: {
+    paddingHorizontal: 20,
+    paddingVertical: 15,
+    alignItems: "flex-start",
+    justifyContent: "flex-start",
+  },
+});
diff --git a/lib/src/cartesian/components/Frame.tsx b/lib/src/cartesian/components/Frame.tsx
index 87947a38..1b279d7e 100644
--- a/lib/src/cartesian/components/Frame.tsx
+++ b/lib/src/cartesian/components/Frame.tsx
@@ -3,7 +3,13 @@ import { StyleSheet } from "react-native";
 import { Path, Skia } from "@shopify/react-native-skia";
 import type { FrameProps } from "../../types";
 
-export const Frame = ({ xScale, yScale, lineColor, lineWidth }: FrameProps) => {
+export const Frame = ({
+  xScale,
+  yScale,
+  lineColor,
+  lineWidth,
+  linePathEffect,
+}: FrameProps) => {
   const [x1 = 0, x2 = 0] = xScale.domain();
   const [y1 = 0, y2 = 0] = yScale.domain();
 
@@ -31,7 +37,9 @@ export const Frame = ({ xScale, yScale, lineColor, lineWidth }: FrameProps) => {
       strokeWidth={lineWidth}
       style="stroke"
       color={lineColor}
-    />
+    >
+      {linePathEffect ? linePathEffect : null}
+    </Path>
   );
 };
 
diff --git a/lib/src/cartesian/components/XAxis.tsx b/lib/src/cartesian/components/XAxis.tsx
index 78858363..57f54157 100644
--- a/lib/src/cartesian/components/XAxis.tsx
+++ b/lib/src/cartesian/components/XAxis.tsx
@@ -29,6 +29,7 @@ export const XAxis = <
   formatXLabel = (label: ValueOf<InputDatum>) => String(label),
   ix = [],
   isNumericalData,
+  linePathEffect,
 }: XAxisProps<RawData, XK>) => {
   const [y1 = 0, y2 = 0] = yScale.domain();
   const [x1r = 0, x2r = 0] = xScale.range();
@@ -74,7 +75,9 @@ export const XAxis = <
             p2={vec(xScale(tick), yScale(y1))}
             color={lineColor}
             strokeWidth={lineWidth}
-          />
+          >
+            {linePathEffect ? linePathEffect : null}
+          </Line>
         ) : null}
         {font && labelWidth && canFitLabelContent ? (
           <Text
@@ -85,6 +88,7 @@ export const XAxis = <
             x={labelX}
           />
         ) : null}
+        <></>
       </React.Fragment>
     );
   });
diff --git a/lib/src/cartesian/components/YAxis.tsx b/lib/src/cartesian/components/YAxis.tsx
index a514b7c5..828d5981 100644
--- a/lib/src/cartesian/components/YAxis.tsx
+++ b/lib/src/cartesian/components/YAxis.tsx
@@ -24,6 +24,7 @@ export const YAxis = <
   lineColor,
   font,
   formatYLabel = (label: ValueOf<InputDatum>) => String(label),
+  linePathEffect,
 }: YAxisProps<RawData, YK>) => {
   const [x1 = 0, x2 = 0] = xScale.domain();
   const [_ = 0, y2 = 0] = yScale.domain();
@@ -62,7 +63,9 @@ export const YAxis = <
             p2={vec(xScale(x2), yScale(tick))}
             color={lineColor}
             strokeWidth={lineWidth}
-          />
+          >
+            {linePathEffect ? linePathEffect : null}
+          </Line>
         ) : null}
         {font
           ? canFitLabelContent && (
diff --git a/lib/src/types.ts b/lib/src/types.ts
index 964ec4df..b0aff743 100644
--- a/lib/src/types.ts
+++ b/lib/src/types.ts
@@ -1,6 +1,10 @@
 import { type SharedValue } from "react-native-reanimated";
 import { type ScaleLinear } from "d3-scale";
-import { type Color, type SkFont } from "@shopify/react-native-skia";
+import {
+  type Color,
+  type DashPathEffect,
+  type SkFont,
+} from "@shopify/react-native-skia";
 
 export type PrimitiveViewWindow = {
   xMin: number;
@@ -154,6 +158,9 @@ export type OptionalAxisProps<
   formatYLabel?: (label: RawData[YK]) => string;
 };
 
+type DashPathEffectProps = React.ComponentProps<typeof DashPathEffect>;
+type DashPathEffectComponent = React.ReactElement<DashPathEffectProps>;
+
 export type XAxisInputProps<
   RawData extends Record<string, unknown>,
   XK extends keyof InputFields<RawData>,
@@ -169,13 +176,18 @@ export type XAxisInputProps<
   tickCount?: number;
   tickValues?: number[];
   yAxisSide?: YAxisSide;
+  linePathEffect?: DashPathEffectComponent;
 };
 
 export type XAxisPropsWithDefaults<
   RawData extends Record<string, unknown>,
   XK extends keyof InputFields<RawData>,
-> = Required<Omit<XAxisInputProps<RawData, XK>, "font" | "tickValues">> &
-  Partial<Pick<XAxisInputProps<RawData, XK>, "font" | "tickValues">>;
+> = Required<
+  Omit<XAxisInputProps<RawData, XK>, "font" | "tickValues" | "linePathEffect">
+> &
+  Partial<
+    Pick<XAxisInputProps<RawData, XK>, "font" | "tickValues" | "linePathEffect">
+  >;
 
 export type XAxisProps<
   RawData extends Record<string, unknown>,
@@ -203,13 +215,18 @@ export type YAxisInputProps<
   tickValues?: number[];
   yKeys?: YK[];
   domain?: YAxisDomain;
+  linePathEffect?: DashPathEffectComponent;
 };
 
 export type YAxisPropsWithDefaults<
   RawData extends Record<string, unknown>,
   YK extends keyof NumericalFields<RawData>,
-> = Required<Omit<YAxisInputProps<RawData, YK>, "font" | "tickValues">> &
-  Partial<Pick<YAxisInputProps<RawData, YK>, "font" | "tickValues">>;
+> = Required<
+  Omit<YAxisInputProps<RawData, YK>, "font" | "tickValues" | "linePathEffect">
+> &
+  Partial<
+    Pick<YAxisInputProps<RawData, YK>, "font" | "tickValues" | "linePathEffect">
+  >;
 
 export type YAxisProps<
   RawData extends Record<string, unknown>,
@@ -224,8 +241,11 @@ export type YAxisProps<
 export type FrameInputProps = {
   lineWidth?: number;
   lineColor?: Color;
+  linePathEffect?: DashPathEffectComponent;
 };
-export type FramePropsWithDefaults = Required<FrameInputProps>;
+export type FramePropsWithDefaults = Required<
+  Omit<FrameInputProps, "linePathEffect">
+> & { linePathEffect?: DashPathEffectComponent };
 export type FrameProps = FramePropsWithDefaults & {
   xScale: Scale;
   yScale: Scale;
diff --git a/website/docs/cartesian/cartesian-chart.md b/website/docs/cartesian/cartesian-chart.md
index a2d7919f..af5ab888 100644
--- a/website/docs/cartesian/cartesian-chart.md
+++ b/website/docs/cartesian/cartesian-chart.md
@@ -108,7 +108,7 @@ The `axisOptions` is an optional prop allows you to configure the axes and grid
 |   **`tickCount`**   | <pre>number &#124; \{<br /> x: number; <br /> y: number;<br />\}</pre>                                                             | Defines the number of ticks to be rendered on both axes, or if provided an object, specific to x and y. If not provided, then the chart will attempt to choose a reasonable number of ticks based on the size of the chart. <br /><br />Note: This is an approximation; the scale may return more or fewer values depending on the domain, padding, and axis labels.                                                                                                         |
 |  **`tickValues`**   | <pre>[number] &#124; \{<br /> x: [number]; <br /> y: [number];<br />\}</pre>                                                       | Defines the explicit set of numeric tick values to be rendered on both axes, or if provided an object, specific to x and y. The tickValues prop is used to specify the values of each tick, so we only accept numeric values. Use the `formatXLabel` or `formatYLabel` options to customize how the ticks should be labeled. <br /><br />Note: If `tickCount` value is also provided, it will be used to downsample the provided `tickValues` array to the specified length. |
 |   **`lineColor`**   | <pre>string &#124; \{<br /> grid: string &#124; \{<br /> x: string;<br /> y: string;<br /> \};<br /> frame: string;<br />\}</pre>  | Defines the color of the grid and axis lines. It can either apply to both or be customized to each. It will default to `black` if none is provided.                                                                                                                                                                                                                                                                                                                          |
-|   **`lineWidth`**   | <pre>number &#124; \{<br /> grid: number &#124; \{<br /> x: number;<br /> y: number;<br /> \}; <br /> frame: number;<br />\}</pre> | Defines the width of the grid and axis lines. It can either apply to both or be customized to each. It will default to `Stylesheet.hairlineWidth` if none is provided. A value of `0` will disable the line rendering.                                                                                                                                                                                                                                                                                                       |
+|   **`lineWidth`**   | <pre>number &#124; \{<br /> grid: number &#124; \{<br /> x: number;<br /> y: number;<br /> \}; <br /> frame: number;<br />\}</pre> | Defines the width of the grid and axis lines. It can either apply to both or be customized to each. It will default to `Stylesheet.hairlineWidth` if none is provided. A value of `0` will disable the line rendering.                                                                                                                                                                                                                                                       |
 |  **`labelColor`**   | <pre>string &#124; \{<br /> x: string;<br /> y: string;<br />\}</pre>                                                              | Defines the color of the axis labels. It can either apply to both or be customized to each. It will default to `black` if none is provided.                                                                                                                                                                                                                                                                                                                                  |
 |  **`labelOffset`**  | <pre>number &#124; \{<br /> x: number;<br /> y: number;<br />\}</pre>                                                              | Defines the offset of the axis labels. It can either apply to both or be customized to each. It will default to `0` if none is provided.                                                                                                                                                                                                                                                                                                                                     |
 | **`labelPosition`** | <pre>AxisLabelPosition &#124; \{<br /> x: AxisLabelPosition;<br /> y: AxisLabelPosition;<br />\}</pre>                             | Defines the position of the axis labels. It can either apply to both or be customized to each. It will default to `outset` if none is provided.<br /><br />&#9432; **`AxisLabelPosition`** is an enum with the values: <code>'inset &#124; 'outset'</code>.                                                                                                                                                                                                                  |
@@ -120,46 +120,49 @@ The `axisOptions` is an optional prop allows you to configure the axes and grid
 
 The `xAxis` is an optional prop allows you to configure the X axis of the chart. If it is not present then the chart will not render any X axis. It is an object of the following properties:
 
-|      Property       | Type                                | Description                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| :-----------------: | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-|     **`font`**      | <pre>SkFont &#124; null</pre>       | Defines the font to be used for X axis labels. If not provided, then no labels will be rendered. This font object is typically returned from Skia’s `useFont` hook.                                                                                                                                                                                                                                                            |
-|   **`tickCount`**   | <pre>number</pre>                   | Defines the number of ticks to be rendered on the X axis. If not provided, then the chart will attempt to choose a reasonable number of ticks based on the size of the chart. <br /><br />Note: This is an approximation; the scale may return more or fewer values depending on the domain, padding, and axis labels.                                                                                                         |
-|  **`tickValues`**   | <pre>[number]</pre>                 | Defines the explicit set of numeric tick values to be rendered on the X axis. The tickValues prop is used to specify the values of each tick, so we only accept numeric values. Use the `formatXLabel` or `formatYLabel` options to customize how the ticks should be labeled. <br /><br />Note: If `tickCount` value is also provided, it will be used to downsample the provided `tickValues` array to the specified length. |
-|   **`lineColor`**   | <pre>Color (RN Skia Color)</pre>    | Defines the color of the X axis lines. It will default to `hsla(0, 0%, 0%, 0.25)` if none is provided.                                                                                                                                                                                                                                                                                                                         |
-|   **`lineWidth`**   | <pre>number</pre>                   | Defines the width of the X axis lines. It will default to `Stylesheet.hairlineWidth` if none is provided. A value of `0` will disable the line rendering.                                                                                                                                                                                                                                                                                                                      |
-|  **`labelColor`**   | <pre>string</pre>                   | Defines the color of the X axis label. It will default to `#000000 (black)` if none is provided.                                                                                                                                                                                                                                                                                                                               |
-|  **`labelOffset`**  | <pre>number</pre>                   | Defines the offset of the axis label. It will default to `2` if none is provided.                                                                                                                                                                                                                                                                                                                                              |
-| **`labelPosition`** | <pre>AxisLabelPosition;</pre>       | Defines the position of the x-axis labels. It will default to `outset` if none is provided.<br /><br />&#9432; **`AxisLabelPosition`** is an enum with the values: <code>'inset &#124; 'outset'</code>.                                                                                                                                                                                                                        |
-|   **`axisSide`**    | <pre>XAxisSide</pre>                | Defines the side of the chart that the `X` axis is rendered on. It will default to `bottom` if none is provided. <br /><br />&#9432; **`XAxisSide`** is an enum with the values: <code>'top' &#124; 'bottom'</code>.<br/>                                                                                                                                                                                                      |
-| **`formatXLabel`**  | <pre>(label: T[XK]) => string</pre> | Defines a function provide customization for formatting the X axis labels. It will default to just returning the value as a string if no function is provided.                                                                                                                                                                                                                                                                 |
+|       Property       | Type                                | Description                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| :------------------: | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+|      **`font`**      | <pre>SkFont &#124; null</pre>       | Defines the font to be used for X axis labels. If not provided, then no labels will be rendered. This font object is typically returned from Skia’s `useFont` hook.                                                                                                                                                                                                                                                            |
+|   **`tickCount`**    | <pre>number</pre>                   | Defines the number of ticks to be rendered on the X axis. If not provided, then the chart will attempt to choose a reasonable number of ticks based on the size of the chart. <br /><br />Note: This is an approximation; the scale may return more or fewer values depending on the domain, padding, and axis labels.                                                                                                         |
+|   **`tickValues`**   | <pre>[number]</pre>                 | Defines the explicit set of numeric tick values to be rendered on the X axis. The tickValues prop is used to specify the values of each tick, so we only accept numeric values. Use the `formatXLabel` or `formatYLabel` options to customize how the ticks should be labeled. <br /><br />Note: If `tickCount` value is also provided, it will be used to downsample the provided `tickValues` array to the specified length. |
+|   **`lineColor`**    | <pre>Color (RN Skia Color)</pre>    | Defines the color of the X axis lines. It will default to `hsla(0, 0%, 0%, 0.25)` if none is provided.                                                                                                                                                                                                                                                                                                                         |
+|   **`lineWidth`**    | <pre>number</pre>                   | Defines the width of the X axis lines. It will default to `Stylesheet.hairlineWidth` if none is provided. A value of `0` will disable the line rendering.                                                                                                                                                                                                                                                                      |
+|   **`labelColor`**   | <pre>string</pre>                   | Defines the color of the X axis label. It will default to `#000000 (black)` if none is provided.                                                                                                                                                                                                                                                                                                                               |
+|  **`labelOffset`**   | <pre>number</pre>                   | Defines the offset of the axis label. It will default to `2` if none is provided.                                                                                                                                                                                                                                                                                                                                              |
+| **`labelPosition`**  | <pre>AxisLabelPosition;</pre>       | Defines the position of the x-axis labels. It will default to `outset` if none is provided.<br /><br />&#9432; **`AxisLabelPosition`** is an enum with the values: <code>'inset &#124; 'outset'</code>.                                                                                                                                                                                                                        |
+|    **`axisSide`**    | <pre>XAxisSide</pre>                | Defines the side of the chart that the `X` axis is rendered on. It will default to `bottom` if none is provided. <br /><br />&#9432; **`XAxisSide`** is an enum with the values: <code>'top' &#124; 'bottom'</code>.<br/>                                                                                                                                                                                                      |
+|  **`formatXLabel`**  | <pre>(label: T[XK]) => string</pre> | Defines a function provide customization for formatting the X axis labels. It will default to just returning the value as a string if no function is provided.                                                                                                                                                                                                                                                                 |
+| **`linePathEffect`** | <pre>`DashPathEffect`</pre>         | Currently accepts the `<DashPathEffect />` from `react-native-skia` so one can add dashes to their axis lines. In the future this prop may accept other line path effects as well.                                                                                                                                                                                                                                             |
 
 ### `yAxis`
 
 The `yAxis` is an optional prop allows you to configure the **Y axes** of the chart. If it is not present then the chart will not render any Y-axis. To render multiple Y axes, pass in multiple Y axis objects to the array. It is an array of objects with the following properties:
 
-|        Property         | Type                                        | Description                                                                                                                                                                                                                                                                                                                                                                                                                     |
-|:-----------------------:|---------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+|        Property         | Type                                        | Description                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| :---------------------: | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **`yKeys` (optional)**  | <pre>YK[]</pre>                             | A `string[]` array of strings indicating the _keys_ of each `data[number]` object to be used on the dependent (y) axis for charting. Each yAxis object needs to specify which Y data keys it corresponds to. If only one object is passed, then this defaults to the existing yKeys and so remains optional, but you must specify it if you want to have multiple y axes, since the axis must know which data is corresponds to! |
-|       **`font`**        | <pre>SkFont &#124; null</pre>               | Defines the font to be used for x axis labels. If not provided, then no labels will be rendered. This font object is typically returned from Skia’s `useFont` hook.                                                                                                                                                                                                                                                             |
-|     **`tickCount`**     | <pre>number</pre>                           | Defines the number of ticks to be rendered on the Y axis. If not provided, then the chart will attempt to choose a reasonable number of ticks based on the size of the chart. <br /><br />Note: This is an approximation; the scale may return more or fewer values depending on the domain, padding, and axis labels.                                                                                                          |
-|    **`tickValues`**     | <pre>[number]</pre>                         | Defines the explicit set of numeric tick values to be rendered on the Y axis. The tickValues prop is used to specify the values of each tick, so we only accept numeric values. Use the `formatXLabel` or `formatYLabel` options to customize how the ticks should be labeled. <br /><br />Note: If `tickCount` value is also provided, it will be used to downsample the provided `tickValues` array to the specified length.  |
-|     **`lineColor`**     | <pre>Color (RN Skia Color)</pre>            | Defines the color of the x axis lines. It will default to `hsla(0, 0%, 0%, 0.25)` if none is provided.                                                                                                                                                                                                                                                                                                                          |
-|     **`lineWidth`**     | <pre>number</pre>                           | Defines the width of the Y axis lines. It will default to `Stylesheet.hairlineWidth` if none is provided. A value of `0` will disable the line rendering.                                                                                                                                                                                                                                                                                                                      |
-|    **`labelColor`**     | <pre>string</pre>                           | Defines the color of the Y axis label. It will default to `#000000 (black)` if none is provided.                                                                                                                                                                                                                                                                                                                                |
-|    **`labelOffset`**    | <pre>number</pre>                           | Defines the offset of the axis label. It will default to `4` if none is provided.                                                                                                                                                                                                                                                                                                                                               |
-|   **`labelPosition`**   | <pre>AxisLabelPosition;</pre>               | Defines the position of the Y-axis labels. It will default to `outset` if none is provided.<br /><br />&#9432; **`AxisLabelPosition`** is an enum with the values: <code>'inset &#124; 'outset'</code>.                                                                                                                                                                                                                         |
-|     **`axisSide`**      | <pre>YAxisSide</pre>                        | Defines the side of the chart that the `Y` axis is rendered on. It will default to `left` if none is provided. <br /><br />&#9432; **`YAxisSide`** is an enum with the values: <code>'left' &#124; 'right'</code>.<br/>                                                                                                                                                                                                         |
-|   **`formatYLabel`**    | <pre>(label: T[YK]) => string</pre>         | Defines a function provide customization for formatting the Y-axis labels. It will default to just returning the value as a string if no function is provided.                                                                                                                                                                                                                                                                  |
-| **`domain` (optional)** | <pre>[number] &#124; [number, number]</pre> | Defines the domain for the Y-axis that can be specified to control the upper and lower bounds of the Y-axis. It defaults to the min and max of the range.                                                                                                                                                                                                                                                                       |
+|       **`font`**        | <pre>SkFont &#124; null</pre>               | Defines the font to be used for x axis labels. If not provided, then no labels will be rendered. This font object is typically returned from Skia’s `useFont` hook.                                                                                                                                                                                                                                                              |
+|     **`tickCount`**     | <pre>number</pre>                           | Defines the number of ticks to be rendered on the Y axis. If not provided, then the chart will attempt to choose a reasonable number of ticks based on the size of the chart. <br /><br />Note: This is an approximation; the scale may return more or fewer values depending on the domain, padding, and axis labels.                                                                                                           |
+|    **`tickValues`**     | <pre>[number]</pre>                         | Defines the explicit set of numeric tick values to be rendered on the Y axis. The tickValues prop is used to specify the values of each tick, so we only accept numeric values. Use the `formatXLabel` or `formatYLabel` options to customize how the ticks should be labeled. <br /><br />Note: If `tickCount` value is also provided, it will be used to downsample the provided `tickValues` array to the specified length.   |
+|     **`lineColor`**     | <pre>Color (RN Skia Color)</pre>            | Defines the color of the x axis lines. It will default to `hsla(0, 0%, 0%, 0.25)` if none is provided.                                                                                                                                                                                                                                                                                                                           |
+|     **`lineWidth`**     | <pre>number</pre>                           | Defines the width of the Y axis lines. It will default to `Stylesheet.hairlineWidth` if none is provided. A value of `0` will disable the line rendering.                                                                                                                                                                                                                                                                        |
+|    **`labelColor`**     | <pre>string</pre>                           | Defines the color of the Y axis label. It will default to `#000000 (black)` if none is provided.                                                                                                                                                                                                                                                                                                                                 |
+|    **`labelOffset`**    | <pre>number</pre>                           | Defines the offset of the axis label. It will default to `4` if none is provided.                                                                                                                                                                                                                                                                                                                                                |
+|   **`labelPosition`**   | <pre>AxisLabelPosition;</pre>               | Defines the position of the Y-axis labels. It will default to `outset` if none is provided.<br /><br />&#9432; **`AxisLabelPosition`** is an enum with the values: <code>'inset &#124; 'outset'</code>.                                                                                                                                                                                                                          |
+|     **`axisSide`**      | <pre>YAxisSide</pre>                        | Defines the side of the chart that the `Y` axis is rendered on. It will default to `left` if none is provided. <br /><br />&#9432; **`YAxisSide`** is an enum with the values: <code>'left' &#124; 'right'</code>.<br/>                                                                                                                                                                                                          |
+|   **`formatYLabel`**    | <pre>(label: T[YK]) => string</pre>         | Defines a function provide customization for formatting the Y-axis labels. It will default to just returning the value as a string if no function is provided.                                                                                                                                                                                                                                                                   |
+| **`domain` (optional)** | <pre>[number] &#124; [number, number]</pre> | Defines the domain for the Y-axis that can be specified to control the upper and lower bounds of the Y-axis. It defaults to the min and max of the range.                                                                                                                                                                                                                                                                        |
+|  **`linePathEffect`**   | <pre>`DashPathEffect`</pre>                 | Currently accepts the `<DashPathEffect />` from `react-native-skia` so one can add dashes to their axis lines. In the future this prop may accept other line path effects as well.                                                                                                                                                                                                                                               |
 
 ### `frame`
 
 The `frame` is an optional prop allows you to configure the frame of the chart. If it is not present then the chart will not render any frame. It is an object with the following properties:
 
-|    Property     | Type                             | Description                                                                                        |
-| :-------------: | -------------------------------- | -------------------------------------------------------------------------------------------------- |
-| **`lineColor`** | <pre>Color (RN Skia Color)</pre> | Defines the color of the frame. It will default to `hsla(0, 0%, 0%, 0.25)` if none is provided.    |
-| **`lineWidth`** | <pre>number</pre>                | Defines the width of the frame. It will default to `Stylesheet.hairlineWidth` if none is provided. A value of `0` will disable the line rendering. |
+|       Property       | Type                             | Description                                                                                                                                                                 |
+| :------------------: | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|   **`lineColor`**    | <pre>Color (RN Skia Color)</pre> | Defines the color of the frame. It will default to `hsla(0, 0%, 0%, 0.25)` if none is provided.                                                                             |
+|   **`lineWidth`**    | <pre>number</pre>                | Defines the width of the frame. It will default to `Stylesheet.hairlineWidth` if none is provided. A value of `0` will disable the line rendering.                          |
+| **`linePathEffect`** | <pre>`DashPathEffect`</pre>      | Currently accepts the `<DashPathEffect />` from `react-native-skia` so one can add dashes to the frame. In the future this prop may accept other line path effects as well. |
 
 ### `chartPressState`