This is a simple chart library built with Jetpack Compose.

Inspired by: https://github.com/AppPear/ChartView

Documentation

Public API: https://dautovicharis.github.io/Charts/2.0.0-SNAPSHOT/

Features

• Animations
• M3 theme support
• Customizable chart styles
• Various data set support
• Multiplatform: Android, iOS, Desktop, Web.

Dependency

    commonMain.dependencies {
        implementation("io.github.dautovicharis:charts:<version>")
    }

    dependencyResolutionManagement {
        repositories {
            mavenCentral()
        }
    }

Dependencies by platform

https://central.sonatype.com/search?q=io.github.dautovicharis.charts

    implementation("io.github.dautovicharis:charts-iosx64:<version>")
    implementation("io.github.dautovicharis:charts-iosarm64:<version>")
    implementation("io.github.dautovicharis:charts-jvm:<version>")
    implementation("io.github.dautovicharis:charts-js:<version>")
    implementation("io.github.dautovicharis:charts-android:<version>")

Snapshots

    commonMain.dependencies {
        implementation("io.github.dautovicharis:charts:<snapshot-version>")
    }

    dependencyResolutionManagement {
        repositories {
            maven("https://s01.oss.sonatype.org/content/repositories/snapshots")
        }
    }

Pie chart

🎨 Pie chart style options

Pie (default)

@Composable
private fun AddDefaultPieChart() {
    val dataSet = ChartDataSet(
        items = listOf(8.0f, 23.0f, 54.0f, 32.0f, 12.0f, 37.0f, 7.0f, 23.0f, 43.0f),
        title = stringResource(id = R.string.pie_chart),
        postfix = " °C"
    )

    PieChartView(dataSet = dataSet)
}

Pie (custom)

@Composable
private fun AddCustomPieChart() {
    val pieColors = listOf(
        ColorPalette.DataColor.navyBlue,
        ColorPalette.DataColor.darkBlue,
        ColorPalette.DataColor.deepPurple,
        ColorPalette.DataColor.magenta,
        ColorPalette.DataColor.darkPink,
        ColorPalette.DataColor.coral,
        ColorPalette.DataColor.orange,
        ColorPalette.DataColor.yellow
    )

    val style = PieChartDefaults.style(
        borderColor = Color.White,
        donutPercentage = 40f,
        borderWidth = 6f,
        pieColors = pieColors,
        chartViewStyle = ChartViewDemoStyle.custom(width = 200.dp)
    )
    
    val dataSet = ChartDataSet(
        items = listOf(60.0f, 25f, 15f, 14f, 30f, 30f, 20f, 30f),
        title = stringResource(id = R.string.pie_chart),
        postfix = " °C"
    )

    PieChartView(dataSet = dataSet, style = style)
}

Line chart

🎨 Line chart style options

Line (default)

@Composable
private fun AddDefaultLineChart() {
    val dataSet = ChartDataSet(
        items = listOf(
            8f, 23f, 54f, 32f, 12f, 37f, 7f, 23f, 43f
        ),
        title = stringResource(id = R.string.line_chart)
    )
    LineChartView(dataSet = dataSet)
}

Line (custom)

@Composable
private fun AddCustomLineChart() {
    val style = LineChartDefaults.style(
        lineColor = ColorPalette.DataColor.deepPurple,
        pointColor = ColorPalette.DataColor.magenta,
        pointSize = 9f,
        bezier = false,
        dragPointColor = ColorPalette.DataColor.deepPurple,
        dragPointVisible = false,
        dragPointSize = 8f,
        dragActivePointSize = 15f,
        chartViewStyle = ChartViewDemoStyle.custom(width = 200.dp)
    )
    
    val dataSet = ChartDataSet(
        items = listOf(10f, 100f, 20f, 50f, 150f, 70f, 10f, 20f, 40f),
        title = stringResource(id = R.string.line_chart)
    )

    LineChartView(dataSet = dataSet, style = style)
}

Multiline chart

🎨 Multiline chart style options

Multiline (default)

@Composable
private fun AddDefaultMultiLineChart() {
    val items = listOf(
        "Cherry St." to listOf(26000.68f, 28000.34f, 32000.57f, 45000.57f),
        "Strawberry Mall" to listOf(15261.68f, 17810.34f, 40000.57f, 85000f),
        "Lime Av." to listOf(4000.87f, 5000.58f, 30245.81f, 135000.58f),
        "Apple Rd." to listOf(1000.87f, 9000.58f, 16544.81f, 100444.87f)
    )

    val dataSet = MultiChartDataSet(
        items = items,
        prefix = "$",
        categories = listOf("Jan", "Feb", "Mar", "Apr"),
        title = stringResource(id = R.string.line_chart)
    )

    LineChartView(
        dataSet = dataSet, style = MultiLineDemoStyle.default()
    )
}

