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
- Include a zero baseline.
- Use increments that are easy to follow and understand.
- Do not use multiple colors for columns. Only use the categorical data visualization palette.
- Do not use effects like shadows or patterns on the columns as this can be distracting and cause the data to be misleading.
Usage Guidelines
Hover
On hover of a single column, all other columns reduce in opacity. A tooltip follows the hovering mouse.
Drilldown
If drilldown is possible via click, the mouse turns to a finger instead, indicating clickability.
Focus
On focus, a focus ring encompasses the column with a corresponding tooltip.
Null Value
If the data returns a null value, it should be treated as a zero and no column will be shown.
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 columns.
Responsiveness
The max distance between columns shouldn’t exceed the width of the columns themselves.
Once the distance between columns is about to exceed the width of the columns, the width of the columns should increase up to a max width of 64px.
Multi-Column
Column charts with multiple datasets follow many of the same behaviors (ie. Drilldown, focus, null value, responsiveness) as those with a single dataset but they have a slightly different hover behavior whereby hovering on a single column reduces the opacity of all other columns (across all datasets) and hovering on a series label reduces the opacity of all columns not in that series.
