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>")
}

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
    )
}

Try out the sample app.

• macOS/Linux

  ./gradlew :sample:composeApp:assembleDebug

• Windows

  .\gradlew.bat :sample:composeApp:assembleDebug

• macOS/Linux

  ./gradlew :sample:composeApp:run

• Windows

  .\gradlew.bat :sample:composeApp:run

• Wasm target (faster, modern browsers):
  • macOS/Linux

    ./gradlew :sample:composeApp:wasmJsBrowserDevelopmentRun

  • Windows

    .\gradlew.bat :sample:composeApp:wasmJsBrowserDevelopmentRun

• JS target (slower, supports older browsers):
  • macOS/Linux

    ./gradlew :sample:composeApp:jsBrowserDevelopmentRun

  • Windows

    .\gradlew.bat :sample:composeApp:jsBrowserDevelopmentRun

Open the /iosApp directory in Xcode and run it from there.