Finalize copy and colors.

example/app/bar-chart.tsx

@@ -7,14 +7,18 @@ import inter from "../assets/inter-medium.ttf";
 import { appColors } from "./consts/colors";
 import { InputSlider } from "../components/InputSlider";
 import { Button } from "../components/Button";
+import { InfoCard } from "../components/InfoCard";
+import { ChartRoutes } from "./consts/routes";
 
 const DATA = (length: number = 10) =>
   Array.from({ length }, (_, index) => ({
     month: index + 1,
     listenCount: Math.floor(Math.random() * (50 - 20 + 1)) + 20,
   }));
 
-export default function BarChartPage() {
+export default function BarChartPage(props: { segment: string }) {
+  const description =
+    ChartRoutes.find((r) => r.path === "/" + props.segment)?.description ?? "";
   const font = useFont(inter, 12);
   const isDark = useDarkMode();
   const [data, setData] = useState(DATA(5));
@@ -65,6 +69,7 @@ export default function BarChartPage() {
           style={styles.optionsScrollView}
           contentContainerStyle={styles.options}
         >
+          <InfoCard style={{ marginBottom: 16 }}>{description}</InfoCard>
           <View
             style={{
               flexDirection: "row",

example/app/bar-group.tsx

@@ -2,10 +2,13 @@ import * as React from "react";
 import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native";
 import { BarGroup, CartesianChart } from "victory-native";
 import { LinearGradient, useFont, vec } from "@shopify/react-native-skia";
+import { useDarkMode } from "react-native-dark";
 import { appColors } from "./consts/colors";
 import inter from "../assets/inter-medium.ttf";
 import { Button } from "../components/Button";
 import { InputSlider } from "../components/InputSlider";
+import { InfoCard } from "../components/InfoCard";
+import { ChartRoutes } from "./consts/routes";
 
 const DATA = (length: number = 10) =>
   Array.from({ length }, (_, index) => ({
@@ -15,11 +18,14 @@ const DATA = (length: number = 10) =>
     w: 5 + Math.floor(45 * Math.random()),
   }));
 
-export default function BarGroupPage() {
+export default function BarGroupPage(props: { segment: string }) {
+  const description =
+    ChartRoutes.find((r) => r.path === "/" + props.segment)?.description ?? "";
   const [data, setData] = React.useState(DATA(5));
   const [betweenGroupPadding, setBetweenGroupPadding] = React.useState(0.4);
   const [withinGroupPadding, setWithinGroupPadding] = React.useState(0.1);
   const font = useFont(inter, 12);
+  const isDark = useDarkMode();
 
   return (
     <SafeAreaView style={styles.safeView}>
@@ -29,8 +35,17 @@ export default function BarGroupPage() {
           xKey="x"
           yKeys={["y", "z", "w"]}
           domain={{ y: [0, 50] }}
+          padding={{ left: 10, right: 10, bottom: 5, top: 15 }}
           domainPadding={{ left: 50, right: 50, top: 30 }}
-          axisOptions={{ font }}
+          axisOptions={{
+            font,
+            tickCount: { y: 10, x: 5 },
+            lineColor: isDark ? "#71717a" : "#d4d4d8",
+            labelColor: isDark ? appColors.text.dark : appColors.text.light,
+          }}
+          gridOptions={{
+            lineColor: isDark ? "#71717a" : "#d4d4d8",
+          }}
         >
           {({ points, chartBounds }) => (
             <BarGroup
@@ -39,22 +54,26 @@ export default function BarGroupPage() {
               withinGroupPadding={withinGroupPadding}
             >
               <BarGroup.Bar points={points.y} animate={{ type: "timing" }}>
+                <LinearGradient
+                  start={vec(0, 0)}
+                  end={vec(0, 540)}
+                  colors={["#f472b6", "#be185d90"]}
+                />
+              </BarGroup.Bar>
+              <BarGroup.Bar points={points.z} animate={{ type: "timing" }}>
+                <LinearGradient
+                  start={vec(0, 0)}
+                  end={vec(0, 500)}
+                  colors={["#c084fc", "#7c3aed90"]}
+                />
+              </BarGroup.Bar>
+              <BarGroup.Bar points={points.w} animate={{ type: "timing" }}>
                 <LinearGradient
                   start={vec(0, 0)}
                   end={vec(0, 500)}
-                  colors={["#00ff00", "#000000"]}
+                  colors={["#a5f3fc", "#0891b290"]}
                 />
               </BarGroup.Bar>
-              <BarGroup.Bar
-                points={points.z}
-                color="blue"
-                animate={{ type: "timing" }}
-              />
-              <BarGroup.Bar
-                points={points.w}
-                color="purple"
-                animate={{ type: "timing" }}
-              />
             </BarGroup>
           )}
         </CartesianChart>
@@ -63,12 +82,12 @@ export default function BarGroupPage() {
         style={styles.optionsScrollView}
         contentContainerStyle={styles.options}
       >
+        <InfoCard>{description}</InfoCard>
         <View
           style={{
             flexDirection: "row",
             gap: 12,
-            marginTop: 10,
-            marginBottom: 16,
+            marginVertical: 16,
           }}
         >
           <Button

example/app/consts/routes.ts

@@ -6,35 +6,37 @@ export const ChartRoutes: {
   {
     title: "Line Chart",
     description:
-      "A simple line chart with controls and animations to show off Victory Native XL’s customization.",
+      "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: "Bar Chart",
-    description: "A simple bar chart.",
+    description:
+      "This is a single Bar chart in Victory that supports customized spacing between each bar.",
     path: "/bar-chart",
   },
   {
     title: "Bar Group",
-    description: "A bar chart with grouped data.",
+    description:
+      "This chart demonstrates grouping and displaying multiple sets of data in a Bar chart. Victory supports customizing the spacing between each bar inside the group and spacing around the groups.",
     path: "/bar-group",
   },
   {
     title: "Custom Drawing",
     description:
-      "A chart that demonstrates Victory Native XL’s ability to support custom drawing using Skia.",
+      "Victory provides the developer full access to all the transformed data points. This chart shows off using that data to draw custom shapes using Skia directly in Victory.",
     path: "/custom-drawing",
   },
   {
     title: "Stock Price",
     description:
-      "A chart with a massive data set and touch points showing off Victory Native’s improved performance.",
+      "This chart shows off Victory’s support for large datasets and multi-touch interactions. You can use Victory’s active press array to support single or multi-touch..",
     path: "/stock-price",
   },
   {
     title: "Ordinal Data",
     description:
-      "A chart showing Victory Native’s ability to render ordinal data on the chart’s domain.",
+      "This chart shows off ordinal data and touch events. Tap different x axis points to see the highlighted dot move. The color changes based on interpolating the color from the transformed and range data.",
     path: "/ordinal-data",
   },
 ];

example/app/custom-drawing.tsx

@@ -8,6 +8,8 @@ import inter from "../assets/inter-medium.ttf";
 import { appColors } from "./consts/colors";
 import { InputSlider } from "../components/InputSlider";
 import { InputColor } from "../components/InputColor";
+import { InfoCard } from "../components/InfoCard";
+import { ChartRoutes } from "./consts/routes";
 
 const DATA = Array.from({ length: 13 }, (_, index) => ({
   day: index + 1,
@@ -30,7 +32,9 @@ const calculateStarPoints = (
   return vectors;
 };
 
-export default function LineChartPage() {
+export default function CustomDrawingPage(props: { segment: string }) {
+  const description =
+    ChartRoutes.find((r) => r.path === "/" + props.segment)?.description ?? "";
   const font = useFont(inter, 12);
   const isDark = useDarkMode();
   const [numPoints, setNumPoints] = useState(5);
@@ -81,6 +85,7 @@ export default function LineChartPage() {
           style={styles.optionsScrollView}
           contentContainerStyle={styles.options}
         >
+          <InfoCard style={{ marginBottom: 16 }}>{description}</InfoCard>
           <InputSlider
             label="Number of points"
             maxValue={8}

example/app/line-chart.tsx

@@ -25,6 +25,7 @@ import inter from "../assets/inter-medium.ttf";
 import { appColors } from "./consts/colors";
 import { Button } from "../components/Button";
 import { InfoCard } from "../components/InfoCard";
+import { ChartRoutes } from "./consts/routes";
 
 const randomNumber = () => Math.floor(Math.random() * (50 - 25 + 1)) + 25;
 
@@ -34,7 +35,9 @@ const DATA = (numberPoints = 13) =>
     sales: randomNumber(),
   }));
 
-export default function LineChartPage() {
+export default function LineChartPage(props: { segment: string }) {
+  const description =
+    ChartRoutes.find((r) => r.path === "/" + props.segment)?.description ?? "";
   const isDark = useDarkMode();
   const [
     {
@@ -65,7 +68,7 @@ export default function LineChartPage() {
       line: isDark ? "#71717a" : "#d4d4d8",
       xLabel: isDark ? appColors.text.dark : appColors.text.light,
       yLabel: isDark ? appColors.text.dark : appColors.text.light,
-      scatter: appColors.tint,
+      scatter: "#a78bfa",
     },
   });
   const font = useFont(inter, fontSize);
@@ -125,11 +128,7 @@ export default function LineChartPage() {
         style={styles.optionsScrollView}
         contentContainerStyle={styles.options}
       >
-        <InfoCard>
-          This chart shows off a line with scatter points. This view also
-          highlights Victory’s extensive customization options for the grid,
-          axis, chart, colors, and curve.
-        </InfoCard>
+        <InfoCard>{description}</InfoCard>
         <View
           style={{
             flexDirection: "row",

example/app/ordinal-data.tsx

@@ -20,10 +20,13 @@ import { appColors } from "./consts/colors";
 import { InfoCard } from "../components/InfoCard";
 import { AnimatedText } from "../components/AnimatedText";
 import { Text } from "../components/Text";
+import { ChartRoutes } from "./consts/routes";
 
 const colors = [appColors.tint, "#818cf8"];
 
-export default function OrdinalDataScreen() {
+export default function OrdinalDataScreen(props: { segment: string }) {
+  const description =
+    ChartRoutes.find((r) => r.path === "/" + props.segment)?.description ?? "";
   const font = useFont(inter, 12);
   const { state: activePress } = useChartPressSharedValue(["high"]);
   const activeX = activePress.x.value;
@@ -97,11 +100,7 @@ export default function OrdinalDataScreen() {
         style={styles.optionsScrollView}
         contentContainerStyle={styles.options}
       >
-        <InfoCard>
-          This chart shows off ordinal data and touch events. Tap different x
-          axis points to see the highlighted dot move. The color changes based
-          on interpolating the color from the transformed and range data.
-        </InfoCard>
+        <InfoCard>{description}</InfoCard>
       </ScrollView>
     </SafeAreaView>
   );