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 (opens in a new tab)
| Prop | Description | Default |
|---|---|---|
className | CSS Class name.string | |
style | CSS Styles.CSSProperties | |
orientation | Orientation of the legend."horizontal" | "vertical" | vertical |
entries | Entry components to show in the legend.ReactElement<DiscreteLegendEntryProps, FC<Partial<DiscreteLegendEntryProps>>>[] |
DiscreteLegendEntry (opens in a new tab)
| Prop | Description | Default |
|---|---|---|
label | Label for the entry.string | |
color | Color for the entry.string | |
symbol | Symbol for the entry.ReactElement<DiscreteLegendSymbolProps, FC<Partial<DiscreteLegendSymbolProps>>> | ReactNode | <DiscreteLegendSymbol /> |
style | CSS Styles.CSSProperties | |
className | CSS Class names.string | |
title | HTML Title Attribute.string | |
orientation | Orientation of the entry set internally by `DiscreteLegend`."horizontal" | "vertical" | horizontal |
onMouseEnter | Mouse enter event.(event: MouseEvent<HTMLDivElement, MouseEvent>) => void | |
onMouseLeave | Mouse leave event.(event: MouseEvent<HTMLDivElement, MouseEvent>) => void | |
onClick | On click event.(event: MouseEvent<HTMLDivElement, MouseEvent>) => void |
DiscreteLegendSymbol (opens in a new tab)
| Prop | Description | Default |
|---|---|---|
color | Color for the symbol set by the `DiscreteLegendEntry`.string | |
className | CSS Class names.string |
SequentialLegend (opens in a new tab)
| Prop | Description | Default |
|---|---|---|
className | CSS Class name.any | |
gradientClassName | CSS Class name for the gradient element.string | |
style | CSS Styles.any | |
orientation | Orientation of the legend."horizontal" | "vertical" | vertical |
data * | Data to use to render the scale.ChartDataShape[] | |
colorScheme | Color scheme for the scale.string[] | ['rgba(28, 107, 86, 0.5)', '#2da283'] |