Status
The status of the component
Documentation in progress
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
-
Best Practices
- Do not allow stacked area values to overlap. If they do, use a line chart instead.
- The x-axis should be time-based.
- Choose an appropriate time period that contains reference points to add perspective to the data.
- Limit the number of categories. You should use no more than 4.
- Use categorical colors.
- Keep lines sharp. Do not smooth lines to make them more aesthetic. This can make the data misleading.
Usage Guidelines
Hover
On hover of a point, a tooltip appears anchored to the filled point. Other points along the same grid line are stroked. The grid line becomes dashed.
On hover of a grid line, an unanchored tooltip appears with information about each point along said grid line. The grid line becomes dashed.
On hover of a legend item, all other legend items as well as their corresponding areas reduce in opacity.
Drilldown
If drilldown is possible via click, the mouse turns to a finger instead, indicating clickability.
Focus
On focus, a focus ring encompasses the point with a corresponding tooltip.
Null Value
If the data returns a null value, it should be treated as a zero.
Responsiveness
Areas should resize horizontally and vertically as the chart grows or shrinks.
