diff --git a/example/app/constant-line-chart.tsx b/example/app/constant-line-chart.tsx
new file mode 100644
index 00000000..a5ef9543
--- /dev/null
+++ b/example/app/constant-line-chart.tsx
@@ -0,0 +1,210 @@
+import {
+ useFont,
+ Line as SKLine,
+ vec,
+ Skia,
+ Path,
+} from "@shopify/react-native-skia";
+import * as React from "react";
+import { useState } from "react";
+import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native";
+import { CartesianChart, Line, Scatter } from "victory-native";
+import type { PointsArray, Scale } from "lib/src/types";
+import { useDarkMode } from "react-native-dark";
+
+import {
+ optionsInitialState,
+ optionsReducer,
+} from "example/hooks/useOptionsReducer";
+import inter from "../assets/inter-medium.ttf";
+import { appColors } from "./consts/colors";
+
+const randomNumber = () => Math.floor(Math.random() * (50 - 25 + 1)) + 25;
+
+const DATA = (numberPoints = 13) =>
+ Array.from({ length: numberPoints }, (_, index) => ({
+ day: index + 1,
+ sales: randomNumber(),
+ constant: 33,
+ }));
+
+export default function ConstantLineChartPage() {
+ const isDark = useDarkMode();
+ const [
+ {
+ fontSize,
+ chartPadding,
+ strokeWidth,
+ xAxisSide,
+ yAxisSide,
+ xLabelOffset,
+ yLabelOffset,
+ xTickCount,
+ yTickCount,
+ xAxisLabelPosition,
+ yAxisLabelPosition,
+ scatterRadius,
+ colors,
+ domainPadding,
+ curveType,
+ customXLabel,
+ customYLabel,
+ },
+ ] = React.useReducer(optionsReducer, {
+ ...optionsInitialState,
+ domainPadding: 10,
+ chartPadding: 10,
+ strokeWidth: 2,
+ colors: {
+ stroke: isDark ? "#fafafa" : "#71717a",
+ xLine: isDark ? "#71717a" : "#ffffff",
+ yLine: isDark ? "#aabbcc" : "#ddfa55",
+ frameLine: isDark ? "#444" : "#aaa",
+ xLabel: isDark ? appColors.text.dark : appColors.text.light,
+ yLabel: isDark ? appColors.text.dark : appColors.text.light,
+ scatter: "#a78bfa",
+ },
+ });
+ const font = useFont(inter, fontSize);
+ const [data] = useState(DATA());
+
+ return (
+
+
+ {
+ return customXLabel ? `${value} ${customXLabel}` : `${value}`;
+ },
+ formatYLabel: (value) => {
+ return customYLabel ? `${value} ${customYLabel}` : `${value}`;
+ },
+ }}
+ data={data}
+ domainPadding={domainPadding}
+ >
+ {({ points, xScale, yScale }) => (
+ <>
+ {/* dashed line via Skia path */}
+
+ {/* straight line via Skia Line */}
+
+ {/* example of a "straight line", using only data */}
+
+
+
+ >
+ )}
+
+
+
+
+ );
+}
+
+type FixedLine = {
+ xScale: Scale;
+ yScale: Scale;
+ data: PointsArray;
+};
+const DashedFixedLine = ({ data, xScale, yScale }: FixedLine) => {
+ const dottedLinePath = Skia.Path.Make();
+ dottedLinePath.moveTo(xScale(0), yScale(46));
+ dottedLinePath.lineTo(
+ xScale((data[data.length - 1]!.xValue as number) + 1),
+ yScale(46),
+ );
+ dottedLinePath.dash(8, 4, 0);
+
+ return (
+
+ );
+};
+const StraightFixedLine = ({ data, xScale, yScale }: FixedLine) => {
+ return (
+
+ );
+};
+
+const styles = StyleSheet.create({
+ safeView: {
+ flex: 1,
+ backgroundColor: appColors.viewBackground.light,
+ $dark: {
+ backgroundColor: appColors.viewBackground.dark,
+ },
+ },
+ chart: {
+ flex: 1,
+ },
+ optionsScrollView: {
+ flex: 0.5,
+ backgroundColor: appColors.cardBackground.light,
+ $dark: {
+ backgroundColor: appColors.cardBackground.dark,
+ },
+ },
+ options: {
+ paddingHorizontal: 20,
+ paddingVertical: 15,
+ alignItems: "flex-start",
+ justifyContent: "flex-start",
+ },
+});
diff --git a/example/app/consts/routes.ts b/example/app/consts/routes.ts
index eb8cc21e..10116816 100644
--- a/example/app/consts/routes.ts
+++ b/example/app/consts/routes.ts
@@ -10,6 +10,11 @@ export const ChartRoutes: {
"This chart shows off a line with scatter points. This view also features Victory’s extensive customization options for the grid, axis chart, colors, and curve.",
path: "/line-chart",
},
+ {
+ title: "Constant Line Chart",
+ description: "This chart shows off constant lines with scatter points. ",
+ path: "/constant-line-chart",
+ },
{
title: "Bar Chart",
description: