MonthlyCapPreview.kt

@Composable
fun MonthlyCapPreview(monthlyPreview: List<Pair<String, Float>>) {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        val maxMonthValue = monthlyPreview.maxBy { it.second }.second
        Row(
            modifier = Modifier.fillMaxHeight(.8f),
            verticalAlignment = Alignment.Bottom
        ) {
            for (pairPreview in monthlyPreview) {
                val columnHeightWeight = pairPreview.second / maxMonthValue
                Card(
                    modifier = Modifier
                        .weight(1f)
                        .fillMaxHeight(columnHeightWeight)
                        .padding(5.dp),
                    colors = CardDefaults.cardColors(
                        containerColor = setHighlightColor(
                            pairPreview,
                            maxMonthValue
                        )
                    ),
                    shape = RoundedCornerShape(30) //<--- Adding some "extra roundiness"
                ) { }
            }
        }

        Row(
            verticalAlignment = Alignment.CenterVertically
        ) {
            for (pairPreview in monthlyPreview) {
                Text(
                    modifier = Modifier.weight(1f),
                    text = pairPreview.first,
                    textAlign = TextAlign.Center,
                    fontWeight = FontWeight.SemiBold,
                    color = setHighlightColor(pairPreview, maxMonthValue)
                )
            }
        }
    }
}

@Composable
private fun setHighlightColor( //<--- Helper function to determine colour of Text and Bar
    pairPreview: Pair<String, Float>,
    maxMonthValue: Float
) = if (pairPreview.second == maxMonthValue) Color.White else Color.White.copy(
    alpha = 0.4f
)