Annotations

When composing charts with VictoryChart, annotations can be added to your chart using VictoryAnnotation. This guide will cover the basic usage of VictoryAnnotation and its props.

Labels

Use VictoryLabel as a child of VictoryChart to add arbitrary labels. Labels can be positioned with the x and y props, or with datum when used within VictoryChart or VictoryGroup.

Live View

Loading...

Live Editor

<VictoryChart
  domain={[0, 10]}
  theme={VictoryTheme.clean}
>
  <VictoryLabel
    text="Chart Title"
    x={225}
    y={30}
    textAnchor="middle"
  />
  <VictoryLine y={(d) => d.x} />
  <VictoryLabel
    text="Annotation"
    datum={{ x: 4, y: 6 }}
    textAnchor="middle"
  />
</VictoryChart>

Lines & Markers

Victory doesn't have specific components for annotations. Instead, use standard components such as VictoryLine and VictoryScatter to add lines and markers to your chart.

Live View

Loading...

Live Editor

<VictoryChart
  domain={[0, 10]}
  theme={VictoryTheme.clean}
>
  <VictoryLine y={(d) => d.x} />
  <VictoryLine
    style={{
      data: {
        stroke: "red",
        strokeWidth: 1,
      },
      labels: {
        angle: -90,
        fill: "red",
        fontSize: 20,
      },
    }}
    labels={["Important"]}
    labelComponent={
      <VictoryLabel y={100} />
    }
    x={() => 5}
  />
  <VictoryScatter
    symbol="star"
    size={8}
    style={{ data: { fill: "red" } }}
    data={[{ x: 5, y: 5 }]}
  />
</VictoryChart>