Line Chart Component (a!lineChartField)

Charts

Line Chart Component

Line Chart

Function: a!lineChartField()

Displays a series of numerical data as points connected by lines. Use a line chart to visualize trends of data that changes over time. This component can display thousands of data points without scrolling.

Users can easily find trends in their data by zooming in to a selected area to see additional details. See Display Date and Time Fields in a Line Chart example below.

When the chart shows date or date and time fields, the x-axis labels are formatted to match the end user's time zone and conveniently resize to avoid clutter.

If specific values are more important than the trend, consider using a column chart.

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`	List of Variant	Text, Date, or Date and Time array to display on the x-axis below each data point. If you are using an array of Date or Date and Time, make sure the data is sorted prior to using it as a category.
Series	`series`	List of LineChartSeries	Array of data series created with a!chartSeries().
X-Axis Title	`xAxisTitle`	Text	Title for the independent (horizontal) axis.
Y-Axis Title	`yAxisTitle`	Text	Title for the dependent (vertical) axis.
Min Y-Axis	`yAxisMin`	Number (Decimal)	Determines the minimum displayed point on the vertical axis.
Max Y-Axis	`yAxisMax`	Number (Decimal)	Determines the maximum displayed point on the vertical axis.
Reference Lines	`referenceLines`	List of Variant	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 data point. Default: false.
Show tooltips	`showTooltips`	Boolean	Determines if a tooltip displays the data value for each data point. Default: true.
Allow decimal axis labels	`allowDecimalAxisLabels`	Boolean	Allows dependent (vertical) 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"`.
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.
Connect Null Data Points	`connectNulls`	Boolean	Determines whether to connect a graph line across null points, or render a gap between the two points on either side of the null. Default: false.
Accessibility Text	`accessibilityText`	Text	Additional text to be announced by screen readers. Used only for accessibility; produces no visible change.
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"` (default), `"TALL"`. 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`	LineChartConfig	Configures how to display data on the chart, including fields used for calculations and grouping, using a!lineChartConfig().

Configuration

There are two ways to configure a line 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.

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 line 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.

Series

A single Series item produces a single line with line points for each Categories item. Multiple Series items produce multiple lines with one line for each series label item displayed in a distinct color and line points for each Categories item with a different data marker shape (for example, square, circle, diamond) for each line.
If a series data value is greater than the Y-Axis Max value or less than the Y-Axis Min value, the line continues off the chart, but the line point does not display.
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].

Additional Notes

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.
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 Line Chart with Label and Instructions

a!lineChartField(
  label: "Annual Conference Registrants",
  instructions: "The number of registrations received for the annual conference each month.",
  categories: {"Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb"},
  series: {
    a!chartSeries(label: "Sales", data: {72, 91, 93, 95, 92, 99, 98, 99, 79, 83, 90, 99})
  }
)

Displays the following:

screenshot of a line chart with a single series

Display Date and Time Fields in a Line Chart

