Chartsanimated

Stepped line

A step-interpolated line chart that draws on through right-angle transitions.

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 SteppedLine(
    values: List<Float> = listOf(0.35f, 0.35f, 0.6f, 0.6f, 0.45f, 0.8f, 0.8f, 0.65f),
    accent: Color = Color(0xFF06B6D4),
    modifier: Modifier = Modifier,
) {
    val draw = remember { Animatable(0f) }
    LaunchedEffect(Unit) { draw.animateTo(1f, tween(1100, easing = EaseInOutCubic)) }
    Canvas(modifier.fillMaxWidth().height(116.dp)) {
        val step = size.width / (values.size - 1)
        val path = Path()
        var prevY = size.height * (1f - values[0])
        values.forEachIndexed { i, v ->
            val x = i * step
            val y = size.height * (1f - v)
            if (i == 0) {
                path.moveTo(x, y)
            } else {
                path.lineTo(x, prevY)
                path.lineTo(x, y)
            }
            prevY = y
        }
        val m = PathMeasure().apply { setPath(path, false) }
        drawPath(
            Path().also { m.getSegment(0f, m.length * draw.value, it, true) },
            accent,
            style = Stroke(3.dp.toPx(), cap = StrokeCap.Round, join = StrokeJoin.Round),
        )
    }
}