Chartsanimated

Population pyramid

A back-to-back age pyramid whose male and female bars grow out from the spine.

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 PopulationPyramid(
    left: List<Float> = listOf(0.8f, 0.7f, 0.62f, 0.5f, 0.36f, 0.22f),
    right: List<Float> = listOf(0.74f, 0.68f, 0.58f, 0.46f, 0.3f, 0.18f),
    leftColor: Color = Color(0xFF3B82F6),
    rightColor: Color = Color(0xFFF472B6),
    modifier: Modifier = Modifier,
) {
    val grow by animateFloatAsState(1f, tween(900, easing = EaseOutCubic), label = "g")
    Canvas(modifier.fillMaxWidth().height(130.dp)) {
        val gap = 5.dp.toPx()
        val rowH = (size.height - gap * (left.size - 1)) / left.size
        val half = size.width / 2 - 8.dp.toPx()
        left.indices.forEach { i ->
            val y = i * (rowH + gap)
            drawRoundRect(leftColor, Offset(center.x - 6.dp.toPx() - half * left[i] * grow, y), Size(half * left[i] * grow, rowH), CornerRadius(3.dp.toPx()))
            drawRoundRect(rightColor, Offset(center.x + 6.dp.toPx(), y), Size(half * right[i] * grow, rowH), CornerRadius(3.dp.toPx()))
        }
    }
}