Zoomable and Draggable Graphs based-on Jetpack Compose. Supports Android & iOS, Web and Desktop.

Overview

compose-graphs

GitHub latest commit GitHub contributors GitHub issues Open Source? Yes! GitHub forks GitHub stars GitHub watchers

Zoomable and Draggable Graphs based-on Jetpack Compose. Supports Android & iOS, Web and Desktop.

Features

  • Full customization of the various parts of the graph (like the point, line between the points, highlight when selected, the values in x-axis and y-axis, etc...)
  • Supports scrolling, zooming and touch drag selection

How to use

Just add the LineGraph composable and pass it a Plot with all your configuration and customisation. Please take a look at the app app to see the various customisations available. Almost every aspect of the graph is customisable. You can even override the default draw implementations and can draw a Rectangle instead of a Circle, etc. The below code renders the Orange graph that you see in the above screenshots.

@Composable
fun LineGraph1(lines: List<List<PointF>>) {
    LineGraph(
        plot = Plot(
            lines = listOf(
                Plot.Line(
                    points = lines[0],
                    connection = Plot.Connection(LightGreen600, 2.dp),
                    intersection = Plot.Intersection(LightGreen600, 5.dp),
                    highlight = Plot.Highlight(Green900, 5.dp),
                    underline = Plot.Underline(LightGreen600, 0.3F)
                ),
                Plot.Line(
                    points = lines[1], connection = Plot.Connection(Color.LightGray, 2.dp),
                    intersection = Plot.Intersection { center, point ->
                        val px = 2.dp.toPx()
                        val topStart = Offset(center.x - px, center.y - px)
                        drawRect(Color.LightGray, topLeft = topStart, Size(px * 2, px * 2))
                    },
                ),
            ),
            selection = Plot.Selection(
                highlight = Plot.Connection(
                    Green900, strokeWidth = 2.dp, pathEffect = PathEffect.dashPathEffect(
                        floatArrayOf(40F, 20F)
                    )
                )
            ),
        ),
        modifier = Modifier
            .fillMaxWidth()
            .height(180.dp)
    )
}

Stargazers over time

Stargazers over time

Github Stars Sparklines

Sparkline

Contributors

Contributors over time

You might also like...
A Sudoku game for Android & Desktop written with Jetpack Compose Multiplatform
A Sudoku game for Android & Desktop written with Jetpack Compose Multiplatform

πŸš€ Compose Arcade A sample Kotlin Multiplatform Compose Sudoku app for Android & Desktop. Most code is shared between Android & Desktop using Kotlin M

Welcome Fruit Ninja πŸ₯  on Jetpack Compose Desktop πŸš€, using Canvas API 🎨
Welcome Fruit Ninja πŸ₯ on Jetpack Compose Desktop πŸš€, using Canvas API 🎨

Compose-Fruit-Ninja πŸ₯ Welcome Fruit Ninja on Jetpack Compose Desktop πŸš€ , using Canvas API 🎨 Featured on jetc-dev How to Run From gradle tab from ri

Alien invasion πŸ‘Ύ gane is back! this time specially on Jetpack Compose Desktop πŸš€, using Canvas API 🎨
Alien invasion πŸ‘Ύ gane is back! this time specially on Jetpack Compose Desktop πŸš€, using Canvas API 🎨

Compose Space-Invaders πŸ‘Ύ Alien invasion πŸ‘Ύ is back! this time specially on Jetpack Compose Desktop πŸš€ , using Canvas API 🎨 Featured on Compose Diges

Jetpack Compose Desktop Galaxy Example
Jetpack Compose Desktop Galaxy Example

Compose-StarWars Compose-StarWar 3D Space particle System build using Canvas API Jetpack Compose Desktop πŸš€ How to Run From gradle tab from right-hand

A Slack demo app for desktop using Jetpack Compose UI toolkit
A Slack demo app for desktop using Jetpack Compose UI toolkit

