---

kmp-charts

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

Be sure to show your support by starring ⭐️ this repository, and feel free to contribute if you're interested!

---

🛠️ Installation

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

In your settings.gradle.kts file, add Maven Central to your repositories:

repositories {
    mavenCentral()
}

Then add kmp-charts dependency to your module:

• With version catalog, open libs.versions.toml:

[versions]
kmpCharts = "1.3.1" // Check latest version

[libraries]
kmpCharts = { group = "io.github.tweener", name = "kmp-charts", version.ref = "kmpCharts" }

Then in your module build.gradle.kts add:

dependencies {
    implementation(libs.kmpCharts)
}

• Without version catalog, in your module build.gradle.kts add:

dependencies {
    val kmp_charts_version = "1.3.1" // Check latest version

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

The latest version is:

🧑‍💻 Usage

🍩 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:

📈 Line chart

A LineChart is a versatile chart used to visualize data points connected by straight or curved lines. It is ideal for displaying trends, relationships, or changes over time.

LineChart(
    modifier = Modifier
        .fillMaxWidth()
        .height(200.dp),
    lines = lines,
    xAxis = xAxis,
    yAxis = yAxis,
    textStyle = MaterialTheme.typography.labelLarge,
    gridVisibility = LineChartDefaults.gridVisibility(
        showXAxis = true,
        showYAxis = true,
    ),
    colors = LineChartDefaults.chartColors(
        xAxisValues = MaterialTheme.colorScheme.onBackground,
        xAxisGrid = MaterialTheme.colorScheme.outline,
        yAxisValues = MaterialTheme.colorScheme.onBackground,
        yAxisGrid = MaterialTheme.colorScheme.outline,
    ),
    sizes = LineChartDefaults.chartSizes(
        axisStrokeWidth = 1.dp,
        axisDashOn = 8.dp,
        axisDashOff = 8.dp,
        axisXValuesPadding = Size.Padding.Small,
        axisYValuesPadding = Size.Padding.ExtraSmall,
    )
)

Some examples of output with straight or curved lines:

---

👨‍💻 Contributing

We love your input and welcome any contributions! Please read our contribution guidelines before submitting a pull request.

---

📜 Licence

kmp-charts is licensed under the Apache-2.0.