Description
Charts are a great way to visually communicate complex numerical data. They help users quickly identify trends, make comparisons, and track the progress of their business critical data.
Because charts are typically one of the first things a user sees after logging in, they play a key role in delivering a smooth and consistent experience across our apps and modules. By intentionally using the brand-approved color palette, the charts reinforce trust and credibility, helping users feel confident that the information they’re viewing is accurate.
Our chart components are generally built with pre-existing development plugins such as Nivo (used on Sage Home). Developers must ensure consistency across apps by consuming our Sage color tokens within those plugins.
Data
Ordinal data: Data that can be classified into categories with a meaningful order or ranking. For example, outstanding invoices ordered by number of days overdue.
Nominal Data: Data that can be classified into distinct categories but has no natural order or ranking. For example, region or product.
Types
We currently support 3 types of charts. As more use cases emerge, more types may be added.
Bar chart (vertical)
Bar charts use data markers to compare either ordinal or nominal data.
They are especially useful for:
- highlighting large variations in data
- showing how individual data points relate to the whole
- making comparisons
- presenting rankings
Fusion currently supports a maximum of 12 vertical bar charts as these tend to work better with responsive layouts.
Bar Chart
Bar chart density
Bar chart components use automatically adjustable bar widths to preserve readability as the amount of data changes. As more bars are added, the spacing between them is reduced proportionally and vice versa. Because of that, designers should not manually adjust bar widths.
The system currently supports a maximum of 12 bars per chart.
Bar chart with 3 bars
Bar chart with 8 bars
Bar chart with 12 bars
Line chart
Line charts are great for representing:
- data changes over time, as they clearly visualize trends
- minor variations in data that might not be obvious on a bar chart
Currently, our line chart component only supports 4 lines, with 2 degrees of emphasis – solid and dashed. However, we may support more in the future after usability research is complete.
Line chart with a positive trend
Line chart with a negative trend
Line chart with a flat trend
Line chart with an exponential growth trend
Donut chart
Donut charts show how partial elements compare to a whole.
Use cases include:
- Revenue by product category
- Budget breakdowns
Donut chart with legend
Variations
Bar and donut charts support 12 separate colors, each with 3 degrees of emphasis.
Emphasis
- Solid fill: High emphasis.
- Can be use to highlight something critical that the user should action immediately.
- For example, invoices that have been overdue for a very long time (60+ days).
- Pattern fill: Medium emphasis.
- Can be used to highlight something important that the user may want to action.
- For example, invoices that are overdue by a few days.
- Light fill: Low emphasis.
- Can be used to highlight something that the user should be aware of but does not require action.
- For example, invoices that are close to their due date.
- Use a combination of appropriate semantic colors and neutral colors to provide visual contrast and emphasis.
- Do not use color alone to convey meaning.
- Use colors with appropriate fills to meaningfully differentiate categories.
- Always start a bar chart Y-axis (vertical) at a baseline of 0 (zero).
- A baseline that isn’t zero can cause the data to be misunderstood by users.
- Make sure there's enough white space within your chart. This makes the data easier to digest and interpret.
- Do not override the bar radius in a bar chart.
- The standard radius is deliberately small so that users can more precisely gauge a bar's length.
Line chart emphasis options
Color
Slate
Green
Orange
Fuchsia
Red
Pink
Gold
Lime
Teal
Blue
Navy
Purple
States
Component-specific states
To make our charts as accessible as possible for all users, we support focus and hover states. Both states reveal more granular data to users, including timestamps.
Line chart - single
Line chart - multiple
Bar Chart in focus
Best practices
Examples
Chart examples in mobile