feat: integrate axis labels

example/app/index.tsx

@@ -1,6 +1,6 @@
-import { LineChart } from "@codeherence/react-native-graph";
+import { type AxisLabelComponentProps, LineChart } from "@codeherence/react-native-graph";
 import { useCallback, useState } from "react";
-import { Button, StyleSheet, View } from "react-native";
+import { Button, StyleSheet, Text, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { Banner } from "../components/Banner";
@@ -9,6 +9,15 @@ const generateRandomData = (): [number, number][] => {
   return Array.from({ length: 100 }, (_, i) => [i, Math.random() * 2000]);
 };
 
+const formatter = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+});
+
+const AxisLabel: React.FC<AxisLabelComponentProps> = ({ value }) => (
+  <Text>{formatter.format(value)}</Text>
+);
+
 export default () => {
   const { top, bottom } = useSafeAreaInsets();
   const [data, setData] = useState<[number, number][]>(generateRandomData());
@@ -20,7 +29,13 @@ export default () => {
   return (
     <View style={[styles.container, { paddingTop: top, paddingBottom: bottom }]}>
       <Button title="Randomize data" onPress={handlePress} />
-      <LineChart points={data} style={styles.chart} BannerComponent={Banner} />
+      <LineChart
+        points={data}
+        style={styles.chart}
+        BannerComponent={Banner}
+        TopAxisLabel={AxisLabel}
+        BottomAxisLabel={AxisLabel}
+      />
     </View>
   );
 };

src/components/LineChart/index.tsx

@@ -1,10 +1,10 @@
 import { Canvas, Path } from "@shopify/react-native-skia";
 import { useCallback, useMemo, useState } from "react";
-import { LayoutChangeEvent, Platform, StyleSheet, Text, View, ViewProps } from "react-native";
+import { LayoutChangeEvent, Platform, StyleSheet, View, ViewProps } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import { useDerivedValue, useSharedValue } from "react-native-reanimated";
 
-import { AxisLabelContainer } from "./AxisLabel";
+import { AxisLabelComponentProps, AxisLabelContainer } from "./AxisLabel";
 import type { BannerComponentProps } from "./Banner";
 import { Cursor } from "./Cursor";
 import { computePath, getYForX, type ComputePathProps, computeGraphData } from "./Math";
@@ -24,15 +24,10 @@ export type LineChartProps = ViewProps & {
   /** A worklet function to format a given price. */
   formatter?: (price: number) => string;
   BannerComponent?: React.FC<BannerComponentProps>;
-  TopAxisLabel?: React.FC;
-  BottomAxisLabel?: React.FC;
+  TopAxisLabel?: React.FC<AxisLabelComponentProps>;
+  BottomAxisLabel?: React.FC<AxisLabelComponentProps>;
 };
 
-const currencyFormatter = new Intl.NumberFormat("en-US", {
-  style: "currency",
-  currency: "USD",
-});
-
 const GestureMethod = Platform.OS === "web" ? Gesture.Hover : Gesture.Pan;
 
 export const LineChart: React.FC<LineChartProps> = ({
@@ -77,9 +72,11 @@ export const LineChart: React.FC<LineChartProps> = ({
 
   return (
     <View style={[styles.root, viewProps.style]} {...viewProps}>
-      <AxisLabelContainer x={data.maxValueXProportion * width} containerWidth={width}>
-        <Text style={{ fontSize: 12 }}>{currencyFormatter.format(data.maxValue)}</Text>
-      </AxisLabelContainer>
+      {TopAxisLabel && (
+        <AxisLabelContainer x={data.maxValueXProportion * width} containerWidth={width}>
+          <TopAxisLabel value={data.maxValue} />
+        </AxisLabelContainer>
+      )}
       <GestureDetector gesture={gesture}>
         <View style={styles.container} onLayout={onLayout}>
           <Canvas style={{ height, width }}>
@@ -88,15 +85,17 @@ export const LineChart: React.FC<LineChartProps> = ({
           </Canvas>
         </View>
       </GestureDetector>
-      <AxisLabelContainer x={data.minValueXProportion * width} containerWidth={width}>
-        <Text style={{ fontSize: 12 }}>{currencyFormatter.format(data.minValue)}</Text>
-      </AxisLabelContainer>
+      {BottomAxisLabel && (
+        <AxisLabelContainer x={data.minValueXProportion * width} containerWidth={width}>
+          <BottomAxisLabel value={data.minValue} />
+        </AxisLabelContainer>
+      )}
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  root: { position: "relative" },
+  root: { position: "relative", overflow: "hidden" },
   container: { flex: 1 },
   canvas: { flex: 1 },
 });

src/index.ts

@@ -1,2 +1,3 @@
 export { LineChart } from "./components/SkiaComponents";
 export { type BannerComponentProps } from "./components/LineChart/Banner";
+export { type AxisLabelComponentProps } from "./components/LineChart/AxisLabel";