Free cookie consent management tool by TermsFeed

Chart Series Component

SAIL Design System guidance available for Charts

Every chart should tell a story. What does yours say? Learn how to build rich reporting dashboards that provide users with visualizations of their data.

Function

a!chartSeries( label, data, links, color, showWhen )

Defines a series of data for a bar, column, line, area, or pie chart. This component is always used within a chart component.

Parameters

Name Keyword Types Description

Label

label

Text

Name that corresponds to the data value or data values to display in the legend.

Data

data

Decimal Array

Value displayed for the related series.label.

Links

links

Array of Links

Array of values that determine what occurs when a user clicks a data point in the chart. Create links with:

Color

color

Text

Overrides the auto-assignment of series color with a specific value. Valid values: Any valid hex color or "ACCENT", "BLUEGRAY", "GREEN", "GOLD", "ORANGE", "PURPLE", "RED", "SKYBLUE", "LIMEGREEN", "YELLOW", "AMBER", "PINK", "VIOLETRED".

Visibility

showWhen

Boolean

Determines whether the series is displayed on the interface. When set to false, the series is hidden and is not evaluated. Default: true.

Usage considerations

Chart series color

The color of chart series can be defined by an overall chart color scheme or it can be configured individually. If a user has selected or created a color scheme, they can swap out the color of any individual series.

Users can choose between the assigned color scheme color, the environment’s accent color, a color such as "SKYBLUE" or "BLUEGRAY", or a custom color defined by a hex code. Any series configurations will take precedence over the assigned color scheme colors.

Examples

To experiment with examples, copy and paste the expression into an interface object.

Single series bar chart with label, Y-axis title, and no legend

Use the interactive editor below to test out your code:

Multiple series line chart with label, X-axis title, Y-axis title, and legend

Use the interactive editor below to test out your code:

Feature compatibility

The table below lists this component's compatibility with various features in Appian.
Feature Compatibility Note
Portals Compatible
Offline Mobile Compatible
Sync-Time Custom Record Fields Compatible

Can be used to create a custom record field that only evaluates at sync time.

Real-Time Custom Record Fields Incompatible

Custom record fields that evaluate in real time must be configured using one or more Custom Field functions.

Process Reports Incompatible

Cannot be used to configure a process report.

Process Events Incompatible

Cannot be used to configure a process event node, such as a start event or timer event.

The following patterns include usage of the Chart Series Component.

  • Aggregate Data and Conditionally Display in a Chart or Grid (Reports, Charts, Query Data, Grids, Records): Aggregate data and conditionally display it in a pie chart or grid. In this pattern, we will calculate the total number of employees in each department and display it in a pie chart and a read-only grid. Then, we'll use a link field to conditionally display each component.

  • Configure a Chart to Grid Toggle (Charts, Grids): Display a column chart with a toggle to display an alternate grid view of the data.

  • Drilldown Report Pattern (Grids, Charts, Reports): The drilldown report pattern consists of a bar chart and column chart, which each drill down into a grid.

  • Filter the Data in a Grid Using a Chart (Charts, Grids, Filtering, Records): Display an interactive pie chart with selectable sections so that a user may filter the results in a grid.

  • KPI Patterns (Formatting): The Key Performance Indicator (KPI) patterns provide a common style and format for displaying important performance measures.

  • Refresh Until Asynchronous Action Completes (Auto-Refresh): Use a refresh interval to display the results of an asynchronous action automatically.

  • Trend-Over-Time Report (Charts, Reports): This report provides an attractive, interactive design for exploring different series of data over time.

  • Use a Filter to Adjust Chart Reference Lines (Filtering, Charts): Using a dropdown, filter the results of a data set while also adjusting a chart reference line.

  • Year-Over-Year Report (Charts, Reports, Formatting): This is a feature-rich, interactive report for sales and profits by products over select periods of time.

Feedback