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
- Scatter charts are useful to show trends or outliers in your data set.
- Do not use a different color for each single dot. Use the categorical colors - one for each variable/set.
- Do not use shapes to represent dots.
Usage Guidelines
Hover
On hover of a dot, a tooltip appears anchored to the filled dot. The grid line becomes dashed.
On hover of a grid line, an unanchored tooltip appears with information about each dot along said grid line. The grid line becomes dashed. All dots become filled.
On hover of a legend item, all other legend items as well as their corresponding dots 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 dot with a corresponding tooltip.
Responsiveness
As the chart resizes, dots should remain the same size.
