Charts
Chartsanimated

Streamgraph

A center-baseline streamgraph whose organic bands flow in symmetrically.

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 Streamgraph(
    series: List<List<Float>> = listOf(
        listOf(0.12f, 0.18f, 0.14f, 0.22f, 0.16f, 0.2f),
        listOf(0.2f, 0.16f, 0.24f, 0.18f, 0.26f, 0.2f),
        listOf(0.14f, 0.2f, 0.16f, 0.22f, 0.18f, 0.24f),
    ),
    palette: List<Color> = listOf(Color(0xFFF59E0B), Color(0xFFEC4899), Color(0xFF8B5CF6)),
    modifier: Modifier = Modifier,
) {
    val reveal by animateFloatAsState(1f, tween(1000, easing = EaseOutCubic), label = "r")
    Canvas(modifier.fillMaxWidth().height(120.dp)) {
        val n = series[0].size
        val step = size.width / (n - 1)
        val totals = FloatArray(n) { i -> series.sumOf { it[i].toDouble() }.toFloat() }
        val lower = FloatArray(n) { i -> 0.5f - totals[i] / 2 }
        clipRect(right = size.width * reveal) {
            series.forEachIndexed { s, ser ->
                val p = Path()
                ser.forEachIndexed { i, v -> val x = i * step; val y = size.height * (lower[i]); if (i == 0) p.moveTo(x, y) else p.lineTo(x, y) }
                for (i in ser.indices.reversed()) p.lineTo(i * step, size.height * (lower[i] + ser[i]))
                p.close()
                drawPath(p, palette[s])
                ser.forEachIndexed { i, v -> lower[i] += v }
            }
        }
    }
}