Offers a library for creating various charts, currently supporting a customizable DonutChart with segments defined by angle, color, and progress. Future chart types planned.
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!
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:
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)
}build.gradle.kts add: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.
Chartopia is licensed under the Apache-2.0.
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!
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:
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)
}build.gradle.kts add: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.
Chartopia is licensed under the Apache-2.0.