Legend
The key to a drawing: a small colour mark per name, so people can read what each colour means.
Master
Switch the direction, shape, size and place. With the switch on, each key is a button: press one to drop that series, press it again to bring it back.
Usage
Use Legend as the key to anything drawn in the chart colours. The kit charts already draw one inside, so reach for it on its own when the key sits somewhere else: over a group of charts that share their colours, beside a map, or under a colour-coded bar. It is one component: pass items. orientation runs the keys across or down, shape picks a square, a line or a dot, and value writes a number after each name. With onHiddenChange the keys become buttons that switch a series off, and it tells you which are off so you can drop them from your data. See contracts/legend.json for the full contract.
Do's
- One key for several charts that share their colours.
- The key to something the kit charts do not draw, like a map or a colour-coded bar.
- Letting people switch a series off.
Don'ts
- Do not add a second legend under a kit chart; the chart draws its own. Use showLegend and legendPosition to place it.
- Do not use it as a list of filters or tags. Use Badge or FilterButton.
- Do not write the colour yourself; pick an intent.
- Do not use raw hex.
<Legend orientation="horizontal" alignment="center" shape="square" size="md" />