Chartsanimated

Stacked area

Three translucent series stacked into bands that wipe in left to right.

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 StackedArea(
    series: List<List<Float>> = listOf(
        listOf(0.2f, 0.25f, 0.18f, 0.3f, 0.22f, 0.28f),
        listOf(0.18f, 0.2f, 0.28f, 0.16f, 0.26f, 0.2f),
        listOf(0.22f, 0.18f, 0.2f, 0.24f, 0.18f, 0.26f),
    ),
    palette: List<Color> = listOf(Color(0xFF6366F1), Color(0xFF22D3EE), Color(0xFFA78BFA)),
    modifier: Modifier = Modifier,
) {
    val reveal by animateFloatAsState(1f, tween(1000, easing = EaseOutCubic), label = "r")
    Canvas(modifier.fillMaxWidth().height(120.dp)) {
        val step = size.width / (series[0].size - 1)
        val cum = FloatArray(series[0].size)
        clipRect(right = size.width * reveal) {
            series.forEachIndexed { s, ser ->
                val top = Path()
                ser.forEachIndexed { i, v ->
                    val x = i * step
                    val yTop = size.height * (1f - (cum[i] + v))
                    if (i == 0) top.moveTo(x, yTop) else top.lineTo(x, yTop)
                }
                for (i in ser.indices.reversed()) {
                    top.lineTo(i * step, size.height * (1f - cum[i]))
                }
                top.close()
                drawPath(top, palette[s].copy(alpha = 0.55f))
                ser.forEachIndexed { i, v -> cum[i] += v }
            }
        }
    }
}