Legends Guide

Let's see how to add legends to your charts.

Legend components are available via the @nivo/legends package, however it's added as a dependency for most chart packages supporting them, in most cases you won't have to add it as a direct dependency.

Legend position

The legend can be positioned in your chart area using the anchor property.
You have 9 available directives:

The legend's anchor is relative to the inner chart area (with margin applied), but depending on the chart type, you'll probably want to move it outside of this area.
That's where translateX & translateY come into play, allowing to adjust the legend position from its original anchor.

Legend direction

Legends support two directions, using the direction property, column or row.

Legend item direction

The itemDirection property defines how symbol and label are positioned.
You have 4 available directives:

The behavior is slightly different if you set justify to true as the label will be positioned at the opposite of the symbol, filling up the whole width/height of the legend's item.

Symbol shape

You can customize symbols using symbolShape property.

You can also use a custom shape passing a component to symbolShape:

const CustomSymbolShape = ({
    x, y, size, fill, borderWidth, borderColor
}) => (
    <rect
        x={x}
        y={y}
        transform={`rotate(45 ${size/2} ${size/2})`}
        fill={fill}
        strokeWidth={borderWidth}
        stroke={borderColor}
        width={size}
        height={size}
        style={{ pointerEvents: 'none' }}
    />
)