Chartsanimated

Polar area

A polar area rose where each equal-angle wedge's radius encodes its value.

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 PolarArea(
    values: List<Float> = listOf(0.9f, 0.6f, 0.75f, 0.5f, 0.85f, 0.65f),
    accent: Color = Color(0xFF0EA5E9),
    modifier: Modifier = Modifier,
) {
    val grow by animateFloatAsState(1f, tween(900, easing = EaseOutCubic), label = "g")
    Canvas(modifier.size(150.dp)) {
        val n = values.size
        val seg = 360f / n
        val maxR = size.minDimension / 2 * 0.9f
        values.forEachIndexed { i, v ->
            val r = maxR * v * grow
            drawArc(
                accent.copy(alpha = 0.35f + 0.1f * (i % 3)),
                -90f + i * seg, seg, useCenter = true,
                topLeft = Offset(center.x - r, center.y - r),
                size = Size(r * 2, r * 2),
            )
        }
    }
}