Multiline (custom)

@Composable
private fun AddCustomMultiLineChart() {
    val lineColors = listOf(ColorPalette.DataColor.navyBlue, ColorPalette.DataColor.darkBlue, ColorPalette.DataColor.deepPurple, ColorPalette.DataColor.magenta)
    val style = LineChartDefaults.style(
        lineColors = lineColors,
        dragPointVisible = false,
        pointVisible = true,
        pointColor = ColorPalette.DataColor.magenta,
        dragPointColor = ColorPalette.DataColor.deepPurple,
        chartViewStyle = ChartViewDemoStyle.custom()
    )
    
    val items = listOf(
        "Cherry St." to listOf(26000.68f, 28000.34f, 32000.57f, 45000.57f),
        "Strawberry Mall" to listOf(15261.68f, 17810.34f, 40000.57f, 85000f),
        "Lime Av." to listOf(4000.87f, 5000.58f, 30245.81f, 135000.58f),
        "Apple Rd." to listOf(1000.87f, 9000.58f, 16544.81f, 100444.87f)
    )

    val dataSet = MultiChartDataSet(
        items = items,
        prefix = "$",
        categories = listOf("Jan", "Feb", "Mar", "Apr"),
        title = stringResource(id = R.string.line_chart)
    )

    LineChartView(dataSet = dataSet, style = style)
}

Bar

🎨 Bar chart style options

Bar (default)

@Composable
private fun AddDefaultBarChart() {
    BarChartView(
        dataSet = ChartDataSet(
            items = listOf(100f, 50f, 5f, 60f, -50f, 50f, 60f),
            title = stringResource(id = R.string.bar_chart)
        )
    )
}

Bar (custom)

@Composable
private fun AddCustomBarChart() {
    val style = BarChartDefaults.style(
        barColor = ColorPalette.DataColor.deepPurple,
        space = 12.dp,
        chartViewStyle = ChartViewDemoStyle.custom(width = 200.dp)
    )

    BarChartView(
        dataSet = ChartDataSet(
            items = listOf(100f, 50f, 5f, 60f, 1f, 30f, 50f, 35f, 50f, -100f),
            title = stringResource(id = R.string.bar_chart)
        ),
        style = style
    )
}

Stacked Bar

🎨 Stacked bar chart style options

Stacked Bar (default)

@Composable
private fun AddDefaultStackedBarChart() {
    val items = listOf(
        "Cherry St." to listOf(8261.68f, 8810.34f, 30000.57f),
        "Strawberry Mall" to listOf(8261.68f, 8810.34f, 30000.57f),
        "Lime Av." to listOf(1500.87f, 2765.58f, 33245.81f),
        "Apple Rd." to listOf(5444.87f, 233.58f, 67544.81f)
    )

    val dataSet = MultiChartDataSet(
        items = items,
        prefix = "$",
        categories = listOf("Jan", "Feb", "Mar"),
        title = stringResource(id = R.string.bar_stacked_chart)
    )

    StackedBarChartView(dataSet = dataSet)
}

Stacked Bar (custom)

@Composable
private fun AddCustomStackedBarChart() {
    val colors = listOf(
        ColorPalette.DataColor.navyBlue,ColorPalette.DataColor.darkBlue,ColorPalette.DataColor.deepPurple
    )
    val style =  StackedBarChartDefaults.style(
        barColors = colors,
        chartViewStyle = ChartViewDemoStyle.custom(width = 240.dp)
    )
    
    val items = listOf(
        "Cherry St." to listOf(8261.68f, 8810.34f, 30000.57f),
        "Strawberry Mall" to listOf(8261.68f, 8810.34f, 30000.57f),
        "Lime Av." to listOf(1500.87f, 2765.58f, 33245.81f),
        "Apple Rd." to listOf(5444.87f, 233.58f, 67544.81f)
    )

    val dataSet = MultiChartDataSet(
        items = items,
        prefix = "$",
        categories = listOf("Jan", "Feb", "Mar"),
        title = stringResource(id = R.string.bar_stacked_chart)
    )

    StackedBarChartView(dataSet = dataSet, style = style)
}

Examples

• Pie Chart
• Line Chart
• Multiline Chart
• Bar Chart
• Stacked Bar Chart

Demo app

Contributions

🌟 Thank you for your time! Before you start working on code, please create a new issue.

Contributing guidelines