How can I attach a label to an end of a line?

[yusuf8ahmed]

How can I attach a label to an end of a line, something like the image below:

Here is my current code:

import { useMemo, useEffect } from "react";

import {
  AnimatedAxis, // any of these can be non-animated equivalents
  AreaSeries,
  XYChart,
  Tooltip,
  DataContext,
  lightTheme as lt,
  darkTheme as dt,
  buildChartTheme
} from '@visx/xychart';

import { LinearGradient } from '@visx/gradient'
import { curveCardinal } from '@visx/curve';
import { ParentSize } from '@visx/responsive';
import { Card } from "@/components/ui/card";
import { Tabs } from "@/components/shared/tabs"

const dateScaleConfig = { type: 'band', padding: 0.3 }
const moneyScaleConfig = { type: 'linear' }

const theme = buildChartTheme(({
  ...lt,
  colors: ['#109CF1', '#f1102b'],
}))

const data = [
  { date: "01-01-2023 03:04", total: 280000, saved: 140000 },
  { date: "01-15-2023 03:04", total: 285000, saved: 142500 },
  { date: "01-29-2023", total: 290000, saved: 145000 },

  { date: "02-12-2023", total: 295000, saved: 147500 },
  { date: "02-26-2023", total: 300000, saved: 150000 },

  { date: "03-12-2023", total: 305000, saved: 152500 },
  { date: "03-26-2023", total: 310000, saved: 155000 },

  { date: "04-09-2023", total: 315000, saved: 157500 },
  { date: "04-23-2023", total: 320000, saved: 160000 },
];

const dataTotal = data.map(({ saved, date, ...rest }) => ({ ...rest, date: date }));
const dataSaved = data.map(({ total, date, ...rest }) => ({ ...rest, date: date }));

const Page = () => {
  const config = useMemo(
    () => ({
      x: dateScaleConfig,
      y: moneyScaleConfig,
    }),
    [],
  )

  useEffect(() => {
    setTimeout(() => {
      window.dispatchEvent(new CustomEvent('scroll'))
    }, 300)
  })

  return (
    <div className="flex flex-col gap-3">
      <Card
        key={0}
        className="flex flex-col row-span-1 rounded-xl border-1 border-slate-400/10 border border-card-border p-2 dark:bg-slate-900"
      >
        <ParentSize>
          {
            ({ width, height }) => (
              <XYChart
                theme={theme}
                height={225}
                width={width == 0 ? 100 : width}
                xScale={config.x}
                yScale={config.y}
                margin={{
                  top: 20,
                  right: 5,
                  bottom: 25,
                  left: 5
                }}
              >
                <LinearGradient
                  id="total-gradient"
                  from="#109CF1"
                  to="#109CF1"
                  toOpacity={0.1}
                />
                <LinearGradient
                  id="saved-gradient"
                  from="#f1102b"
                  to="#f1102b"
                  toOpacity={0.1}
                />

                <AreaSeries dataKey="Total" data={dataTotal} curve={curveCardinal} xAccessor={d => d.date} yAccessor={d => d.total} fillOpacity={0.2} fill="url(#total-gradient)" />
                <AreaSeries dataKey="Saved" data={dataSaved} curve={curveCardinal} xAccessor={d => d.date} yAccessor={d => d.saved} fillOpacity={0.2} fill="url(#saved-gradient)" />

                <AnimatedAxis
                  orientation="bottom"
                  strokeWidth={0}
                  hideAxisLine
                  hideTicks
                  tickFormat={date => {
                    const d = new Date(date);
                    return d.toLocaleDateString('en-US', { month: 'short' });
                  }}
                />
                {/* <AnimatedAxis
                  orientation="left"
                  numTicks={5}
                  hideAxisLine
                  hideTicks
                  tickFormat={value => {
                    if ((value / 1000) >= 1) {
                      value = value / 1000 + "K";
                    }
                    return value;
                  }}
                /> */}
              </XYChart>
            )
          }
        </ParentSize>

      </Card>
    </div>
  );
};

export default Page;

[yusuf8ahmed]

any ideas @williaster ?

[williaster]

hey @yusuf8ahmed, you can easily tap into the chart's DataContext to access data and scales. here's a sandbox (which may not work, they are updating their pay plan in a couple of days, so pasted the Label component below)

import React, { useContext } from "react";
import { DataContext, XYChart, ... } from "@visx/xychart";

// chart
const Chart = () => (
  <XYChart {...}>
     {...}

     {/** data keys for this chart are a/b */}
     <Label dataKey="a" />
     <Label dataKey="b" />
  </XYChart>
);

// custom label component
const Label = ({ dataKey }: { dataKey: string }) => {
  const { theme, xScale, yScale, dataRegistry, colorScale } = useContext(DataContext);
  const data = dataRegistry?.get(dataKey);

  if (!data || !xScale || !yScale || !colorScale) return null;

  const lastDatum = data.data[data.data?.length - 1];

  return (
    <text
      x={xScale(data.xAccessor(lastDatum))}
      y={yScale(data.yAccessor(lastDatum))}
      {...theme?.svgLabelBig}
      fill={colorScale(dataKey)}
      dx="1em"
      textAnchor="start"
    >
      {lastDatum.y.toLocaleString(undefined, { maximumFractionDigits: 0 })}
    </text>
  );
};

[yusuf8ahmed]

anybody has any ideas on how todo this?