Chartsanimated

Ridgeline

Overlapping ridgeline densities that stack and draw on for a joyplot effect.

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 Ridgeline(
    rows: List<List<Float>> = remember { sampleRidges(4) },
    accent: Color = Color(0xFFEC4899),
    modifier: Modifier = Modifier,
) {
    val draw = remember { Animatable(0f) }
    LaunchedEffect(Unit) { draw.animateTo(1f, tween(1200, easing = EaseInOutCubic)) }
    val surface = MaterialTheme.colorScheme.surface
    Canvas(modifier.fillMaxWidth().height(130.dp)) {
        val rowGap = size.height / (rows.size + 1)
        rows.forEachIndexed { r, density ->
            val baseY = rowGap * (r + 1.4f)
            val step = size.width / (density.size - 1)
            val line = Path().apply {
                density.forEachIndexed { i, v ->
                    val x = i * step
                    val y = baseY - v * rowGap * 1.6f
                    if (i == 0) moveTo(x, y) else lineTo(x, y)
                }
            }
            val fill = Path().apply { addPath(line); lineTo(size.width, baseY); lineTo(0f, baseY); close() }
            drawPath(fill, surface)
            val m = PathMeasure().apply { setPath(line, false) }
            drawPath(
                Path().also { m.getSegment(0f, m.length * draw.value, it, true) },
                accent.copy(alpha = 0.85f),
                style = Stroke(2.dp.toPx(), cap = StrokeCap.Round),
            )
        }
    }
}