ComposeSlackDesktop A Slack demo app for desktop using Jetpack Compose UI toolkit Demo Jetpack Compose Jetpack Compose is Android’s modern toolkit (no

Spotify Demo Desktop app using Jetpack compose
Spotify Demo Desktop app using Jetpack compose

Compose Spotify Desktop Declarative UI A Spotify demo app for desktop using Jetpack Compose UI toolkit Demo Home Search & Detail Jetpack Compose Jetpa

Schedule sample to play with Jetpack Compose Desktop
Schedule sample to play with Jetpack Compose Desktop

Schedule sample to play with Jetpack Compose Desktop

Recreated iOS Calculator UI and functionality for android with Jetpack Compose
Recreated iOS Calculator UI and functionality for android with Jetpack Compose

Compose-iOS-Calculator Recreated iOS Calculator UI and functionality for android with Jetpack Compose Currently using Regex to do the math, but when I

Cdalf - Compose Desktop Android-like Framework

Compose Desktop Android-like Framework Simple framework/library designed to make

Owner
Chen Pan
New Generation Peasant-LABOUR.
Chen Pan
Zoom Modifiers, zoomable image and layouts with limit pan bounds, fling and moving back to valid bounds and callbacks that return current transformation or visible image section

Zoom Modifiers, zoomable image and layouts with limit pan bounds, fling and moving back to valid bounds and callbacks that return current transformation or visible image section

Smart Tool Factory 20 Dec 13, 2022
A desktop code editor app using Jetpack Compose for Desktop and IntelliJ Platform

Compose Code Editor A desktop code editor app using Jetpack Compose for Desktop and IntelliJ Platform. Project Structure The code is contained in the

Alex 73 Dec 19, 2022
Test-compose-for-desktop - Hello World in Compose for Desktop

Testing Run from command line: ./gradlew run Regular build: ./gradlew packageUb

Sebastian 3 Sep 20, 2022
Snake-compose-for-desktop - Snake Game - implemented using Compose for Desktop

A Snake game, built with Compose for Desktop snake-compose-for-desktop is my imp

gnu 5 Feb 17, 2022
Exercising Compose for Desktop and Compose for Web (Canvas)

Compose Counting Grid A simple application to check Compose for Desktop and Compose for Web (Canvas) drawing speeds when drawing grids (or tables) wit

null 6 Nov 11, 2022
Puck - Make composables draggable with kotlin

Puck Make Composables Draggable. Including in your project Gradle Add below code

Shivam Dhuria 44 Dec 10, 2022
πŸ’» A cross-platform desktop application to identify libraries used inside an android application. Made possible by Compose Desktop ⚑

?? stackzy A desktop app to analyse APK. Built using Compose desktop ✨ Demo Watch demo ??️ Usage Show usage ?? Install Platform Download Status Linux

theapache64 876 Dec 24, 2022
Jetpack Compose Boids | Flocking Insect 🐜. bird or Fish simulation using Jetpack Compose Desktop πŸš€, using Canvas API 🎨

?? ?? ?? Compose flocking Ants(boids) ?? ?? ?? Jetpack compose Boids | Flocking Insect. bird or Fish simulation using Jetpack Compose Desktop ?? , usi

Chetan Gupta 38 Sep 25, 2022
A Kotlin library to use Jetpack Compose in Android and iOS. Allow to write UI for both in Kotin. Still experimental as many compose features are not yet available.

Multiplatform Compose A Kotlin library to use Jetpack Compose in Android and iOS. Allow to write UI for both in Kotin. Still experimental as many comp

ClΓ©ment Beffa 548 Jan 7, 2023
A flexible theme provider for Jetpack Compose. Supports dynamic theme changes and saving theme preference.

JetTheme JetTheme is a flexible theme provider for Jetpack Compose. Change the theme and recompose the UI dynamically. Save theme preference to local

Mao Yufeng 48 Oct 19, 2022