Chartsanimated

Combo

A dual-axis combo chart pairing grow-in volume bars with a draw-on trend line.

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 ComboChart(
    bars: List<Float> = listOf(0.4f, 0.65f, 0.5f, 0.8f, 0.6f, 0.9f),
    line: List<Float> = listOf(0.3f, 0.45f, 0.5f, 0.62f, 0.7f, 0.85f),
    barColor: Color = Color(0xFFC7D2FE),
    lineColor: Color = Color(0xFF4F46E5),
    modifier: Modifier = Modifier,
) {
    val grow by animateFloatAsState(1f, tween(800, easing = EaseOutCubic), label = "g")
    val draw = remember { Animatable(0f) }
    LaunchedEffect(Unit) { draw.animateTo(1f, tween(1100, 300, EaseInOutCubic)) }
    Canvas(modifier.fillMaxWidth().height(124.dp)) {
        val slot = size.width / bars.size
        val bw = slot * 0.55f
        bars.forEachIndexed { i, v ->
            val h = size.height * v * grow
            drawRoundRect(
                barColor,
                Offset(i * slot + (slot - bw) / 2, size.height - h),
                Size(bw, h), CornerRadius(3.dp.toPx()),
            )
        }
        val path = Path()
        line.forEachIndexed { i, v ->
            val x = i * slot + slot / 2
            val y = size.height * (1f - v)
            if (i == 0) path.moveTo(x, y) else path.lineTo(x, y)
        }
        val m = PathMeasure().apply { setPath(path, false) }
        drawPath(
            Path().also { m.getSegment(0f, m.length * draw.value, it, true) },
            lineColor, style = Stroke(3.dp.toPx(), cap = StrokeCap.Round),
        )
    }
}