Simple Jetpack Compose Charts for multi-platform. Including Android, Web, Desktop.

Chen Pan

Last update: Jan 8, 2023

Related tags

Charts pie-chart charts jetpack compose bar-chart line-chart jetpack-compose

Overview

compose-charts

Simple Jetpack Compose Charts for multi-platform. Including Android, Web, Desktop.

Graph Effects

How to use?

1, show Pie Chart in Jetpack Compose:

@Composable
fun PieChartView() {
    PieChart(
        pieChartData = PieChartData(
            slices = listOf(
                PieChartData.Slice(
                    randomLength(),
                    randomColor()
                ),
                PieChartData.Slice(randomLength(), randomColor()),
                PieChartData.Slice(randomLength(), randomColor())
            )
        ),
        // Optional properties.
        modifier = Modifier.fillMaxSize(),
        animation = simpleChartAnimation(),
        sliceDrawer = SimpleSliceDrawer()
    )
}

2, show Line Chart in Jetpack Compose:

@Composable
fun LineChartView() {
    LineChart(
        lineChartData = LineChartData(
            points = listOf(
                Point(randomYValue(), "Line 1"),
                Point(randomYValue(), "Line 2"),
                Point(randomYValue(), "Line 3"),
                Point(randomYValue(), "Line 4"),
                Point(randomYValue(), "Line 5"),
                Point(randomYValue(), "Line 6"),
                Point(randomYValue(), "Line 7")
            )
        ),
        // Optional properties.
        modifier = Modifier.fillMaxSize(),
        animation = simpleChartAnimation(),
        pointDrawer = FilledCircularPointDrawer(),
        lineDrawer = SolidLineDrawer(),
        xAxisDrawer = SimpleXAxisDrawer(),
        yAxisDrawer = SimpleYAxisDrawer(),
        horizontalOffset = 5f
    )
}

3, show Bar Chart in Jetpack Compose:

@Composable
fun BarChartView() {
    BarChart(
        barChartData = BarChartData(
            bars = listOf(
                BarChartData.Bar(
                    label = "Bar 1",
                    value = randomValue(),
                    color = randomColor()
                ),
                BarChartData.Bar(
                    label = "Bar 2",
                    value = randomValue(),
                    color = randomColor()
                ),
                BarChartData.Bar(
                    label = "Bar 3",
                    value = randomValue(),
                    color = randomColor()
                ),
                BarChartData.Bar(
                    label = "Bar 4",
                    value = randomValue(),
                    color = randomColor()
                ),
            )
        ),
        // Optional properties.
        modifier = Modifier.fillMaxSize(),
        animation = simpleChartAnimation(),
        barDrawer = SimpleBarDrawer(),
        xAxisDrawer = SimpleXAxisDrawer(),
        yAxisDrawer = SimpleYAxisDrawer(),
        labelDrawer = SimpleValueDrawer()
    ) 
}

Stargazers over time

Github Stars Sparklines

Contributors

Comments

Feature request: custom BarChart max value

Right now, BarChart max y value is fixed on the highest data point. It would be nice to be able to set the top y value to some other value. I have some extra markers I need to put at certain Y values beyond the top bar and I'm struggling to make it render correctly.

opened by crizzis 4
Custom Labels for numeric values on Y-Axis

I would like to replace the labels on the y-axis in a bar diagram while keeping the original structure. In my use case, I display an amount of time per day of week, which is currently displayed in minutes, but I'd like to change the format to something like 2:30 instead of 150. Is there an option for that?
help wanted

opened by MarcelJurtz 2

@Preview is not working with PieChart

@Preview
@Composable
fun PieChartPreview() {
    Box(modifier = Modifier.height(150.dp)) {
        PieChart(
            pieChartData = PieChartData(
                slices = listOf(
                    PieChartData.Slice(25F, Color.Red),
                    PieChartData.Slice(45F, Color.Green),
                    PieChartData.Slice(20F, Color.Blue),
                ),
            ),
            sliceDrawer = SimpleSliceDrawer(sliceThickness = 100f)
        )
    }
}

I am using a Android Studio 2021.1.1 Patch 3, with Jetpack Compose 1.1.1 I can display the chart no problem on my device

bug

opened by crroush 2

compose chart for desktop in intelliJ IDEA

Please help me for add implementation for compose chart desktop in my project intelliJ. I want to add charts(bar & pie) to compose desktop project.
help wanted

opened by momeni1367 1
Typo in BarChart.kt

Hey, you have a typo in compose-charts/charts/src/main/java/me/bytebeats/views/charts/bar/BarChart.kt The classname now is BarChar instead of BarChart.

opened by MarcelJurtz 1
Suggesion: X value formatter

First of all, congrats for the API, it's awesome and works like a glance.

But just like in the Y axis there's a value formatter to customize how it's displayed, it'd be really useful to have the same on the X axis.

Thanks in advance, keep working! This is awesome 🚀
enhancement

opened by ArnyminerZ 1
Expose LineChartData's properties to public

Hi 👋 Firstly, I wanna say thank you for your helpful compose chart library. You saved me a lot of time to implement the LineChart on my current project.

I am using LineChart from your library however the design looks a bit different from yours, that's why I have do to some stuff to customize the chart. I need to determine the max and min values to draw the text label on top of the points. So I am asking for the solution that we could expose the properties to public rather than private/internal 😄

https://github.com/bytebeats/compose-charts/blob/b853af66e8b4ca71e76c8d056b90f34af9211ac7/charts/src/main/java/me/bytebeats/views/charts/line/LineChartData.kt#L19-L32

opened by hoangnguyen92dn 0

Simple Jetpack Compose Charts for multi-platform. Including Android, Web, Desktop.

Related tags

Overview

compose-charts

Graph Effects

How to use?

Stargazers over time

Github Stars Sparklines

Contributors

Comments

Feature request: custom BarChart max value

Custom Labels for numeric values on Y-Axis

@Preview is not working with PieChart

compose chart for desktop in intelliJ IDEA

Typo in BarChart.kt

Suggesion: X value formatter

Expose LineChartData's properties to public

Owner

Chen Pan

Android library for drawing Pie charts and Donut charts with the ability to customize almost anything in it.

An open source library used to draw charts in Android with Jetpack Compose with a simple and easy to use

AirQualityVisualizer is a demo application which is used to display demo for websocket continuous connection andhelps the user to visualize air quality according to city in a graphical format with charts, it is developed using Android Jetpack libraries and MVVM.

An android compose library with different Graphs and Charts

TChart - Simple and fast charts.

AnyChart Android Chart is an amazing data visualization library for easily creating interactive charts in Android apps. It runs on API 19+ (Android 4.4) and features dozens of built-in chart types.

Android Library to rapidly develop attractive and insightful charts in android applications.

Android Library to rapidly develop attractive and insightful charts in android applications.

Charts/graphs library for Android compatible with API 8+, several chart types with support for scaling, scrolling and animations

A powerful 🚀 Android chart view / graph view library, supporting line- bar- pie- radar- bubble- and candlestick charts as well as scaling, panning and animations.

An easy-to-use Android charts library with animation.

YBKChart is a library of 3D graphics charts for Android. 📊

Library for charts in android with animations

Donut is an Android library which helps you to easily create beautiful doughnut-like charts.

Straiberry Charts - An awesome Chart library for android

Arc Chart View (Draw Creative Statistic Arc Charts)

Jetpack-linear-chart - A simple way to draw linear chart using Jetpack Compose

Open-source native Android graph/chart framework includes line chart,stick chart,candlestick chart,pie chart,spider-web chart etc.