Chartsanimated

Half gauge

A semicircular gauge whose colored arc sweeps to a value over a soft track.

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 HalfGauge(
    value: Float = 0.64f,
    accent: Color = Color(0xFFF59E0B),
    modifier: Modifier = Modifier,
) {
    val sweep by animateFloatAsState(value, tween(1100, easing = EaseOutCubic), label = "s")
    val track = MaterialTheme.colorScheme.surfaceVariant
    Box(modifier.size(160.dp, 92.dp), contentAlignment = Alignment.BottomCenter) {
        Canvas(Modifier.fillMaxSize()) {
            val stroke = Stroke(14.dp.toPx(), cap = StrokeCap.Round)
            val arc = Size(size.width, size.width)
            drawArc(track, 180f, 180f, false, size = arc, style = stroke)
            drawArc(accent, 180f, 180f * sweep, false, size = arc, style = stroke)
        }
        Text(
            "${(sweep * 100).toInt()}",
            style = MaterialTheme.typography.headlineMedium,
            fontWeight = FontWeight.Bold,
        )
    }
}