Bar Chart Component

Bar Chart

Function: a!barChartField()

Displays numerical data as horizontal bars. Use a bar chart to display several values at the same point in time.

See also: Line Chart, Column Chart, Pie Chart, Chart Series, UX Charts Best Practices, Chart Color Schemes

Parameters

Name Keyword Types Description

Label

label

Text

Text to display as the field label.

Instructions

instructions

Text

Supplemental text about this field.

Categories

categories

Text Array

Text to display on the x-axis next to each bar.

Series

series

Chart Series Array

Array of data series created with a!chartSeries().

X-Axis Title

xAxisTitle

Text

Title for the independent (vertical) axis.

Y-Axis Title

yAxisTitle

Text

Title for the dependent (horizontal) axis.

Min Y-Axis

yAxisMin

Number (Decimal)

Determines the minimum displayed point on the horizontal axis.

Max Y-Axis

yAxisMax

Number (Decimal)

Determines the maximum displayed point on the horizontal axis.

Stacking

stacking

Text

Determines if series values display as separate bars, stacked within one bar to show the sum of series values, or stacked to a height of 100% to show the contribution to the whole within each category. Valid values: "NONE" (default), "NORMAL", "PERCENT_TO_TOTAL".

Reference Lines

referenceLines

Chart Reference Lines Array

Array of reference line values for each threshold to be defined on the chart. Configured using a!chartReferenceLine().

Show legend

showLegend

Boolean

Determines if a color legend displays below the chart. Default: true.

Show data labels

showDataLabels

Boolean

Determines if data values are displayed next to each bar. Default: false.

Show tooltips

showTooltips

Boolean

Determines if a tooltip displays the data value for a bar. Default: true.

Allow decimal axis labels

allowDecimalAxisLabels

Boolean

Allows dependent (horizontal) values to display as decimal numbers instead of integers. Default: false.

Label Position

labelPosition

Text

Determines where the label appears. Valid values:

  • "ABOVE" (default) Displays the label above the component.
  • "ADJACENT" Displays the label to the left of the component.
  • "COLLAPSED" Hides the label. The label will still be read by screen readers; see accessibility considerations for more information.
  • "JUSTIFIED" Aligns the label alongside the component starting at the edge of the page.

Help Tooltip

helpTooltip

Text

Displays a help icon with the specified text as a tooltip. The tooltip displays a maximum of 500 characters. The help icon does not show when the label position is "COLLAPSED".

Accessibility Text

accessibilityText

Text

Additional text to be announced by screen readers. Used only for accessibility; produces no visible change.

Visibility

showWhen

Boolean

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

Color scheme

colorScheme

Any type

Determines which color scheme to use in the chart. Use one of the following valid values: "CLASSIC" (default), "MIDNIGHT", "OCEAN", "MOSS", "BERRY", "PARACHUTE", "RAINFOREST", "SUNSET" or define a custom color scheme using a!colorSchemeCustom. See Chart Color Scheme for color scheme examples.

Height

height

Text

Determines the chart height. Valid values: "MICRO", "SHORT", "MEDIUM", "TALL", "AUTO" (default). See Chart Heights for guidance on using the MICRO size.

X-Axis Style

xAxisStyle

Text

Determines how to display the labels and axis separators for the X-Axis. Valid values: "STANDARD" (default), "NONE".

Y-Axis Style

yAxisStyle

Text

Determines how to display the labels, axis separators, and grid lines for the Y-Axis. Valid values: "STANDARD" (default), "MINIMAL", "NONE".

Data

data

Any type

Reference to the record type used for the source of this chart. Can accept a!recordData or a Record Type Reference.

Chart Configuration

config

BarChartConfig

Configures how to display data on the chart, including fields used for calculations and grouping, using a!barChartConfig().

Configuration

There are two ways to configure a bar chart:

  1. Set a record type as the data source and define fields to display on the chart.
  2. Perform your own query and define lists of data within the categories and series.

The chart allows using an entity-backed or synced record type as the source. If you have one of these record types available as a source, we recommend using the record type as the source. This configuration is easier because Appian will perform the query for you and display the results in the bar chart directly. If you have complex requirements or your data source is not a entity-backed or synced record type, use the categories and series to construct the chart manually.

Using Record Data

Configuring a bar chart using a record type as the source requires using two parameters: data and config. Once you provide a source record type in the data parameter and provide the fields in the config parameter, the chart displays the results.

