Chartsanimated

Range bars

A floating bar chart of min–max ranges that expand from their midpoints.

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 RangeBars(
    ranges: List<Pair<Float, Float>> = listOf(
        0.2f to 0.6f, 0.35f to 0.8f, 0.15f to 0.5f,
        0.45f to 0.92f, 0.3f to 0.7f,
    ),
    accent: Color = Color(0xFF0EA5E9),
    modifier: Modifier = Modifier,
) {
    val grow by animateFloatAsState(1f, tween(900, easing = EaseOutCubic), label = "g")
    Canvas(modifier.fillMaxWidth().height(126.dp)) {
        val gap = 16.dp.toPx()
        val bw = (size.width - gap * (ranges.size - 1)) / ranges.size
        ranges.forEachIndexed { i, (lo, hi) ->
            val mid = (lo + hi) / 2
            val half = (hi - lo) / 2 * grow
            val yTop = size.height * (1f - (mid + half))
            val h = size.height * (half * 2)
            drawRoundRect(
                accent,
                Offset(i * (bw + gap), yTop),
                Size(bw, h),
                CornerRadius(bw / 2),
            )
        }
    }
}