Feel free to subscribe on getting more examples like this.

Simple implementation of the candlestick chart component for Compose UI:

@Composable
fun ChartBox(chart: Chart, modifier: Modifier = Modifier) {

    val candleRed: Color = MaterialTheme.colors.candleRed
    val candleGreen: Color = MaterialTheme.colors.candleGreen

    WidgetBox(modifier = modifier) {

        Canvas(modifier = Modifier.fillMaxSize()) {
            
            val higherHighPrice = chart.getHigherHighPrice()
            val lowerLowPrice = chart.getLowerLowPrice()

            val xSize = size.width
            val ySize = size.height

            //Find out the price movement for 1 px
            val yPixelStep: Double = higherHighPrice.minus(lowerLowPrice) / ySize
            //Find out a candle width
            val xCandleWith: Float = xSize / chart.candlesCount()

            drawXAxis()
            drawYAxis()

            chart.candleList.forEachIndexed { index, candle ->
                drawCandle(
                    width = xCandleWith - 1, //1px for space between candles
                    offsetX = (xCandleWith * index),
                    lowY = (higherHighPrice.minus(candle.priceLow) / yPixelStep).toFloat(),
                    highY = (higherHighPrice.minus(candle.priceHigh) / yPixelStep).toFloat(),
                    openY = (higherHighPrice.minus(candle.priceOpen) / yPixelStep).toFloat(),
                    closeY = (higherHighPrice.minus(candle.priceClose) / yPixelStep).toFloat(),
                    color = if (candle.priceOpen < candle.priceClose) candleGreen else candleRed
                )
            }
        }

    }
}

WindgetBox composable component is just a Card + Box:

@Composable
fun WidgetBox(
    modifier: Modifier,
    backgroundColor: Color = MaterialTheme.colors.surface,
    content: @Composable BoxScope.() -> Unit
) {
    Card(
        shape = RoundedCornerShape(16.dp),
        backgroundColor = backgroundColor,
        modifier = modifier.padding(16.dp)
    ) {
        Box(modifier = Modifier.padding(16.dp)) {
            content()
        }
    }
}

Draw X and Y axis :

fun DrawScope.drawXAxis() {
    drawLine(
        color = Color.DarkGray,
        start = Offset(0f, size.height), // values in pixels
        end = Offset(size.width, size.height),
        strokeWidth = 1f // values in pixels
    )
}

fun DrawScope.drawYAxis() {
    drawLine(
        color = Color.DarkGray,
        start = Offset(0f, 0f),
        end = Offset(0f, size.height),
        strokeWidth = 1f
    )
}

Draw candlestick :

fun DrawScope.drawCandle(
    width: Float,
    offsetX: Float,
    lowY: Float,
    highY: Float,
    openY: Float,
    closeY: Float,
    color: Color
) {
    //Candle shadow
    drawLine(
        color = color,
        start = Offset(offsetX + width / 2, lowY),
        end = Offset(offsetX + width / 2, highY),
        strokeWidth = 1f
    )

    //Candle body
    drawLine(
        color = color,
        start = Offset(offsetX + width / 2, openY),
        end = Offset(offsetX + width / 2, closeY),
        strokeWidth = width
    )
}

Chart data class:

data class Chart(
    var candleList: List<Candle>
) {
    fun getHigherHighPrice(): Double =
        if (candleList.isNotEmpty()) candleList.sortedByDescending { it.priceHigh }[0].priceHigh else 0.0

    fun getLowerLowPrice(): Double =
        if (candleList.isNotEmpty()) candleList.sortedBy { it.priceLow }[0].priceLow else 0.0

    fun candlesCount(): Int = candleList.size
}

Candle data class (data is getting from API and deserializing into this class):

data class Candle(
    val openTime: Long,
    val closeTime: Long,
    val priceOpen: Double,
    val priceClose: Double,
    val priceLow: Double,
    val priceHigh: Double,
    val volume: Double
)

Happy coding!

Reach out to me:

Instagram - Behind the scenes of building apps
Twitter - about Compose UI
GitHub and more links

0 comments

Simple Tab Switcher | Kotlin | Compose | Source code

Kotlin | Ktor | Websocket Client | Source code

See all posts from Dmitri | Android Developer ⚡️