feat: axis labels

.changeset/slow-cheetahs-fetch.md

@@ -0,0 +1,5 @@
+---
+"victory-native": minor
+---
+
+Add axis labels

example/app/bar-chart.tsx

@@ -103,7 +103,13 @@ export default function BarChartPage(props: { segment: string }) {
                 const date = new Date(2023, value - 1);
                 return date.toLocaleString("default", { month: "short" });
               },
+              axisSide: "bottom",
               linePathEffect: <DashPathEffect intervals={[4, 4]} />,
+              labelRotate: -45,
+              title: {
+                text: "Months",
+                font,
+              },
             }}
             frame={{
               lineWidth: 0,
@@ -113,6 +119,9 @@ export default function BarChartPage(props: { segment: string }) {
                 yKeys: ["listenCount"],
                 font,
                 linePathEffect: <DashPathEffect intervals={[4, 4]} />,
+                title: {
+                  text: "Listen count",
+                },
               },
             ]}
             data={data}

example/app/dashed-axes.tsx

@@ -8,6 +8,7 @@ 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 notosans from "../assets/notosans.ttf";
 import { appColors } from "../consts/colors";
 import { InfoCard } from "../components/InfoCard";
 import { descriptionForRoute } from "../consts/routes";
@@ -30,6 +31,7 @@ const generateData = () =>
 export default function DashedAxesPage(props: { segment: string }) {
   const description = descriptionForRoute(props.segment);
   const font = useFont(inter, 12);
+  const notoFont = useFont(notosans, 16);
   const [data, setData] = React.useState(generateData);
   const [, setW] = React.useState(0);
   const [, setH] = React.useState(0);
@@ -42,20 +44,32 @@ export default function DashedAxesPage(props: { segment: string }) {
             data={data}
             xKey="month"
             yKeys={["low", "high"]}
-            padding={16}
+            padding={{
+              top: 20,
+              right: 20,
+            }}
             domain={{ y: [0, 65] }}
-            domainPadding={{ top: 20 }}
             xAxis={{
               font,
-              labelOffset: 4,
+              labelOffset: 0,
               linePathEffect: <DashPathEffect intervals={[4, 4]} />,
+              title: {
+                text: "Month",
+                font: notoFont,
+                position: "center",
+                yOffset: 0,
+              },
             }}
             yAxis={[
               {
-                labelOffset: 8,
-
+                labelOffset: 4,
                 font,
-
+                title: {
+                  text: "Temperature",
+                  font: notoFont,
+                  position: "center",
+                  xOffset: 12,
+                },
                 linePathEffect: <DashPathEffect intervals={[4, 4]} />,
               },
             ]}

example/app/multiple-y-axes.tsx

@@ -117,6 +117,11 @@ export default function MultipleYAxesPage() {
                 return value.toFixed(0);
               },
               lineColor: "pink",
+              title: {
+                text: "Bottom",
+                position: "center",
+                yOffset: 2,
+              },
             }}
             frame={{
               lineColor: "black",
@@ -132,6 +137,11 @@ export default function MultipleYAxesPage() {
                 },
                 lineColor: "pink",
                 enableRescaling: true,
+                title: {
+                  text: "Temperature",
+                  position: "center",
+                  xOffset: 2,
+                },
               },
               {
                 yKeys: ["profit"],
@@ -143,6 +153,11 @@ export default function MultipleYAxesPage() {
                 axisSide: "right",
                 lineWidth: 0,
                 tickValues: [10000, 10030],
+                title: {
+                  text: "Profit",
+                  position: "center",
+                  xOffset: 0,
+                },
               },
             ]}
             data={data}

