kmp-charts

kmp-charts is a Kotlin/Compose Multiplatform library that offers many different types of charts to display data.

💾 Installation

Add the dependency in your common module's commonMain sourceSet:

implementation('io.github.tweener:kmp-charts:$kmp_charts_version')

The latest version is:

⚙️ Usage

Note

For now, there is only one chart available: DonutChart. More charts will be added later on.

🍩 Donut chart

A DonutChart requires a list of Segments, with the first segment starting from the given startAngleFromOrigin in degrees. Each segment is defined by an angle, its color and an optional progress option.

See .degrees to easily use float angles in degrees.

val green = Color(0xFF04C700)
val orange = Color(0xFFFF8850)
val red = Color(0xFFFF3434)
val darkRed = Color(0xFFA40000)
val yellow = Color(0xFFFFF534)
val darkYellow = Color(0xFF746F0E)
val blue = Color(0xFF3437FF)

DonutChart(
    segments = listOf(
        Segment(angle = 40f.degrees, progress = 0.33f, baseColor = green),
        Segment(angle = 20f.degrees, progress = 0.7f, baseColor = yellow, backgroundColor = darkYellow),
        Segment(angle = 90f.degrees, progress = 0.66f, baseColor = green),
        Segment(angle = 60f.degrees, progress = 0.7f, baseColor = red, backgroundColor = darkRed),
        Segment(angle = 50f.degrees, progress = 0.8f, baseColor = orange),
        Segment(angle = 100f.degrees, progress = 1f, baseColor = blue),
    ),
    startAngleFromOrigin = 270f.degrees,
    sizes = DonutChartDefault.chartSizes(strokeWidth = 12.dp, selectedStrokeWidth = 22.dp),
    animationDurationMillis = 800,
)

This code gives the following output:

👨‍💻 Contributing

I'd love your input and welcome any contributions! Please feel free to submit a pull request.

🪪 Licence