import { Legend } from "nanoplot/Legend"The Legend component is used to display a legend for the graph. It can be used to display the names of the datasets and their respective colors.
Note
As with all child components of Graphs. Legend must be rendered top to bottom left to right in the JSX Tree based on what's being rendered.
<Graph data={...}>
<YAxis/>
<Lines/>
<Legend position={"top"}/>
</Graph>
Would be invalid as if Legend is position="top" then it must be placed before YAxis (rendered on the left) following top to bottom left to right. Same as how HTML renders
| Name | Description | Type | Required | Default |
position | Sets the position of the legend on the graph | "top" | "bottom" | "left" | "right" | No | "top" |
alignment | Sets the alignment of the legend | "center" | "start" | "end" | No | "center" |
| Snippet | Result |
<Legend position="top" alignment="center" /> | Legend is displayed at the top center of the graph |
<Legend position="bottom" alignment="start" /> | Legend is displayed at the bottom left of the graph |
<Legend position="left" alignment="end" /> | Legend is displayed on the left side, aligned to the end |