a!localVariables(
/* ~~~ Open vs. Closed Cases ~~~ /
/ Query for the count of Closed cases, aggregating by the date they were closed on. */
local!resolvedByDate: a!dataSubset(
data: {
{created_on: datetime(2019, 1, 1, 0, 0, 0, 0), id_count: 50},
{created_on: datetime(2019, 1, 2, 0, 0, 0, 0), id_count: 55},
{created_on: datetime(2019, 1, 3, 0, 0, 0, 0), id_count: 52},
{created_on: datetime(2019, 1, 4, 0, 0, 0, 0), id_count: 50},
{created_on: datetime(2019, 1, 5, 0, 0, 0, 0), id_count: 55},
{created_on: datetime(2019, 1, 6, 0, 0, 0, 0), id_count: 56},
{created_on: datetime(2019, 1, 7, 0, 0, 0, 0), id_count: 58},
{created_on: datetime(2019, 1, 8, 0, 0, 0, 0), id_count: 52},
{created_on: datetime(2019, 1, 9, 0, 0, 0, 0), id_count: 60},
{created_on: datetime(2019, 1, 10, 0, 0, 0, 0), id_count: 65},
{created_on: datetime(2019, 1, 11, 0, 0, 0, 0), id_count: 66},
{created_on: datetime(2019, 1, 12, 0, 0, 0, 0), id_count: 67},
{created_on: datetime(2019, 1, 13, 0, 0, 0, 0), id_count: 70},
{created_on: datetime(2019, 1, 14, 0, 0, 0, 0), id_count: 72},
{created_on: datetime(2019, 1, 15, 0, 0, 0, 0), id_count: 69},
{created_on: datetime(2019, 1, 16, 0, 0, 0, 0), id_count: 75},
{created_on: datetime(2019, 1, 17, 0, 0, 0, 0), id_count: 73},
{created_on: datetime(2019, 1, 18, 0, 0, 0, 0), id_count: 77},
{created_on: datetime(2019, 1, 19, 0, 0, 0, 0), id_count: 80},
{created_on: datetime(2019, 1, 20, 0, 0, 0, 0), id_count: 76},
{created_on: datetime(2019, 1, 21, 0, 0, 0, 0), id_count: 78},
{created_on: datetime(2019, 1, 22, 0, 0, 0, 0), id_count: 80},
{created_on: datetime(2019, 1, 23, 0, 0, 0, 0), id_count: 77},
{created_on: datetime(2019, 1, 24, 0, 0, 0, 0), id_count: 75},
{created_on: datetime(2019, 1, 25, 0, 0, 0, 0), id_count: 80},
{created_on: datetime(2019, 1, 26, 0, 0, 0, 0), id_count: 83},
{created_on: datetime(2019, 1, 27, 0, 0, 0, 0), id_count: 86},
{created_on: datetime(2019, 1, 28, 0, 0, 0, 0), id_count: 83},
{created_on: datetime(2019, 1, 29, 0, 0, 0, 0), id_count: 88},
{created_on: datetime(2019, 1, 30, 0, 0, 0, 0), id_count: 90},
{created_on: datetime(2019, 1, 31, 0, 0, 0, 0), id_count: 94},
{created_on: datetime(2019, 2, 1, 0, 0, 0, 0), id_count: 93},
{created_on: datetime(2019, 2, 2, 0, 0, 0, 0), id_count: 100},
{created_on: datetime(2019, 2, 3, 0, 0, 0, 0), id_count: 99},
{created_on: datetime(2019, 2, 4, 0, 0, 0, 0), id_count: 105},
{created_on: datetime(2019, 2, 5, 0, 0, 0, 0), id_count: 106},
{created_on: datetime(2019, 2, 6, 0, 0, 0, 0), id_count: 108},
{created_on: datetime(2019, 2, 7, 0, 0, 0, 0), id_count: 105},
{created_on: datetime(2019, 2, 8, 0, 0, 0, 0), id_count: 104},
{created_on: datetime(2019, 2, 9, 0, 0, 0, 0), id_count: 109},
{created_on: datetime(2019, 2, 10, 0, 0, 0, 0), id_count: 108},
{created_on: datetime(2019, 2, 11, 0, 0, 0, 0), id_count: 111},
{created_on: datetime(2019, 2, 12, 0, 0, 0, 0), id_count: 115},
{created_on: datetime(2019, 2, 13, 0, 0, 0, 0), id_count: 112},
{created_on: datetime(2019, 2, 14, 0, 0, 0, 0), id_count: 118},
{created_on: datetime(2019, 2, 15, 0, 0, 0, 0), id_count: 119},
{created_on: datetime(2019, 2, 16, 0, 0, 0, 0), id_count: 117},
{created_on: datetime(2019, 2, 17, 0, 0, 0, 0), id_count: 120},
{created_on: datetime(2019, 2, 18, 0, 0, 0, 0), id_count: 122},
{created_on: datetime(2019, 2, 19, 0, 0, 0, 0), id_count: 124},
{created_on: datetime(2019, 2, 20, 0, 0, 0, 0), id_count: 123},
{created_on: datetime(2019, 2, 21, 0, 0, 0, 0), id_count: 125},
{created_on: datetime(2019, 2, 22, 0, 0, 0, 0), id_count: 25},
{created_on: datetime(2019, 2, 23, 0, 0, 0, 0), id_count: 127},
{created_on: datetime(2019, 2, 24, 0, 0, 0, 0), id_count: 126},
{created_on: datetime(2019, 2, 25, 0, 0, 0, 0), id_count: 129},
{created_on: datetime(2019, 2, 26, 0, 0, 0, 0), id_count: 130},
{created_on: datetime(2019, 2, 27, 0, 0, 0, 0), id_count: 128},
{created_on: datetime(2019, 2, 28, 0, 0, 0, 0), id_count: 131},
{created_on: datetime(2019, 3, 1, 0, 0, 0, 0), id_count: 135},
{created_on: datetime(2019, 3, 2, 0, 0, 0, 0), id_count: 132},
{created_on: datetime(2019, 3, 3, 0, 0, 0, 0), id_count: 136},
{created_on: datetime(2019, 3, 4, 0, 0, 0, 0), id_count: 138},
{created_on: datetime(2019, 3, 5, 0, 0, 0, 0), id_count: 134},
{created_on: datetime(2019, 3, 6, 0, 0, 0, 0), id_count: 137},
{created_on: datetime(2019, 3, 7, 0, 0, 0, 0), id_count: 135},
{created_on: datetime(2019, 3, 8, 0, 0, 0, 0), id_count: 137},
{created_on: datetime(2019, 3, 9, 0, 0, 0, 0), id_count: 135},
{created_on: datetime(2019, 3, 10, 0, 0, 0, 0), id_count: 138},
{created_on: datetime(2019, 3, 11, 0, 0, 0, 0), id_count: 137},
{created_on: datetime(2019, 3, 12, 0, 0, 0, 0), id_count: 139},
{created_on: datetime(2019, 3, 13, 0, 0, 0, 0), id_count: 140},
{created_on: datetime(2019, 3, 14, 0, 0, 0, 0), id_count: 136},
{created_on: datetime(2019, 3, 15, 0, 0, 0, 0), id_count: 142},
{created_on: datetime(2019, 3, 16, 0, 0, 0, 0), id_count: 146},
{created_on: datetime(2019, 3, 17, 0, 0, 0, 0), id_count: 144},
{created_on: datetime(2019, 3, 18, 0, 0, 0, 0), id_count: 146},
{created_on: datetime(2019, 3, 19, 0, 0, 0, 0), id_count: 150},
{created_on: datetime(2019, 3, 20, 0, 0, 0, 0), id_count: 146},
{created_on: datetime(2019, 3, 21, 0, 0, 0, 0), id_count: 146},
{created_on: datetime(2019, 3, 22, 0, 0, 0, 0), id_count: 148},
{created_on: datetime(2019, 3, 23, 0, 0, 0, 0), id_count: 145},
{created_on: datetime(2019, 3, 24, 0, 0, 0, 0), id_count: 147},
{created_on: datetime(2019, 3, 25, 0, 0, 0, 0), id_count: 145}
}
),

/* Query for the count of Open cases, aggregating by the date they were created on. */
local!openByDate: a!dataSubset(
data: {
{created_on: datetime(2019, 1, 1, 0, 0, 0, 0), id_count: 220},
{created_on: datetime(2019, 1, 2, 0, 0, 0, 0), id_count: 220},
{created_on: datetime(2019, 1, 3, 0, 0, 0, 0), id_count: 221},
{created_on: datetime(2019, 1, 4, 0, 0, 0, 0), id_count: 224},
{created_on: datetime(2019, 1, 5, 0, 0, 0, 0), id_count: 225},
{created_on: datetime(2019, 1, 6, 0, 0, 0, 0), id_count: 227},
{created_on: datetime(2019, 1, 7, 0, 0, 0, 0), id_count: 229},
{created_on: datetime(2019, 1, 8, 0, 0, 0, 0), id_count: 233},
{created_on: datetime(2019, 1, 9, 0, 0, 0, 0), id_count: 229},
{created_on: datetime(2019, 1, 10, 0, 0, 0, 0), id_count: 231},
{created_on: datetime(2019, 1, 11, 0, 0, 0, 0), id_count: 229},
{created_on: datetime(2019, 1, 12, 0, 0, 0, 0), id_count: 222},
{created_on: datetime(2019, 1, 13, 0, 0, 0, 0), id_count: 224},
{created_on: datetime(2019, 1, 14, 0, 0, 0, 0), id_count: 222},
{created_on: datetime(2019, 1, 15, 0, 0, 0, 0), id_count: 218},
{created_on: datetime(2019, 1, 16, 0, 0, 0, 0), id_count: 223},
{created_on: datetime(2019, 1, 17, 0, 0, 0, 0), id_count: 220},
{created_on: datetime(2019, 1, 18, 0, 0, 0, 0), id_count: 216},
{created_on: datetime(2019, 1, 19, 0, 0, 0, 0), id_count: 217},
{created_on: datetime(2019, 1, 20, 0, 0, 0, 0), id_count: 215},
{created_on: datetime(2019, 1, 21, 0, 0, 0, 0), id_count: 212},
{created_on: datetime(2019, 1, 22, 0, 0, 0, 0), id_count: 210},
{created_on: datetime(2019, 1, 23, 0, 0, 0, 0), id_count: 215},
{created_on: datetime(2019, 1, 24, 0, 0, 0, 0), id_count: 218},
{created_on: datetime(2019, 1, 25, 0, 0, 0, 0), id_count: 220},
{created_on: datetime(2019, 1, 26, 0, 0, 0, 0), id_count: 211},
{created_on: datetime(2019, 1, 27, 0, 0, 0, 0), id_count: 219},
{created_on: datetime(2019, 1, 28, 0, 0, 0, 0), id_count:205},
{created_on: datetime(2019, 1, 29, 0, 0, 0, 0), id_count:229},
{created_on: datetime(2019, 1, 30, 0, 0, 0, 0), id_count:218},
{created_on: datetime(2019, 1, 31, 0, 0, 0, 0), id_count:221},
{created_on: datetime(2019, 2, 1, 0, 0, 0, 0), id_count: 219},
{created_on: datetime(2019, 2, 2, 0, 0, 0, 0), id_count: 218},
{created_on: datetime(2019, 2, 3, 0, 0, 0, 0), id_count: 211},
{created_on: datetime(2019, 2, 4, 0, 0, 0, 0), id_count: 216},
{created_on: datetime(2019, 2, 5, 0, 0, 0, 0), id_count: 218},
{created_on: datetime(2019, 2, 6, 0, 0, 0, 0), id_count: 220},
{created_on: datetime(2019, 2, 7, 0, 0, 0, 0), id_count: 219},
{created_on: datetime(2019, 2, 8, 0, 0, 0, 0), id_count: 217},
{created_on: datetime(2019, 2, 9, 0, 0, 0, 0), id_count: 215},
{created_on: datetime(2019, 2, 10, 0, 0, 0, 0), id_count: 211},
{created_on: datetime(2019, 2, 11, 0, 0, 0, 0), id_count: 206},
{created_on: datetime(2019, 2, 12, 0, 0, 0, 0), id_count: 211},
{created_on: datetime(2019, 2, 13, 0, 0, 0, 0), id_count: 209},
{created_on: datetime(2019, 2, 14, 0, 0, 0, 0), id_count: 210},
{created_on: datetime(2019, 2, 15, 0, 0, 0, 0), id_count: 207},
{created_on: datetime(2019, 2, 16, 0, 0, 0, 0), id_count: 205},
{created_on: datetime(2019, 2, 17, 0, 0, 0, 0), id_count: 216},
{created_on: datetime(2019, 2, 18, 0, 0, 0, 0), id_count: 211},
{created_on: datetime(2019, 2, 19, 0, 0, 0, 0), id_count: 214},
{created_on: datetime(2019, 2, 20, 0, 0, 0, 0), id_count: 210},
{created_on: datetime(2019, 2, 21, 0, 0, 0, 0), id_count: 211},
{created_on: datetime(2019, 2, 22, 0, 0, 0, 0), id_count: 320},
{created_on: datetime(2019, 2, 23, 0, 0, 0, 0), id_count: 209},
{created_on: datetime(2019, 2, 24, 0, 0, 0, 0), id_count: 204},
{created_on: datetime(2019, 2, 25, 0, 0, 0, 0), id_count: 206},
{created_on: datetime(2019, 2, 26, 0, 0, 0, 0), id_count: 208},
{created_on: datetime(2019, 2, 27, 0, 0, 0, 0), id_count: 205},
{created_on: datetime(2019, 2, 28, 0, 0, 0, 0), id_count: 207},
{created_on: datetime(2019, 3, 1, 0, 0, 0, 0), id_count: 205},
{created_on: datetime(2019, 3, 2, 0, 0, 0, 0), id_count: 201},
{created_on: datetime(2019, 3, 3, 0, 0, 0, 0), id_count: 200},
{created_on: datetime(2019, 3, 4, 0, 0, 0, 0), id_count: 192},
{created_on: datetime(2019, 3, 5, 0, 0, 0, 0), id_count: 190},
{created_on: datetime(2019, 3, 6, 0, 0, 0, 0), id_count: 184},
{created_on: datetime(2019, 3, 7, 0, 0, 0, 0), id_count: 186},
{created_on: datetime(2019, 3, 8, 0, 0, 0, 0), id_count: 188},
{created_on: datetime(2019, 3, 9, 0, 0, 0, 0), id_count: 185},
{created_on: datetime(2019, 3, 10, 0, 0, 0, 0), id_count: 183},
{created_on: datetime(2019, 3, 11, 0, 0, 0, 0), id_count: 178},
{created_on: datetime(2019, 3, 12, 0, 0, 0, 0), id_count: 181},
{created_on: datetime(2019, 3, 13, 0, 0, 0, 0), id_count: 180},
{created_on: datetime(2019, 3, 14, 0, 0, 0, 0), id_count: 184},
{created_on: datetime(2019, 3, 15, 0, 0, 0, 0), id_count: 178},
{created_on: datetime(2019, 3, 16, 0, 0, 0, 0), id_count: 180},
{created_on: datetime(2019, 3, 17, 0, 0, 0, 0), id_count: 177},
{created_on: datetime(2019, 3, 18, 0, 0, 0, 0), id_count: 175},
{created_on: datetime(2019, 3, 19, 0, 0, 0, 0), id_count: 173},
{created_on: datetime(2019, 3, 20, 0, 0, 0, 0), id_count: 175},
{created_on: datetime(2019, 3, 21, 0, 0, 0, 0), id_count: 178},
{created_on: datetime(2019, 3, 22, 0, 0, 0, 0), id_count: 170},
{created_on: datetime(2019, 3, 23, 0, 0, 0, 0), id_count: 172},
{created_on: datetime(2019, 3, 24, 0, 0, 0, 0), id_count: 175},
{created_on: datetime(2019, 3, 25, 0, 0, 0, 0), id_count: 176}
}
),
{
a!lineChartField(
label: "Open vs. Closed Cases",
yAxisTitle: "# of Cases",
categories: index(local!resolvedByDate.data, "created_on"),
series: {
a!chartSeries(
label: "Closed",
data: index(local!resolvedByDate.data, "id_count"),
color: "GREEN"
),
a!chartSeries(
label: "Open",
data: index(local!openByDate.data, "id_count"),
color: "RED"
)
}
)
}
)

