Legends

The Legends component in REAVIZ provides a visual representation of the data series in a chart. Legends help users understand what each color or symbol in the chart represents.

Types supported by reaviz:

Discrete Legend: Displays individual entries for each data series. REAVIZ does not include legends by default to keep the library modular, but you can add discrete legends as needed.
Sequential Legend: Useful for categorical charts such as heatmaps, supporting both vertical and horizontal layouts.

Where to use:

Clarify Data Series: Ideal for providing clear labels and color codes for different data series in a chart.
Enhance Readability: Useful for improving the readability and interpretation of complex charts.
Categorical Data Representation: Great for representing categorical data in charts like heatmaps.

Examples

Descrete

Sequential

API

DiscreteLegend

Name	Type	Default
`className`	`string` CSS Class name.
`style`	`CSSProperties` CSS Styles.
`orientation`	`"horizontal" \| "vertical"` Orientation of the legend.	`'vertical'`
`entries`	`ReactElement<DiscreteLegendEntryProps, FC<Partial<DiscreteLegendEntryProps>>>[]` Entry components to show in the legend.

DiscreteLegendEntry

Name	Type	Default
`label`	`string` Label for the entry.
`color`	`string` Color for the entry.
`symbol`	`ReactElement<DiscreteLegendSymbolProps, FC<Partial<DiscreteLegendSymbolProps>>> \| ReactNode` Symbol for the entry.	`<DiscreteLegendSymbol />`
`style`	`CSSProperties` CSS Styles.
`className`	`string` CSS Class names.
`title`	`string` HTML Title Attribute.
`orientation`	`"horizontal" \| "vertical"` Orientation of the entry set internally by `DiscreteLegend`.	`'horizontal'`
`onMouseEnter`	`(event: MouseEvent<HTMLDivElement, MouseEvent>) => void` Mouse enter event.
`onMouseLeave`	`(event: MouseEvent<HTMLDivElement, MouseEvent>) => void` Mouse leave event.
`onClick`	`(event: MouseEvent<HTMLDivElement, MouseEvent>) => void` On click event.

DiscreteLegendSymbol

Name	Type	Default
`color`	`string` Color for the symbol set by the `DiscreteLegendEntry`.
`className`	`string` CSS Class names.

SequentialLegend

Name	Type	Default
`className`	`any` CSS Class name.
`gradientClassName`	`string` CSS Class name for the gradient element.
`style`	`any` CSS Styles.
`orientation`	`"horizontal" \| "vertical"` Orientation of the legend.	`'vertical'`
`data`	`ChartDataShape[]` Data to use to render the scale.
`colorScheme`	`string[]` Color scheme for the scale.	`['rgba(28, 107, 86, 0.5)', '#2da283']`

Last updated on June 10, 2026

Gridlines Markline