Legend
The Legend component is used to associate a label to a color and a value that can be found in a chart.
You can use the FilterableLegend component to show multiple dimensions, or just utilise the SlabStat component to display a single dimension or total.
Legend colors should match the related chart
The color used in each Legend Block should match each of their respective colors within the related chart. This is often a line within a chart-time or perhaps the color proportion blocks within the chart-ordinal
Legends live above visualisations
When using a Legend alongside a chart, it should always be located directly above the chart to avoid confusion or the user having to scroll to gain context.
Total stat should always be first in a row
The FilterableLegend should always show the total as the first block and then each subsequent block will contain a single dimension from the chart below.
By passsing the onAddFilter and onRemoveFilter props the FilterableLegend component will expose UI on hover to add and remove filters.
If you are fetching data asynchronously you can use the loading prop to show an empty state version of the legend.
Sometimes you may just want to visualise a single value, examples of this are the charts in the the Overview page. For those instances you can use the SlabStat component.
This gives you a much simpler API to show data, you are just expected to pass a title and a stat value.
If you are fetching data asynchronously with SlabStat's you can use the SkeletonBlock component to show an empty state version of the SlabStat. This component is used internally when using FilterableLegend's loading prop
- Design
- Implementation
TODO - Design
Product Usage
- Dashboard
- Teams
- Radar