View this page in the latest version of Appian. Bar Chart Component Share Share via LinkedIn Reddit Email Copy Link Print On This Page 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!barChartField( 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 horizontal bars. Use a bar chart to display several values at the same point in time. See also: Configure Charts Using Records 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", "MIDNIGHT", "OCEAN", "MOSS", "BERRY", "PARACHUTE", "RAINFOREST" (default), "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(). Refresh Always refreshAlways Boolean When true, chart data will be refreshed after each user interaction and each interval refresh. Default: false. Refresh After refreshAfter List of Text String Refreshes chart data each time a specified event completes. Valid values: "RECORD_ACTION". Refresh After an Interval of Time refreshInterval Number (Decimal) How often chart data gets refreshed in minutes. When null, chart data will not be refreshed on an interval. Valid values: "0.5", "1", "2", "3", "4", "5", "10", "30", and "60". Refresh on Reference Variable Change refreshOnReferencedVarChange 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 refreshOnVarChange. Default: true. Refresh on Variable Change refreshOnVarChange 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. refreshOnVarChange: local!var1) or a list of variables (e.g. refreshOnVarChange: {local!var1, local!var2}). Configuration There are two ways to configure a bar chart: Set a record type as the data source and define fields to display on the chart. Perform your own query and define lists of data within the categories and series. 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. 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 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. Using categories and series When using categories and series, you must provide the list of data labels and values directly to these parameters. 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. 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. Use a!chartSeries() to create the Chart Series array. 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. Series and stacking 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. Usage considerations Chart data and stacking If data values are small and less than a whole number, Appian recommends settings allowDecimalAxisLabels to true. 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%. Charts height and background color 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. 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 SAIL Design System for best practices on using charts with background colors. Chart refresh behavior You can define 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. When you use a record type as the source of your chart, it's recommended to use the refresh parameters in the chart instead of using local variables and the a!refreshVariable() function. This is because the refresh behavior will automatically apply to the fields specified in the data parameter of the chart. If you're not using a record type as the source of your chart, use local variables and the a!refreshVariable() function to define refresh behavior since you won't use the data parameter to configure your chart. Using charts in portals 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. Examples 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. Single series bar chart with label, y-axis title, and no legend Use the interactive editor below to test out your code: Multiple series bar chart with label, y-axis title, and no stacking Use the interactive editor below to test out your code: Multiple series bar chart with label, y-axis title, and stacking 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 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. Old versions There are older versions of this interface component. You can identify older versions by looking at the name to see if there is a version suffix. If you are using an old version, be sure to refer to the corresponding documentation from the list below. Old Versions Reason for Update a!barChartField_21r4 Fixed existing behavior in stacked bar charts so that the values in the stacked bars display in the same order as the items in the legend. To learn more about how Appian handles this kind of versioning, see the Function and Component Versions page. Related Patterns The following patterns include usage of the Bar Chart Component. Aggregate Data on a Date or Date and Time Field (Reports, Query Data, Grids, Records): Aggregate data, specifically the total number of employees by date. Aggregate Data using a Filter and Display in a Chart (Reports, Charts, Query Data, Filtering, Records): Aggregate data, specifically the total number of employees for each title in the Engineering department, to display in a bar chart. 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. Sales by Region (Records, Reports, Charts): This pattern illustrates how to create a bar chart that shows sales per sales region. 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 Was this page helpful? SHARE FEEDBACK Loading...