Displays the following: gif which zooms in on a section of data in the line chart

Multiple Series Line Chart with Label, X-Axis Title, Y-Axis Title, and Legend

a!lineChartField(
  label: "Tempo Usage Trends",
  categories: {"Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb"},
  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: "PARACHUTE",
  xAxisTitle: "Month",
  yAxisTitle: "% Active",
  yAxisMax: 100,
  showLegend: true
)

Displays the following:

screenshot of a line chart with chart label, axes titles, and legend

Multiple Series Line Chart with Tooltips and a Null Data Point

a!lineChartField(
  categories: {"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"},
  series: {
    a!chartSeries(label: "High", data: {76, 82, null, 92, 87, 79, 80}),
    a!chartSeries(label: "Low", data: {64, 70, 82, 81, 75, 67, null})
  },
  colorScheme: a!colorSchemeCustom(
    colors: {
      "#3c78d8",
      "#6aa84f"
    }
  ),
  xAxisTitle: "Day",
  yAxisTitle: "Temperature (F)",
  showLegend: true
)

Displays the following:

screenshot of a line chart with two lines, one with null data points

Connect Null Data Points in a Line Chart

a!localVariables(
  local!agent: {
    "Hi! Thanks for calling today! How may I help you?",
    null,
    "I can help! First, please verify your data of birth.",
    null,
    "Ok, thank you. Now I'll look up your order.",
    null,
    "Thanks for your patience.I've found it.",
    null,
    "Oh no! Which item is it?",
    null,
    "I'm sorry about that. We'll send you another one free of charge.",
    null,
    "Is there anything else I can help with?",
    null
  },
  local!customer: {
    null,
    "I have a problem with my order",
    null,
    "My birth date is January 1st, 1970.",
    null,
    "This is so slow. What's the problem?",
    null,
    "An item is damaged. I'm so annoyed.",
    null,
    "The prongs are bent on the charging cable. It's useless.",
    null,
    "OK. Thank you for fixing it.",
    null,
    "That's it. Thanks for your help."
  },
  {
    a!lineChartField(
      label: "Conversation Sentiment Analysis",
      labelPosition: "ABOVE",
      categories: a!forEach(
        items: local!agent,
        expression: if(
          isNull(
            fv!item
          ),
          local!customer[fv!index],
          fv!item
        )
      ),
      series: {
        a!chartSeries(
          label: "Agent",
          data: a!forEach(
            items: local!agent,
            expression: if(
              isNull(
                fv!item
              ),
              null,
              a!sentimentScore(
                {
                  fv!item
                }
              )
            )
          )
        ),
        a!chartSeries(
          label: "Customer",
          data: a!forEach(
            items: local!customer,
            expression: if(
              isNull(
                fv!item
              ),
              null,
              a!sentimentScore(
                {
                  fv!item
                }
              )
            )
          )
        )
      },
      colorScheme: a!colorSchemeCustom(
        colors: {
          "#FFC300",
          "#800080"
        }
      ),
      referenceLines: {
        a!chartReferenceLine(
          label: "Positive",
          value: 0.5,
          color: "#008000"
        ),
        a!chartReferenceLine(
          label: "Negative",
          value: - 0.5,
          color: "#FF0000"
        )
      },
      showLegend: true,
      showTooltips: true,
      connectNulls: true
    )
  }
)

Displays the following:

screenshot of a line chart that connects null data points

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!lineChartField_19r1	Added ability to display thousands of data points without scrolling. When the chart shows date or date and time fields, the x-axis labels are formatted to match the end user's time zone and resized to avoid clutter.

To learn more about how Appian handles this kind of versioning, see the Function and Component Versions page.

The following patterns include usage of the Line Chart Component.

Trend-Over-Time Report (Charts, Reports): This report provides an attractive, interactive design for exploring different series of data over time.
Use a Filter to Adjust Chart Reference Lines (Filtering, Charts): Using a dropdown, filter the results of a data set while also adjusting a chart reference line.

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

On This Page

Charts

Line Chart

Parameters

Configuration

Using Record Data

Using Categories and Series

Categories

Series

Additional Notes

Examples

Single Series Line Chart with Label and Instructions

Display Date and Time Fields in a Line Chart

Multiple Series Line Chart with Label, X-Axis Title, Y-Axis Title, and Legend

Multiple Series Line Chart with Tooltips and a Null Data Point

Connect Null Data Points in a Line Chart

Old versions

Related Patterns