Chartsanimated

Threshold line

A line chart that turns red above a dashed limit and green below it.

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 ThresholdLine(
    values: List<Float> = listOf(0.4f, 0.55f, 0.7f, 0.85f, 0.62f, 0.5f, 0.75f),
    threshold: Float = 0.65f,
    modifier: Modifier = Modifier,
) {
    val draw = remember { Animatable(0f) }
    LaunchedEffect(Unit) { draw.animateTo(1f, tween(1100, easing = EaseInOutCubic)) }
    val over = Color(0xFFF43F5E)
    val under = Color(0xFF22C55E)
    val limit = MaterialTheme.colorScheme.outline
    Canvas(modifier.fillMaxWidth().height(118.dp)) {
        val ty = size.height * (1f - threshold)
        drawLine(
            limit, Offset(0f, ty), Offset(size.width, ty), 1.5.dp.toPx(),
            pathEffect = PathEffect.dashPathEffect(floatArrayOf(8f, 8f)),
        )
        val step = size.width / (values.size - 1)
        val path = Path()
        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, y)
        }
        val m = PathMeasure().apply { setPath(path, false) }
        val shown = Path().also { m.getSegment(0f, m.length * draw.value, it, true) }
        clipRect(top = 0f, bottom = ty) { drawPath(shown, over, style = Stroke(3.dp.toPx(), cap = StrokeCap.Round)) }
        clipRect(top = ty, bottom = size.height) { drawPath(shown, under, style = Stroke(3.dp.toPx(), cap = StrokeCap.Round)) }
    }
}