Chartsanimated

Candlesticks

A financial candlestick series with wicks and green/red bodies that rise in.

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

data class Candle(val open: Float, val close: Float, val high: Float, val low: Float)

@Composable
fun Candlesticks(
    candles: List<Candle> = sampleCandles(),
    modifier: Modifier = Modifier,
) {
    val rise by animateFloatAsState(1f, tween(900, easing = EaseOutCubic), label = "rise")
    val up = Color(0xFF16A34A)
    val down = Color(0xFFDC2626)
    Canvas(modifier.fillMaxWidth().height(120.dp)) {
        val slot = size.width / candles.size
        val bw = slot * 0.5f
        fun y(v: Float) = size.height * (1f - v) * rise
        candles.forEachIndexed { i, c ->
            val cx = i * slot + slot / 2
            val color = if (c.close >= c.open) up else down
            drawLine(color, Offset(cx, y(c.high)), Offset(cx, y(c.low)), 1.5.dp.toPx())
            val top = y(maxOf(c.open, c.close))
            val bot = y(minOf(c.open, c.close))
            drawRoundRect(
                color = color,
                topLeft = Offset(cx - bw / 2, top),
                size = Size(bw, (bot - top).coerceAtLeast(2f)),
                cornerRadius = CornerRadius(2.dp.toPx()),
            )
        }
    }
}