Version 0.5.4 of the
documentation is no longer actively maintained. The site that you are
currently viewing is an archived snapshot.
For up-to-date documentation, see the
latest version.
Bullet Graphs
The bullet graph is a type of linear bar guage and is based on the Perceptual Edge Bullet Graph Design Specification.
The below example creates a single bullet graph with a two-line title.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| BulletGraph(modifier = Modifier.padding(16.dp).height(100.dp)) {
label {
Column(
horizontalAlignment = Alignment.End,
modifier = Modifier.padding(end = KoalaPlotTheme.sizes.gap)
) {
Text(
"Revenue 2005 YTD",
textAlign = TextAlign.End
)
Text(
"(US $ in thousands)",
textAlign = TextAlign.End,
style = MaterialTheme.typography.labelSmall
)
}
}
axis { labels { Text("${it.toInt()}") } }
comparativeMeasure(260f)
featuredMeasureBar(275f)
ranges(0f, 200f, 250f, 300f)
}
|
It is common to use multiple bullet graphs together, and to ensure each is the same width and with labels aligned. That is possible using the
BulletGraphs Composable as demonstrated below.
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
| @Composable
fun TwoLineLabel(line1: String, line2: String) {
Column(
horizontalAlignment = Alignment.End,
modifier = Modifier.padding(end = KoalaPlotTheme.sizes.gap)
) {
Text(line1, textAlign = TextAlign.End)
Text(line2, textAlign = TextAlign.End, style = MaterialTheme.typography.labelSmall)
}
}
BulletGraphs(modifier = Modifier.padding(16.dp)) {
bullet {
label { TwoLineLabel("Revenue", "(US $ in thousands)") }
axis { labels { Text("${it.toInt()}", style = MaterialTheme.typography.labelSmall) } }
comparativeMeasure(250f)
featuredMeasureBar(275f)
ranges(0f, 150f, 225f, 300f)
}
bullet {
label { TwoLineLabel("Profit", "%") }
axis { labels { Text("${it.toInt()}%", style = MaterialTheme.typography.labelSmall) } }
comparativeMeasure(26f)
featuredMeasureBar(22.5f)
ranges(0f, 20f, 25f, 30f)
}
bullet {
label { TwoLineLabel("Avg Order Size", "U.S. $") }
axis { labels { Text("${it.toInt()}", style = MaterialTheme.typography.labelSmall) } }
comparativeMeasure(550f)
featuredMeasureBar(325f)
ranges(0f, 350f, 500f, 600f)
}
}
|
Last modified December 1, 2023:
Add content sections. (c050f1f)