Chartsanimated

Bullet

A compact bullet graph with qualitative bands, a measure bar and target marker.

Installation

caveui components are copy-paste Jetpack Compose built entirely on Material 3 — there's no caveui dependency to add. Make sure Material 3 is on your classpath (it ships with the Compose BOM), then copy the Usage snippet below into your project.

kotlin

// build.gradle.kts (module)
dependencies {
    implementation(platform("androidx.compose:compose-bom:2025.06.00"))
    implementation("androidx.compose.material3:material3")
}

Usage

kotlin

@Composable
fun BulletGraph(
    measure: Float = 0.68f,
    target: Float = 0.8f,
    bands: List<Float> = listOf(0.4f, 0.7f, 1f),
    accent: Color = Color(0xFF111827),
    modifier: Modifier = Modifier,
) {
    val grow = remember { Animatable(0f) }
    LaunchedEffect(Unit) { grow.animateTo(1f, tween(900, easing = EaseOutCubic)) }
    val shades = listOf(0.18f, 0.30f, 0.45f)
    Canvas(modifier.fillMaxWidth().height(34.dp)) {
        val h = size.height
        var prev = 0f
        bands.forEachIndexed { i, b ->
            drawRect(
                Color.Gray.copy(alpha = shades[i]),
                Offset(size.width * prev, 0f),
                Size(size.width * (b - prev), h),
            )
            prev = b
        }
        drawRoundRect(
            accent,
            Offset(0f, h * 0.3f),
            Size(size.width * measure * grow.value, h * 0.4f),
            CornerRadius(2.dp.toPx()),
        )
        val tx = size.width * target
        drawLine(Color(0xFFF43F5E), Offset(tx, h * 0.12f), Offset(tx, h * 0.88f), 3.dp.toPx())
    }
}