Status
The status of the component
Ready for use!
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
Best Practices
- 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.
- Don’t use line types - dashes, dots, etc.
- Don’t use shapes as data points.
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 lines 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 series category, it should not be shown in the chart but still be shown in the legend.
If the data returns a null value for a point in a series category, it should be treated as a zero.
Double Y-Axis
In some cases, two y-axes may need to be included. If this is the case, a second y-axis should appear to the right of the chart.
Target Line
To show how data is trending against a benchmark, a target line can be added which appears above / to the front of all lines.
Responsiveness
Lines should resize horizontally and vertically as the chart grows or shrinks.