lib/src/cartesian/components/XAxis.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { StyleSheet } from "react-native";
 import {
   Group,
@@ -17,6 +17,7 @@ import type {
   XAxisProps,
   XAxisPropsWithDefaults,
 } from "../../types";
+import { getFontGlyphWidth } from "../../utils/getFontGlyphWidth";
 
 export const XAxis = <
   RawData extends Record<string, unknown>,
@@ -42,6 +43,7 @@ export const XAxis = <
   chartBounds,
   enableRescaling,
   zoom,
+  title,
 }: XAxisProps<RawData, XK>) => {
   const xScale = zoom ? zoom.rescaleX(xScaleProp) : xScaleProp;
   const [y1 = 0, y2 = 0] = yScale.domain();
@@ -52,6 +54,20 @@ export const XAxis = <
       ? xScale.ticks(tickCount)
       : xScaleProp.ticks(tickCount);
 
+  const longestLabel = xTicksNormalized.reduce((longest, tick) => {
+    const val = isNumericalData ? tick : ix[tick];
+    const contentX = formatXLabel(val as never);
+    const labelWidth =
+      font
+        ?.getGlyphWidths?.(font.getGlyphIDs(contentX))
+        .reduce((sum, value) => sum + value, 0) ?? 0;
+    return labelWidth > longest ? labelWidth : longest;
+  }, 0);
+
+  const maxLabelHeight = labelRotate
+    ? Math.abs(longestLabel * getOffsetFromAngle(labelRotate))
+    : 0;
+
   const xAxisNodes = xTicksNormalized.map((tick) => {
     const p1 = vec(xScale(tick), yScale(y2));
     const p2 = vec(xScale(tick), yScale(y1));
@@ -159,7 +175,65 @@ export const XAxis = <
     );
   });
 
-  return xAxisNodes;
+  const AxisTitle = useMemo(() => {
+    if (!title) return null;
+
+    const {
+      text,
+      position: titlePosition = "center",
+      yOffset = 2,
+      font: titleFont,
+    } = title;
+
+    const titleFontToUse = titleFont ?? font;
+    const titleWidth = getFontGlyphWidth(text, titleFontToUse);
+    const titleSize = titleFontToUse?.getSize() ?? fontSize;
+
+    // Calculate horizontal position
+    const titleX = (() => {
+      if (titlePosition === "left") return chartBounds.left;
+      if (titlePosition === "right") return chartBounds.right - titleWidth;
+      // Center by default
+      return (chartBounds.left + chartBounds.right - titleWidth) / 2;
+    })();
+
+    // Calculate vertical offset from axis
+    // offset by the maxLabelHeight (if rotated labels) + font size of the ticks + the font size of this title itself + the label offset optional prop + y offset optional prop
+    const baseOffset =
+      maxLabelHeight + fontSize + titleSize + labelOffset + (yOffset ?? 0);
+    const translateY =
+      axisSide === "bottom"
+        ? chartBounds.bottom + baseOffset
+        : chartBounds.top - baseOffset;
+
+    return (
+      <Group transform={[{ translateX: titleX }, { translateY }]}>
+        <Text
+          color={labelColor}
+          text={text}
+          font={titleFontToUse!}
+          x={0}
+          y={0}
+        />
+      </Group>
+    );
+  }, [
+    title,
+    chartBounds,
+    font,
+    fontSize,
+    labelOffset,
+    axisSide,
+    labelColor,
+    maxLabelHeight,
+  ]);
+
+  return (
+    <>
+      {xAxisNodes}
+      {AxisTitle}
+    </>
+  );
 };
 
 export const XAxisDefaults = {

lib/src/cartesian/components/YAxis.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { StyleSheet } from "react-native";
 import { Group, Line, Text, vec } from "@shopify/react-native-skia";
+import { getFontGlyphWidth } from "../../utils/getFontGlyphWidth";
 import { boundsToClip } from "../../utils/boundsToClip";
 import type {
   InputDatum,
@@ -27,10 +28,21 @@
   formatYLabel = (label: ValueOf<InputDatum>) => String(label),
   linePathEffect,
   chartBounds,
+  title,
 }: YAxisProps<RawData, YK>) => {
   const [x1 = 0, x2 = 0] = xScale.domain();
   const [_ = 0, y2 = 0] = yScale.domain();
   const fontSize = font?.getSize() ?? 0;
+
+  const longestLabel = yTicksNormalized.reduce((longest, tick) => {
+    const contentY = formatYLabel(tick as never);
+    const labelWidth =
+      font
+        ?.getGlyphWidths?.(font.getGlyphIDs(contentY))
+        .reduce((sum, value) => sum + value, 0) ?? 0;
+    return labelWidth > longest ? labelWidth : longest;
+  }, 0);
+
   const yAxisNodes = yTicksNormalized.map((tick) => {
     const contentY = formatYLabel(tick as never);
     const labelWidth =
@@ -86,7 +98,59 @@
     );
   });
 
