charty
/

Quick Start#

This guide takes you from zero to a rendered chart in under two minutes.

Minimal bar chart#

Kotlin
import androidx.compose.foundation.layout.fillMaxWidthimport androidx.compose.foundation.layout.heightimport androidx.compose.ui.Modifierimport androidx.compose.ui.unit.dpimport com.himanshoe.charty.bar.BarChartimport com.himanshoe.charty.bar.data.BarDataBarChart(    data = {        listOf(            BarData(label = "Jan", value = 120f),            BarData(label = "Feb", value = 95f),            BarData(label = "Mar", value = 160f),            BarData(label = "Apr", value = 80f),            BarData(label = "May", value = 200f),        )    },    modifier = Modifier        .fillMaxWidth()        .height(300.dp),)

data is always a lambda (() -> List<BarData>), not a bare list. This lets Charty skip unnecessary recompositions when the surrounding state changes.

Customising the colour#

Use ChartyColor.Solid for a flat colour or ChartyColor.Gradient for a multi-stop gradient. ChartyColors provides a ready-made palette of named constants.

Kotlin
import com.himanshoe.charty.color.ChartyColorimport com.himanshoe.charty.color.ChartyColorsimport androidx.compose.ui.graphics.Color// Solid colour from the built-in paletteBarChart(    data = { myData },    color = ChartyColor.Solid(ChartyColors.Blue),   // Material Blue 500)// Custom solid colourBarChart(    data = { myData },    color = ChartyColor.Solid(Color(0xFF6200EE)),)// Two-stop gradient (top → bottom)BarChart(    data = { myData },    color = ChartyColor.Gradient(        listOf(ChartyColors.Blue, ChartyColors.Teal)    ),)

Available ChartyColors constants: Blue, Red, Green, Orange, Purple, Pink, Teal, Cyan, Indigo, Amber. Pre-built gradients: DefaultGradient, DefaultMultiline, ModernPalette, WarmPalette, CoolPalette, NaturePalette.

Enabling animation#

Pass an Animation value inside BarChartConfig. Three presets are available:

Kotlin
import com.himanshoe.charty.bar.config.BarChartConfigimport com.himanshoe.charty.common.config.AnimationBarChart(    data = { myData },    barConfig = BarChartConfig(        animation = Animation.Default,   // 800 ms tween (recommended)        // animation = Animation.Fast,   // 400 ms        // animation = Animation.Slow,   // 1 200 ms        // animation = Animation.Smooth, // physics-based spring        // animation = Animation.Bouncy, // spring with a gentle bounce        // animation = Animation.Enabled(duration = 600),  // custom tween        // animation = Animation.Disabled,                 // no animation    ),)

animation drives the chart's entry reveal. To also tween whenever the data changes, set animateValueChanges = true alongside it:

Kotlin
BarChart(    data = { liveData },    barConfig = BarChartConfig(        animation = Animation.Fast,        animateValueChanges = true,    ),)

Handling clicks#

Supply a lambda to onBarClick. It receives the BarData of the tapped bar.

Kotlin
BarChart(    data = { myData },    onBarClick = { barData ->        println("Tapped: ${barData.label} = ${barData.value}")    },)

Putting it all together#

Kotlin
BarChart(    data = {        listOf(            BarData(label = "Jan", value = 120f),            BarData(label = "Feb", value = 95f),            BarData(label = "Mar", value = 160f),        )    },    modifier = Modifier        .fillMaxWidth()        .height(300.dp),    color = ChartyColor.Gradient(        listOf(ChartyColors.Blue, ChartyColors.Teal)    ),    barConfig = BarChartConfig(        animation = Animation.Default,        showDataLabels = true,    ),    onBarClick = { barData ->        println("Tapped: ${barData.label} = ${barData.value}")    },)

A line chart with interactions#

Kotlin
import com.himanshoe.charty.common.gesture.ChartCrosshairimport com.himanshoe.charty.line.LineChartimport com.himanshoe.charty.line.config.LineChartConfigimport com.himanshoe.charty.common.config.LineInterpolationLineChart(    data = { priceData },    modifier = Modifier.fillMaxWidth().height(300.dp),    color = ChartyColor.Solid(ChartyColors.Blue),    lineConfig = LineChartConfig(        interpolation = LineInterpolation.SMOOTH,        downsampleThreshold = 800,        // stay smooth over very large series    ),    crosshair = ChartCrosshair(),         // draggable guide line + label)

Next steps#

Guides#

Reference#