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. |
a!columnChartField( label, instructions, categories, series, xAxisTitle, yAxisTitle, yAxisMin, yAxisMax, stacking, referenceLines, showLegend, showDataLabels, showTooltips, allowDecimalAxisLabels, labelPosition, helpTooltip, accessibilityText, showWhen, colorScheme, height, xAxisStyle, yAxisStyle, data, config, refreshAlways, refreshAfter, refreshInterval, refreshOnReferencedVarChange, refreshOnVarChange )
Displays numerical data as vertical bars. Use a column chart to graphically display data that changes over time. If trend is more important than specific values, consider using a line chart.
See also:
Name | Keyword | Types | Description |
---|---|---|---|
Label |
|
Text |
Text to display as the field label. |
Instructions |
|
Text |
Supplemental text about this field. |
Categories |
|
List of Text String |
Text to display on the X-Axis next to each column. |
Series |
|
List of ColumnChartSeries |
Array of data series created with a!chartSeries(). |
X-Axis Title |
|
Text |
Title for the independent (horizontal) axis. |
Y-Axis Title |
|
Text |
Title for the dependent (vertical) axis. |
Min Y-Axis |
|
Number (Decimal) |
Determines the minimum displayed point on the vertical axis. |
Max Y-Axis |
|
Number (Decimal) |
Determines the maximum displayed point on the vertical axis. |
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: |
Reference Lines |
|
List of Variant |
Array of reference line values for each threshold to be defined on the chart. Configured using a!chartReferenceLine(). |
Show legend |
|
Boolean |
Determines if a color legend displays below the chart. Default: true. |
Show data labels |
|
Boolean |
Determines if data values are displayed on each column. Default: false. |
Show tooltips |
|
Boolean |
Determines if a tooltip displays the data value for a column. Default: true. |
Allow decimal axis labels |
|
Boolean |
Allows dependent (vertical) values to display as decimal numbers instead of integers. Default: false. |
Label Position |
|
Text |
Determines where the label appears. Valid values:
|
Help Tooltip |
|
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 |
Accessibility Text |
|
Text |
Additional text to be announced by screen readers. Used only for accessibility; produces no visible change. |
Visibility |
|
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 |
|
Any type |
Determines which color scheme to use in the chart. Use one of the following valid values: |
Height |
|
Text |
Determines the chart height. Valid values: |
X-Axis Style |
|
Text |
Determines how to display the labels and axis separators for the X-Axis. Valid values: |
Y-Axis Style |
|
Text |
Determines how to display the labels, axis separators, and grid lines for the Y-Axis. Valid values: |
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 |
|
ColumnChartConfig |
Configures how to display data on the chart, including fields used for calculations and grouping, using a!columnChartConfig(). |
Refresh Always |
|
Boolean |
When true, chart data will be refreshed after each user interaction and each interval refresh. Default: false. |
Refresh After |
|
List of Text String |
Refreshes chart data each time a specified event completes. Valid values: |
Refresh After an Interval of Time |
|
Number (Decimal) |
How often chart data gets refreshed in minutes. When null, chart data will not be refreshed on an interval. Valid values: |
Refresh on Reference Variable Change |
|
Boolean |
When true, chart data will be refreshed each time the value of any variable referenced in the data parameter is updated. To refresh chart data when another variable that is not used in the data parameter changes, use |
Refresh on Variable Change |
|
Any Type |
Refreshes chart data each time any of these specific variables change. This allows you to refresh the chart data when a variable that is not referenced in the data parameter is updated. You can define a single variable (e.g. r |
There are two ways to configure a column chart:
If you have a record type that uses a database as the source, or a record type with data sync enabled, we recommend using the record type as the source of your chart. This configuration is easier because Appian will perform the query for you and display the results directly in the chart.
If your record type uses a web service as the source and does not have data sync enabled, use the categories and series to construct the chart manually.
Configuring a column chart using a record type as the source requires using two parameters: data and config. Once you provide a 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. See Build Reports from Records for examples of reports created with different charts.
When using categories and series, you must provide the list of data labels and values directly to these parameters.
[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]
.true
, so user's know what each color represents. When you only have one series item, you can use the label or instructions fields to tell users what the data represents.[Series #]
with #
as the index number of the data value. For example, [Series 1]
.true
.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.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 label item appearing at the top of the set.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 series.label items determine the display order of the bar segments with the first series.label item appearing furthest from the axis."TALL"
, "MEDIUM"
or "SHORT"
will show a scroll bar if too many categories are provided. "MICRO"
charts will only show scroll bars on mobile devices; on a web browser, these charts will adjust to fit the size of the column.a!recordData
or a record type reference, the categories and series parameters are ignored.yAxisMax: 50
would set the maximum y-axis at 50%.a!refreshVariable
parameters directly in the chart without creating additional local variables. The only exception being refreshOnVarChange
, which refreshes the chart after a specific local variable has changed.In a portal, you can't use a record type as the data source for a chart. Instead, use the categories and series parameters to construct the chart manually. See Working with Data in Portals to learn how to query data in a portal.
The examples below demonstrate how to configure your charts using categories and series. For examples on using record data, see Chart Configuration Using Record Data.
Use the interactive editor below to test out your code:
Use the interactive editor below to test out your code:
Use the interactive editor below to test out your code:
Note: Column charts with more than 10 points of data in a series can cause performance issues on the Appian Android application.
Feature | Compatibility | Note |
---|---|---|
Portals | Compatible | |
Offline Mobile | Incompatible | |
Sync-Time Custom Record Fields | Incompatible | |
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 Column Chart Component.
Aggregate Data by Multiple Fields and Display in a Chart (Reports, Charts, Query Data, Records): Aggregate data by multiple fields and display it in a stacked column chart. In this pattern, we will calculate the total number of employees for each title in each department and display it in a stacked column chart.
Configure a Chart Drilldown to a Grid (Charts, Grids, Query Data, Records): Displays a column chart with aggregate data from a record type and conditionally shows a grid with filtered records when a user selects a column on the chart.
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.
Sales by Country and Currency (Records, Reports): This pattern illustrates how to create two different charts. One chart shows sales (calculated in US dollars) by country and the currency paid. The other shows sales by currency type, comparing the number of sales paid in US dollars versus the local currency.
Total Orders Compared to Orders Purchased with Promo Codes (Records, Reports, Charts): This pattern illustrates how to create a column chart that compares the number of total orders and the number of orders that had at least one item purchased with a promo code.
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.
Column Chart Component