Charts
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 SteppedArea(
values: List<Float> = listOf(0.3f, 0.5f, 0.42f, 0.7f, 0.6f, 0.82f),
accent: Color = Color(0xFF14B8A6),
modifier: Modifier = Modifier,
) {
val reveal by animateFloatAsState(1f, tween(1000, easing = EaseOutCubic), label = "r")
Canvas(modifier.fillMaxWidth().height(120.dp)) {
val step = size.width / values.size
val top = Path().apply {
moveTo(0f, size.height * (1f - values[0]))
values.forEachIndexed { i, v ->
val y = size.height * (1f - v)
lineTo(i * step, y)
lineTo((i + 1) * step, y)
}
}
val area = Path().apply { addPath(top); lineTo(size.width, size.height); lineTo(0f, size.height); close() }
clipRect(right = size.width * reveal) {
drawPath(area, Brush.verticalGradient(listOf(accent.copy(alpha = 0.35f), Color.Transparent)))
drawPath(top, accent, style = Stroke(2.5.dp.toPx(), join = StrokeJoin.Round))
}
}
}