Custom Annotations on XY Line Charts with visx and React

In this article, we will learn how to build an XY line chart with custom annotations using visx and React.

 is a library built and maintained by the folks at 

, that provides low-level visualization primitives for React. It is a thin wrapper around 

 and is infinitely customizable for any of your data visualization needs.

 provides React components encapsulating D3 constructs, taking away some of the complexities and learning curve involved in working with D3. 

In this tutorial, we will learn how to use custom annotations to enrich and add context to your line charts using 

We will be charting Apple Inc.’s (AAPL) stock price over the last ten years and overlaying it with annotations for different product launch dates.

This will help us understand how the stock price was affected by various important launches in the company’s history.

Let us start by creating a stock standard React TypeScript app using 

npx create-react-app visx-chart-annotations —template typescript

 library which we need for this tutorial, along with 

 which we will use for date manipulation.

I’ve transformed the raw CSV data into JSON and simplified it to have just two main properties per data point - the 

 property representing the closing stock price at that date. 

I have also curated an additional dataset containing dates for important Apple product launches and company events in the last ten years. This has been combined with the stock price data - some of the data points have an additional 

 property which describes the events that occurred around the time as an array of strings.

 library that we installed earlier to create a simple plot using the first dataset from step 2.

import { Grid, LineSeries, XYChart, Axis, Tooltip } from "@visx/xychart";
import { format, parseISO, parse, formatISO } from "date-fns";

import { data } from "./data";

const chartConfig = {
  xScale: { type: "band" },
  yScale: { type: "linear" },
  margin: { top: 50, right: 10, bottom: 50, left: 50 },
};

type ChartProps = {
  width: number | string;
  height: number | string;
};

const Chart = ({ width, height }: ChartProps) => (
  <XYChart {...chartConfig} width={width} height={height}>
    <Grid numTicks={20} />
    <LineSeries
      dataKey="line"
      data={data.sort(
        (a, b) =>
          parse(a.x, "MM/dd/yyyy", new Date()).getTime() -
          parse(b.x, "MM/dd/yyyy", new Date()).getTime()
      )}
      xAccessor={(d) => formatISO(parse(d.x, "MM/dd/yyyy", new Date()))}
      yAccessor={(d) => d.y}
    />
    <Axis
      orientation="bottom"
      numTicks={20}
      tickFormat={(v) => format(parseISO(v), "dd MMM yy")}
      label="Time"
    />
    <Axis orientation="left" numTicks={20} label="Stock Price" />
    <Tooltip<{ x: string; y: number }>
      snapTooltipToDatumX
      snapTooltipToDatumY
      showVerticalCrosshair
      showSeriesGlyphs
      renderTooltip={({ tooltipData }) => (
        <div>
          {format(
            parse(tooltipData!.nearestDatum!.datum.x, "MM/dd/yyyy", new Date()),
            "do MMM yyyy"
          )}
          <br />
          {tooltipData!.nearestDatum!.datum.y}
        </div>
      )}
    />
  </XYChart>
);

export default Chart;


Let us take a closer look at the different components used in the chart:

, your app should look somewhat like this:

Now that we have a basic chart up and running, we can use the additional data in the 

 properties to add custom annotations to the chart.

{
  stockPrices
    .filter((d) => !!d.events)
    .map((datum, i) => (
      <Annotation
        dataKey="line"
        datum={datum}
        dx={labelXOffset}
        dy={labelYOffset}
      >
        <AnnotationLabel
          title={format(parse(datum.x, "MM/dd/yyyy", new Date()), "do MMM yyyy")}
          subtitle={datum.events!.join(", ")}
          showAnchorLine={false}
          backgroundFill="rgba(0,150,150,0.1)"
        />
        <AnnotationConnector />
      </Annotation>
    ));
}


 are pixel values that indicate how far away the annotation needs to be from the data point it is associated with - this prevents the annotation completely overlapping and obscuring the point in question.

 property, and added an annotation for each one that has events. Each annotation has a label that displays the date and all the events for that date. The label is attached to the data point using an 

With the annotations added, your chart should now look like this:

The annotations help provide a better picture of the company over the years, and can offer possible explanations for the variations in share price (do note, however, that 

correlation does not necessarily imply causation

In this tutorial, we have used the example of Apple's share price variations to understand how to plot an XY chart with custom annotations with 

There are a number of improvements that can be made to the chart, including:

You can read more about the XY Chart in the 

. As always, all the code used in this tutorial is available on 

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

The Future Of Software Engineering

Tutorials on Svg

Custom Annotations on XY Line Charts with visx and React

Email Newsletter

Popular Topics

Masterclasses

Tutorials

Fullstack React with TypeScript