See Chart Configuration Using Record Data for details on using a record type as the source.

Using Categories and Series

When using categories and series, you must provide the list of data labels and values directly to these parameters. See the notes below for guidance.

Categories

  • The order of items in the Categories array determines the display order of categories on the chart with the left-most item in the array appearing at the top of the x-axis. The x-axis is the vertical axis since the bar data displays horizontally.
  • For each null or empty item in the array passed to Categories, [Category #] displays on the x-axis with # as the index number in the Categories array of the null or empty item. For example, [Category 1].
  • The index of each item in the Categories array must match with the index of its Series data value. You can retrieve a dictionary from the data field of a query result, and then use a!chartSeries() to create the chart series array.

Series

  • A single Series item produces a bar for each Categories item with all bars the same color. The data parameter should contain a list of values that match the size of the list for categories.
  • Multiple Series items when Stacking is NONE or null produces a set of bars for each Categories item - one bar for each Series item with each bar in that set a different color. The order of the label items determine the display order of the columns in each set with the first bar displays furthest from the axis.
  • Multiple Series items when Stacking is NORMAL produces a single bar for each categories item with each Series item displayed as a different segment of the bar in a different color, so they appear stacked on top of each other. The order of the label items determine the display order of the bar segments with the first label item appearing closest to the axis.
  • Multiple Series items when Stacking is PERCENT_TO_TOTAL also shows a single bar for each category, but bars have a total height of 100%. Each value shows the percent contribution to the total within each category.
  • If the Series argument has a non-null label value paired with a 0, null, or empty data value, the data value still displays in the legend.
  • If the Series argument has a null or empty label value paired with a non-null data value, the label value displays as [Series #] with # as the index number of the data value. For example, [Series 1].
  • If a color is defined at the series level, it will show for the given scheme and move the color scheme colors to the next series.

Additional Notes

  • If data values are small and less than a whole number, Appian recommends settings allowDecimalAxisLabels to true.
  • When the "AUTO" height is used, the chart will show as Medium height with 20 or less categories. If more categories are provided, the chart will expand in height to ensure categories are not cut off.
  • If data contains a!recordData or a record type reference, the categories and series parameters are ignored.
  • The Percent to Total stacking will update the axes and tooltips to show with a percentage. Also, the minimum and maximum y-axes values refer to percentages. For example, yAxisMax: 50 would set the maximum y-axis at 50%.
  • When the chart is placed in a colored card, the chart background will match the color of the card. Text labels and lines in the chart will also adjust if a dark background color is used. See the UX Design Guide for best practices on using charts with background colors.

Examples

The examples below demonstrate how to configure your charts using categories and series. For examples on using record data, please see Chart Configuration Using Record Data. 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 three bars

Multiple Series Bar Chart with Label, Y-Axis Title, and No Stacking

1
2
3
4
5
6
7
8
9
10
11
a!barChartField(
  categories: {"Americas", "EMEA", "APAC"},
  series: {
    a!chartSeries(label: "Referrals", data: {19, 8, null}),
    a!chartSeries(label: "Existing Clients", data: {11, 16, 10}),
    a!chartSeries(label: "Tradeshow Attendees", data: {14, 12, 7})
  },
  yAxisTitle: "Active Opportunities",
  showLegend: true, 
  colorScheme: "CLASSIC"
)

Displays the following:

screenshot of bar chart with mutliple series

Multiple Series Bar Chart with Label, Y-Axis Title, and Stacking

1
2
3
4
5
6
7
8
9
10
11
12
a!barChartField(
  categories: {"Americas", "EMEA", "APAC"},
  series: {
    a!chartSeries(label: "Referrals", data: {19, 8, null}),
    a!chartSeries(label: "Existing Clients", data: {11, 16, 10}),
    a!chartSeries(label: "Tradeshow Attendees", data: {14, 12, 7})
  },
  colorScheme: "RAINFOREST",
  yAxisTitle: "Active Opportunities",
  stacking: "PERCENT_TO_TOTAL",
  showLegend: true
)

Displays the following:

screenshot of stacked bar chart with labels

See also: a!queryRecordType(), a!queryEntity(), Tempo Report Best Practices

The following patterns include usage of the Bar Chart Component.

Open in Github Built: Fri, Sep 17, 2021 (04:03:56 PM)

On This Page

FEEDBACK