dautovicharis/charts

📈 Charts made with Jetpack Compose – Multiplatform support: 📱🌐💻

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

charts's Issues

Add support to combine different kind of Charts

or is it already possible.

btw. I love the charts!

Investigate multipatform support

Explore the feasibility of adding multiplatform support.

Add Bar Chart

Implement a bar chart based on: https://github.com/AppPear/ChartView

Implement charts zoom and scroll

Charts don't look good when we have a large dataset.

Improve bar chart animation

The current animation for a simple bar chart doesn't look good. The expected behavior is that all animations should start at the same time, not one by one.

Add Pie Chart

Implement a pie chart based on: https://github.com/AppPear/ChartView

Add axes support

It's look like the current graph does not support displaying axes around the graph.

See my screen.

Is this feature missing on purpose ?

Add Line Chart

Implement a line chart based on: https://github.com/AppPear/ChartView

Add support to customize (point icon, y value range, show x&y axis, rtl directions)

Multi colored Bars

Add support for multi colored bars in a bar chart

Add maven publish

Add multi line chart

Extend the existing line chart to accept an array of ChartData objects.

Drag point does not stick to the line

When dragging on the multi-line chart, the drag point does not stay on the curve, instead it seemingly follows a linear path.

Create contributions guidelines

• PR

  • format
  • destination

• Branch

  • naming convention

• Commit messages

  • naming convention

Add stacked bar chart

Implement stacked bar chart.

Publish library to MavenCentral

The charts consume all scroll events

If the chart takes up a significant amount of a scrolling container, the user cannot scroll down because even though the chart only cares about the horizontal dragging, it consumes the vertical gestures as well.
To test it, open the app, navigate to the multi-line chart screen, rotate your device to landscape and try scrolling down naturally (so basically anywhere in the container).

Turn off animations when running in @Preview

Currently all charts are blank in Compose previews, because the content needs to be animated.
This feature is unnecessary in preview and make the charts unusable in that context.

Great library by the way, the first one with good API and documentation.

Add multiplatform support

Jetpack compose Multiplatform support.

Initially, we'll focus on supporting iOS, but the plan is to extend this to desktop and web later.