Each chart type in Appian can be configured to use a different fixed height and style for each axis. These properties provide variety and enable more dense and meaningful dashboards while still displaying important trends. See the Chart Heights best practices for guidance on which type of chart type and style will work best for your data.
See Also:
All charts in Appian come in at least three standard heights: "TALL"
, "MEDIUM"
, and "SHORT"
. Bar, column, and line charts also have a "MICRO"
height available, which makes it easy to identify trends or outliers using limited space.
Short and Medium Charts Examples
Since micro charts are limited in height, they look best with less clutter on the chart. Consider limiting use of the axes labels, legend, or data labels to ensure better readability.
Micro Line Chart with Legend
This example shows a micro chart with a legend since two lines are used, but the x-axis and data labels are not displayed.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
a!lineChartField(
label: "Case Trends",
labelPosition: "ABOVE",
categories: today() + enumerate(32),
series: {
a!chartSeries(label: "Opened", data: {2, 3, 5, 13, 20, 17, 23, 24, 22, 18, 12, 10, 3, 4, 2, 15, 16, 20, 26, 23, 27, 28, 30, 34, 33, 32, 30, 35, 40, 38, 37, 42}),
a!chartSeries(label: "Closed", data: {3, 5, 4, 2, 3, 2, 4, 5, 7, 10, 12, 16, 17, 15, 15, 16, 13, 10, 15, 17, 20, 21, 25, 22, 22, 17, 15, 17, 16, 15, 14, 13})
},
height: "MICRO",
xAxisStyle: "NONE",
yAxisStyle: "STANDARD",
showLegend: true,
showTooltips: true,
colorScheme: "CLASSIC"
)
Micro Chart with KPI
In some cases, it may be best to hide all axes and labels to only show a general trend. This often works well when paired with additional text to describe the chart. Also, showing the tooltip enables users to still view each data point individually when axes or data labels are hidden.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
a!cardLayout(
contents: {
a!columnsLayout(
columns: {
a!columnLayout(
contents: {
a!richTextDisplayField(
labelPosition: "COLLAPSED",
value: {
a!richTextHeader(
text: "Total Revenue",
size: "SMALL"
),
a!richTextItem(
text: a!currency(
isoCode: "USD",
value: 3276.91
),
size: "LARGE"
),
char(10),
a!richTextIcon(
icon: "caret-up",
color: "POSITIVE",
size: "MEDIUM"
),
a!richTextItem(
text: a!currency(
isoCode: "USD",
value: 116.31
) & " " & "(18%)",
color: "POSITIVE",
size: "STANDARD"
)
}
)
}
),
a!columnLayout(
contents: a!lineChartField(
labelPosition: "ABOVE",
categories: today() + enumerate(32),
series: {
a!chartSeries(label: "count", data: {1, 3, 2, 4, 3, 2, 5, 7, 10, 12, 7, 6, 15, 14, 13, 10, 15, 13, 15, 22, 24, 19, 15, 25, 25, 30, 30, 35, 32, 36, 39, 35, 38, 39, 40}, color: "#4CC900")
},
xAxisStyle: "NONE",
yAxisStyle: "NONE",
showLegend: false,
height: "MICRO",
yAxisMax: 40
)
)
}
)
}
)
The axes style parameters provide an easy way to create clean, minimalist charts when viewing the general trend of the data is most important. These styles apply to both the x and y axes on bar, column, and line charts. The default style for both axes is STANDARD
, but there are additional styles for MINIMAL
and NONE
that hide certain properties of the chart.
The x-axis always corresponds to the axis that shows the categories. On bar charts, this is the vertical axis; on column and line charts, this is the horizontal axis. The xAxisStyle
determines whether to display any category labels and accepts two possible values: NONE
or STANDARD
. Here are the properties that are affected by the x-axis style:
NONE
is used for the x-axis style, category labels are not shown; STANDARD
displays all category labels.NONE
.X-Axis Style Examples
The y-axis shows the series data values, and each style affects the display of multiple aspects of the chart. The possible values for the y-axis style are STANDARD
, MINIMAL
, and NONE
. The corresponding properties affected by the y-axis style are:
STANDARD
. When MINIMAL
is used, only the minimum and maximum grid lines are visible, and NONE
hides the grid lines entirely.STANDARD
displays all axis data labels, MINIMAL
displays only the minimum and maximum labels and, and NONE
does not display any axis data labels.NONE
style is used.NONE
is used for the y-axis style.Y-Axis Style Examples
Chart Heights and Axes Styles