Chartopia is a Kotlin/Compose Multiplatform library that provides a variety of customizable charts to visually represent data.
Be sure to show your support by starring ⭐️ this repository, and feel free to contribute if you're interested!
- 🍩 DonutChart: A circular chart for visualizing proportional data, with smooth animations and extensive customization options. Add a list of segments to represent categories, making it perfect for percentages or distribution comparisons.
- 📈 LineChart: A versatile chart for displaying trends and patterns, fully customizable with animated transitions. Supports multiple lines on the same chart, enabling clear and effective comparisons of different datasets on shared axes.
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 Chartopia dependency to your module:
- With version catalog, open
libs.versions.toml:
[versions]
chartopia = "2.0.0" // Check latest version
[libraries]
chartopia = { group = "io.github.tweener", name = "chartopia", version.ref = "chartopia" }Then in your module build.gradle.kts add:
dependencies {
implementation(libs.chartopia)
}- Without version catalog, in your module
build.gradle.ktsadd:
dependencies {
val chartopia_version = "2.0.0" // Check latest version
implementation("io.github.tweener:chartopia:$chartopia_version")
}The latest version is:
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:
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:
We love your input and welcome any contributions! Please read our contribution guidelines before submitting a pull request.
- Logo by Freeicons
Chartopia is licensed under the Apache-2.0.