Free cookie consent management tool by TermsFeed Charts [SAIL Design System: Components]

Charts


Introduction

There are a variety of chart types and configurations that can be used to build rich reporting dashboards that provide users with visualizations of their data.

ds-images/ux_pages/charts_dashboard.png

Chart types

Choosing a chart type

Every chart should tell a story. A common mistake in data visualization is to force a dataset into a specific chart type. To avoid this mistake, start by identifying values of interest and understanding what the user intends to do with the data. Then, decide what story the data should tell, and what information is important for the user to learn.

Finally, determine which chart type will be most effective for telling the story. Ask These questions to help determine the purpose of the chart:

Should the chart depict…

  • Individual parts that make up a whole? (e.g. number of customers per region)
  • Distribution of data? (e.g. average customer rating of products)
  • Trends over time? (e.g. monthly revenue over the last year)
  • Compare values across categories? (e.g. number of customers in each region yearly)

Pie charts

See the developer documentation for technical details about the pie chart component.

Pie charts are generally used to show proportional data and can help a user understand the contribution of parts to a whole. Pie charts should only be used to represent data that can be placed into distinct categories and should not consist of more than 5 slices. Always include data and category labels for the slices.

alttext

Use pie charts to show proportional data.

alttext

Don’t use multiple pie charts when comparing multiple sets of data. Instead of the above example, use a line chart with categories for each year so users can easily compare values.

alttext

Don’t use too many slices in a pie chart, as this will cause some labels to become hidden (like the red and light blue slices above). Try using broader categories or grouping those which have relatively small values into a single “Other” category.

Column charts

See the developer documentation for technical details about the column chart component.

Use column charts for direct comparison of data or to show data over time only when the number of time intervals is small. In addition, column charts are useful for displaying data with both positive and negative values.

alttext

Use column charts to compare values across time-based categories with a relatively small number of intervals.

alttext

A column chart is useful for displaying negative and positive values because the y-axis can display numbers below zero.

Bar charts

See the developer documentation for technical details about the bar chart component.

Use bar charts to compare values across categories that are not sequential or time-based. If labels are long or if there are many categories, a bar chart is more effective than a column chart because each label will have sufficient space regardless of the number of categories.

alttext

Use bar charts for categories with especially long labels.

Line charts

See the developer documentation for technical details about the line chart component.

Line charts are best used for comparing data over time and are effective at presenting many data points. They are also effective for displaying data in scenarios where the differences between data points are small because the y-axis automatically adjusts to fit the data.

Conventionally, the x-axis contains the categories of time, and y-axis contains the frequency of the measured data.

alttext

Line charts are useful for depicting time-based categories.

alttext

Charts with more than 5 lines are difficult to decipher. We recommend using a column chart for this scenario.

alttext

A line chart’s y-axis values are automatically scaled to fit the line chart, which increases the visibility of relatively small differences in data values.

alttext

Leave gaps in line charts to represent missing data.

Area charts

See the developer documentation for technical details about the area chart component.

Area and line charts are both used for comparing data over time, but call attention to different aspects of the data. Area charts emphasize volume or cumulative data progression while line charts focus on precise data points.

alttext

Use area charts without stacking to compare cumulative data over time.

alttext

Use “Normal” stacking (left) on area charts to compare how each category’s total value and trends compare to the others. Alternatively, if information about the trend is not necessary, use “Percent to total” stacking (right) to show the relative contribution of each category to the total.

alttext

Don't use area charts without stacking if one series of data is always greater than the other. In this example, it is not immediately obvious whether the series are stacked or overlapping. Instead, consider using a line chart, or applying “Normal” or “Percent to total” stacking behavior with added context.

alttext

Don’t use area charts if you have more than three series because overlapping areas make it difficult to associate each color with a specific category.

Scatter charts

See the developer documentation for technical details about the scatter chart component.

Use scatter charts to represent the relationship between two fields by plotting the fields' values on a two-dimensional plane.

Scatter charts depict large sets of data concisely and allow readers to find correlations and outliers.

alttext

Use a scatter chart when you want to compare two related variables. Add a secondary grouping to show grouped variables in the legend.

alttext

Include outliers. They are an important part of your dataset, even if they don't look like they belong. Only use data filters when narrowing the dataset as a whole, rather than removing individual data points.

alttext

Don't use scatter plots if you need to evaluate qualitative data (such as gender or pass/fail). For qualitative data, consider using another chart type such as a bar or pie chart. Scatter plots should be used with quantitative data (like age, income, or temperature).

Sort order

As with all displays of aggregate data, the sort order should be meaningful and obvious to the user. Always sort chart data by magnitude or by sequential categories, such as time.

Sorting by magnitude

Pie chart and bar chart

