Chartsanimated

Diverging bars

A diverging bar chart with positive and negative bars splitting from a center axis.

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 DivergingBars(
    values: List<Float> = listOf(0.7f, -0.4f, 0.5f, -0.65f, 0.3f, -0.2f),
    pos: Color = Color(0xFF22C55E),
    neg: Color = Color(0xFFF43F5E),
    modifier: Modifier = Modifier,
) {
    val grow by animateFloatAsState(1f, tween(900, easing = EaseOutCubic), label = "g")
    val axis = MaterialTheme.colorScheme.outlineVariant
    Canvas(modifier.fillMaxWidth().height(130.dp)) {
        val gap = 10.dp.toPx()
        val bw = (size.width - gap * (values.size - 1)) / values.size
        val mid = size.height / 2
        drawLine(axis, Offset(0f, mid), Offset(size.width, mid), 1.dp.toPx())
        values.forEachIndexed { i, v ->
            val x = i * (bw + gap)
            val h = mid * abs(v) * grow
            val y = if (v >= 0) mid - h else mid
            drawRoundRect(
                if (v >= 0) pos else neg,
                Offset(x, y), Size(bw, h),
                CornerRadius(3.dp.toPx()),
            )
        }
    }
}