Labels

We can add labels to a chart by specifying a location. We're showing a point at the coordinate of each label for clarity.

<Label x={60} y={40}>
  This is a label at (60,40)
</Label>
<Label x={20} y={80}>
  This is a label at (20,80)
</Label>

The horizontal alignment is controlled with the align prop and can be left right or center.

<Label x={50} y={15} align='right'>
  This label is right aligned
</Label>
<Label x={50} y={50} width={50} align='center'>
  This label is center aligned
</Label>
<Label x={50} y={85} align='left'>
  This label is left aligned
</Label>

The vertical alignment is controlled with the verticalAlign prop and can be top bottom or middle.

<Label x={50} y={15} align='center' width={50} verticalAlign='top'>
  This label is top aligned
</Label>
<Label
  x={50}
  y={50}
  align='center'
  height={50}
  width={50}
  verticalAlign='middle'
>
  This label is middle aligned
</Label>
<Label x={50} y={85} align='center' width={50} verticalAlign='bottom'>
  This label is bottom aligned
</Label>