Customizable interactive line charts with marker popups, multiple data-series and point support, consistent styling across builds, smooth rendering, and a sample app (including a WASM demo).
A Compose Multiplatform library for rendering a customizable line chart. With this library, line charts from across iOS, Android, Desktop, and Web builds of your app will be the same.
Try out the WASM build of the sample app at https://deanalvero.github.io/line-chart-cmp/.
Add the dependency to your build.gradle. Replace version with what is available here.
// In your shared module's build.gradle.kts
commonMain.dependencies {
implementation("io.github.deanalvero:line-chart-cmp:<version>")
}
Try out the sample app.
./gradlew :sample:composeApp:assembleDebug
.\gradlew.bat :sample:composeApp:assembleDebug
./gradlew :sample:composeApp:run
.\gradlew.bat :sample:composeApp:run
./gradlew :sample:composeApp:wasmJsBrowserDevelopmentRun
.\gradlew.bat :sample:composeApp:wasmJsBrowserDevelopmentRun
Open the /iosApp directory in Xcode and run it from there.
import io.github.deanalvero.chart.line.LineChart
import io.github.deanalvero.chart.line.data.LineData
import io.github.deanalvero.chart.line.marker.Marker
import io.github.deanalvero.chart.line.point.Point
@Composable
fun SimpleLineChart() {
val dataPoints = listOf(
Point(x = 0f, y = 10f),
Point(x = 1f, y = 25f),
Point(x = 2f, y = 15f),
Point(x = 3f, y = 30f),
Point(x = 4f, y = 22f)
)
LineChart(
modifier = Modifier
.fillMaxWidth()
.height(300.dp),
data = listOf(
LineData(points = dataPoints, label = "Line 1")
),
marker = Marker(
content = { markerData ->
Text(text = "${markerData.point.x}, ${markerData.point.y}")
}
),
isInteractable = true
)
}
./gradlew :sample:composeApp:jsBrowserDevelopmentRun
.\gradlew.bat :sample:composeApp:jsBrowserDevelopmentRun
Surfaced from shared tags and platforms — no rankings paid for.