In most scenarios, it is best to sort pie and bar chart data values in descending order to emphasize the largest value in a data set and make it easier for users to compare the relative sizes of slices and bars.

alttext

Pie charts sorted in descending order make it easier to quickly compare and identify the relative size of slices.

alttext

A bar chart sorted in descending order will draw attention to the largest category.

Column chart

Sort column chart data in ascending order to emphasize the largest value in a data set.

alttext

A column chart sorted in ascending order will draw attention to the largest column.

Sorting by category

Column chart and line chart

Use a sequential sort order if categories are related to time (e.g. sorting by year).

alttext

A column chart sorted by time is appropriate for displaying time-based categories.

Height

Choose chart heights based on the amount of data displayed and the chart’s relationship to other page content. For example, tall charts can be used to visualize complex datasets, whereas short charts may be more appropriate for displaying simpler datasets. See the Chart Height reference page for more information on how to implement chart heights.

Visual balance

alttext

Use chart heights that are proportional to surrounding content.

alttext

Use an appropriate height to maintain visual balance and restrict the overall column from being too tall in comparison to the rest of the interface. In this example, a “Short” height is used to restrict the column from being significantly taller than the rest of the content on the page.

alttext

Don’t place a chart in a card layout that is too short for the chart to fit in.

alttext

Don’t use mismatched heights for charts placed side-by-side if it results in large areas of unused whitespace.

Height proportional to size of data

alttext

Don’t use a short height for charts with data that users are intended to interact with. Instead, use a taller height to provide ample screen space for the visualization and larger click targets for users to drill down into specific data points.

alttext

When there are too many categories to display within a fixed height, the chart will automatically hide some of categories. Instead, use “Auto” so the chart height can grow and shrink according to the number of categories in the dataset.

Adapting charts to shorter heights

alttext

When using a micro height, the axes can be hidden to reserve more space for the data and legend.

alttext

Don’t use a micro height to display extensive data or labels.

Colors

Colors can be used to enhance chart readability or reflect an organization's branding. Color schemes can be applied to charts to show meaningful associations between the colors and the data they represent. A full list of out of the box color scheme options can be found in the Chart Color Scheme reference page.

alttext

Don’t use more than 5 colors in a single chart. The more colors there are, the more difficult it is to differentiate between colors. Instead, consider combining multiple small categories into a single “Other” category.

Consistent colors

alttext

Don’t use multiple color schemes in a single interface because it can be distracting.

Colors to represent data values

alttext

Use gradient color schemes on sorted pie charts to reflect the relative size of the slices, where darker colors represent larger slices and lighter colors represent smaller slices.

alttext

A column chart sorted by category with a gradient color scheme shows a clear association between the colors and the values they represent.

Colors for distinct categories

alttext

Use contrasting colors to depict contrasting categories.

alttext

Use a bright, primary color to direct the user’s eye to the most important value or value set in a chart, and a muted color to deemphasize other, less important values.

alttext

Colors can be applied to individual series of data to highlight key elements in the chart. Consider the connotation of the color you choose (e.g Red implies a negative status, like “Critical”).

alttext

Gradient color schemes should not be used for line charts with multiple lines, as the similar colors are difficult for users to map to each category. Instead, try using a color scheme that has distinct variations in color.

Background colors

As of Appian 20.4, charts no longer have a white background color. Keep this in mind as you decide where to place your charts.

alttext

When using a transparent background color with header-content layout, place charts within card layouts.

alttext

Don’t show charts on different colored backgrounds.

alttext

Brightly colored backgrounds tend to look unprofessional and distract from the chart contents.

Text

Labels, legends, and tooltips

Axis labels and legends are used to provide context and help users interpret chart data more accurately. However, they can be removed depending on the purpose of the chart and how much space is available. Keep in mind that additional contextual information might need to be provided if certain elements of the chart are hidden.

alttext

Don’t use column charts when x-axis labels are long, especially if label text is truncated or rotated. Use a bar chart instead to allow more space for labels.

alttext

When hiding the axes, do not leave the series and category labels undefined, because they provide contextual information in the tooltip.

alttext

Hiding axes can enhance a visualization by reducing the amount of clutter. However, when doing so it is important to provide additional context to ensure readability like the products list does in this example.

alttext

Although tooltips are enabled, don’t hide the axes and labels if there is enough space to display them. The labels enable users to easily understand the information on the chart.

alttext

When there are too many categories, use broader category labels or group those which have relatively small values into a single “Other” category.

alttext

Don’t include a legend when there is only one data series. Instead, try using a descriptive title to indicate the data that is plotted.

alttext

Don’t show the series label on the chart when multiple pie charts are displayed in a row or column, as it can result in inconsistent sizing across charts. Instead, use a legend to display the labels.