Chartsanimated

Confidence band

A forecast line with a shaded confidence interval that fades in behind 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 ConfidenceBand(
    mean: List<Float> = listOf(0.5f, 0.55f, 0.6f, 0.58f, 0.66f, 0.72f, 0.7f),
    spread: Float = 0.12f,
    accent: Color = Color(0xFF3B82F6),
    modifier: Modifier = Modifier,
) {
    val reveal by animateFloatAsState(1f, tween(1000, easing = EaseOutCubic), label = "r")
    Canvas(modifier.fillMaxWidth().height(120.dp)) {
        val step = size.width / (mean.size - 1)
        fun pt(i: Int, off: Float) = Offset(i * step, size.height * (1f - (mean[i] + off)))
        val band = Path().apply {
            mean.indices.forEach { i -> if (i == 0) moveTo(pt(i, spread).x, pt(i, spread).y) else lineTo(pt(i, spread).x, pt(i, spread).y) }
            for (i in mean.indices.reversed()) lineTo(pt(i, -spread).x, pt(i, -spread).y)
            close()
        }
        clipRect(right = size.width * reveal) {
            drawPath(band, accent.copy(alpha = 0.18f))
            val line = Path().apply {
                mean.indices.forEach { i -> if (i == 0) moveTo(pt(i, 0f).x, pt(i, 0f).y) else lineTo(pt(i, 0f).x, pt(i, 0f).y) }
            }
            drawPath(line, accent, style = Stroke(3.dp.toPx(), cap = StrokeCap.Round))
        }
    }
}