Pie Chart Component

Pie Chart

Function: a!pieChartField()

Represents numerical data as slices of a single circle. Use a pie chart to graphically display parts of a whole.

See also: Column Chart, Bar Chart, Line Chart, Chart Series, UX Charts Best Practices, a!queryRecordType(), Tempo Report 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.

Series

series

List of PieChartSeries

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

Show data labels

showDataLabels

Boolean

Determines if data values are displayed with each pie slice. Default: false.

Show tooltips

showTooltips

Boolean

Determines if a tooltip displays the data value for a pie slice. Default: false.

Show as percentage

showAsPercentage

Boolean

Determines if the data is shown as a percentage. 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.

Style

style

Text

Determines if the chart displays as a full pie or as a donut. Valid values: "PIE" (default), "DONUT".

Series Label Style

seriesLabelStyle

Text

Determines where to display the series labels. Valid values: "ON_CHART" (default), "LEGEND", "NONE".

Height

height

Text

Determines the chart height. Valid values: "SHORT", "MEDIUM" (default), "TALL".

Series

  • The labels and data arguments in the Series are shown in the data labels and tooltips (if enabled).
  • If a Series has a non-null label value paired with a 0, null, or empty data value, the data value is treated as 0 and is still displayed if Show data labels is set to true. For example, Americas: 0.
  • If a Series argument has a null or empty label paired with a non-null data value, the label is displayed as [Series #] with # as the label's index number in the Series if Show data labels is set to true. For example, [Series 1]: 3.
  • If a Series argument has both a null or empty label paired with a 0, null, or empty data value, the above behaviors are combined and the following is displayed if Show data labels is set to true: [Series 1]: 0.

Notes

  • If the series label style is set to LEGEND and data labels are displayed, the data labels are shown in the legend in parentheses. For example, West Region (25%).
  • Using the LEGEND or NONE series label styles will ensure consistent sizing of the pie for any columns of the same width. When ON_CHART is used for the series label style, the pie changes size based on the length of the series label.
  • The ON_CHART style will usually use screen space more effectively than the LEGEND. Since showing the legend guarantees the same size pies across columns of the same width, there may be extra whitespace if a short label is used in the legend.
  • If the legend is displayed, it will show below the pie in MEDIUM width columns or narrower; in wider columns the legend will show adjacent to the chart. The legend always displays below the pie on phones.
  • If a data value is negative, the data label shows it as negative (for example -20), but it still displays as a pie slice. To avoid any confusion, negative values should only be used with bar, column, and line charts.
  • Since pie chart values do not have an x-axis for reference, Appian recommends setting Show data labels as true.
  • When values are shown as percentages, they are rounded to one decimal place. If values in the second decimal place are 5 or higher, the first decimal number is rounded up.

Examples

Copy and paste an example into the INTERFACE DEFINITION in EXPRESSION MODE to see it displayed.

Pie Chart with Label, Instructions, and Data Labels

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
a!pieChartField(
  label: "New Hires by Department",
  instructions: "The number of new employees hired by each department in 2019",
  series: {
    a!chartSeries(label: "Engineering", data: 12),
    a!chartSeries(label: "Professional Services", data:  9),  
    a!chartSeries(label: "Sales", data:  8), 
    a!chartSeries(label: "Finance", data:  6),
    a!chartSeries(label: "HR", data:  4)
  
  },
  colorScheme: "OCEAN",
  showDataLabels: true,
  showTooltips: true,
  showAsPercentage: false
)

Displays the following:

screenshot of a pie chart with 5 series and series labels

Pie Chart with Label, Instructions, Data Labels, Tooltips, and Percentage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
a!pieChartField(
  label: "Opportunity Sources",
  instructions: "Leads are calculated based on the initial mode of contact",
  series: {
    a!chartSeries(label: "Existing Client", data: 12),
    a!chartSeries(label: "Inbound Call",    data:  6),
    a!chartSeries(label: "Tradeshow",       data:  8),
    a!chartSeries(label: "Web Site",        data:  6),
    a!chartSeries(label: "Referral",        data:  7)
  },
  colorScheme: "MIDNIGHT",
  showDataLabels: true,
  showTooltips: true,
  showAsPercentage: true
)

Displays the following:

screenshot of a blue pie chart with 5 series, percentages, and series labels

Donut Style Chart with Legend and Colors Assigned in Series

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
a!pieChartField(
  label: "Employee Credential Status",
  labelPosition: "ABOVE",
  series: {
    a!chartSeries(label: "Active Credential", data: 1374, color: "BLUEGRAY"),
    a!chartSeries(label: "Expires within 30 Days", data: 343, color: "AMBER"),
    a!chartSeries(label: "Expired", data: 97, color: "RED")
  },
  height: "SHORT",
  seriesLabelStyle: "LEGEND",
  colorScheme: "CLASSIC",
  style: "DONUT",
  showDataLabels: true,
  showAsPercentage: true
)

Displays the following:

screenshot of a donut-style pie chart with a legend

The following patterns include usage of the Pie Chart Component.

Open in Github Built: Wed, Aug 17, 2022 (01:05:05 PM)

On This Page

FEEDBACK