Chart Series Component

Chart Series

Function: a!chartSeries()

Defines a series of data for a bar, column, line, or pie chart.

See also: Bar Chart, Column Chart, Line Chart, Pie Chart, UX Charts Best Practices

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 a!authorizationLink(), a!documentDownloadLink(), a!dynamicLink(), a!newsEntryLink(), a!processTaskLink(), a!recordLink(), a!reportLink(), a!startProcessLink(), a!submitLink(), a!userRecordLink(), and a!safeLink().

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.

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

a!chartseries() is always used within a chart component. Copy and paste an example into the INTERFACE DEFINITION in EXPRESSION MODE to see it displayed.

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

1
2
3
4
5
6
7
8
9
10
a!barChartField(
  categories: {"Baseball", "Hockey", "Soccer"},
  series: {
    a!chartSeries(label: "Points", data: {8.3, 3.02, 2.71})
  },
  colorScheme: "CLASSIC",
  yAxisTitle: "Average Point per Professional Game",
  showLegend: false,
  showDataLabels: true
)

Displays the following: screenshot of a bar chart with 3 bars

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
a!lineChartField(
  label: "Tempo Usage Trends",
  categories: {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"},
  series: {
    a!chartSeries(label: "IT", data: {92, 94, 93, 95, 96, 99, 98, 100, 99, 91, 98, 99}),
    a!chartSeries(label: "Human Services", data: {84, 83, 85, 86, 87, 89, 91, 90, 89, 83, 93, 95}),
    a!chartSeries(label: "Sales", data: {70, 63, 90, 72, 74, 74, 76, 89, 72, 65, 100, 85}),
    a!chartSeries(label: "Marketing", data: {80, 80, 80, 90, 90, 90, 90, 90, 90, 70, 90, 90})
  },
  colorScheme: a!colorSchemeCustom(
    colors: {
      "#c27ba0",
      "#93c47d",
      "#8e7cc3",
      "#ffd966",
    }
  ),
  xAxisTitle: "Month",
  yAxisTitle: "% Active",
  yAxisMax: 100,
  showLegend: true
)

Displays the following:

screenshot of a line chart with 4 lines

The following patterns include usage of the Chart Series Component.

Open in Github Built: Thu, Feb 23, 2023 (02:59:22 PM)

On This Page

FEEDBACK