Basic data visualization rules in widgets with charts are described in D3 chart.
Chart legend is a component that helps a user read the data presented on the chart.
Add legend to the chart if there are more than one dataset. If there is only one dataset on the chart, then don’t display the legend: in this case the purpose of the data should be clear from the chart context: chart title, description, etc.
Component consists of the following elements:
Optionally you can add the following to the LegendItem:
- Leading Icon
- Additional label
The recommended placement of the legend is the top left position above the chart.
Other placement options
In some cases, you can position the legend either below the chart on the left or to the right of the chart. Here are examples and some possible scenarios:
|Placement||Appearance example||Examples of cases|
|right||When the chart is compact and doesn't take up much space or when you want to display legend items in a list for value comparisons.|
|bottom||For instance, when there are multiple filters above the chart or when the chart adapts for smaller screens.|
Legend items can be either interactive or static. Use
Checkbox for interactive legend items and choose from a list of default SVG shapes (
Line) for static legend items. You can also set a custom shape if needed.
The colors of the checkboxes or shapes correspond to the data on the chart.
All legend items use
--text-primary token for color of the text label.
|Shape property||Appearance example|
Optional legend item elements
A legend item can include an icon, additional text, a counter, or a combination of these.
|Leading icon||Icon has M size and |
|Additional information||For additional information, use text with 14px size (|
|Counter||For a counter, use text with 14px size (|
Example of a combination of the elements above:
Trend and average value
To display the trend or average value in the legend, use the
withTrend property. It adds checkbox with Divider to separate trend from the main legend.
Hovering over a LegendItem can highlight the corresponding data on the chart by reducing the transparency of other data categories to 30%.
If some data is already disabled in the legend, it should remain disabled while hovering.
When all legend items are disabled, the chart should display the X-axis.