-  return yAxisNodes;
+  const AxisTitle = useMemo(() => {
+    if (!title) return null;
+
+    const {
+      text,
+      position: titlePosition = "center",
+      xOffset = 2,
+      font: titleFont,
+    } = title;
+
+    const titleFontToUse = titleFont ?? font;
+    const titleWidth = getFontGlyphWidth(text, titleFontToUse);
+    const isRightSide = axisSide === "right";
+
+    // Calculate vertical position
+    const titleY = (() => {
+      const center = (chartBounds.bottom + chartBounds.top) / 2;
+      if (titlePosition === "top") return chartBounds.top;
+      if (titlePosition === "bottom") return chartBounds.bottom;
+      return center;
+    })();
+
+    // Calculate horizontal offset from axis
+    const baseOffset = longestLabel + labelOffset + (xOffset ?? 0);
+    const translateX = isRightSide
+      ? chartBounds.right + baseOffset
+      : chartBounds.left - baseOffset;
+
+    return (
+      <Group
+        transform={[
+          { translateX },
+          { translateY: titleY },
+          { rotate: isRightSide ? Math.PI / 2 : -Math.PI / 2 },
+        ]}
+      >
+        <Text
+          color={labelColor}
+          text={text}
+          font={titleFontToUse!}
+          x={-titleWidth / 2} // Center text horizontally
+          y={0}
+        />
+      </Group>
+    );
+  }, [title, chartBounds, font, labelOffset, fontSize, labelColor, axisSide]);
+
+  return (
+    <>
+      {yAxisNodes}
+      {AxisTitle}
+    </>
+  );
 };
 
 export const YAxisDefaults = {

lib/src/cartesian/utils/transformInputData.ts

@@ -340,6 +340,47 @@ export const transformInputData = <
     }
   }
 
+  if (xAxis?.title) {
+    const fontSize = xAxis.title.font?.getSize() ?? xAxis.font?.getSize() ?? 0;
+
+    const yScaleRange0 = yAxesTransformed[0]?.yScale.range().at(0) as number;
+    const yScaleRange1 = yAxesTransformed[0]?.yScale.range().at(-1) as number;
+    const offset = fontSize + (xAxis?.title?.yOffset ?? 0);
+
+    // bottom, outset
+    if (xAxis?.axisSide === "bottom" && xAxis?.labelPosition === "outset") {
+      yAxesTransformed[0]?.yScale.range([yScaleRange0, yScaleRange1 - offset]);
+    }
+
+    // top, outset
+    if (xAxis?.axisSide === "top" && xAxis?.labelPosition === "outset") {
+      yAxesTransformed[0]?.yScale.range([yScaleRange0 + offset, yScaleRange1]);
+    }
+  }
+
+  if (yAxes.some((yAxis) => yAxis.title)) {
+    yAxes.forEach((yAxis) => {
+      if (yAxis.title) {
+        const fontSize =
+          yAxis.title.font?.getSize() ?? yAxis.font?.getSize() ?? 0;
+        const offset = fontSize + (yAxis?.title?.xOffset ?? 0);
+
+        const xScaleRange0 = xScale.range().at(0) as number;
+        const xScaleRange1 = xScale.range().at(-1) as number;
+
+        // left, outset
+        if (yAxis?.axisSide === "left" && yAxis?.labelPosition === "outset") {
+          xScale.range([xScaleRange0 + offset, xScaleRange1]);
+        }
+
+        // right, outset
+        if (yAxis?.axisSide === "right" && yAxis?.labelPosition === "outset") {
+          xScale.range([xScaleRange0, xScaleRange1 - offset]);
+        }
+      }
+    });
+  }
+
   const ox = ixNum.map((x) => xScale(x)!);
 
   return {