jaikeerthick / Composable-Graphs

✨ A very Minimal, Sleek and Powerful Graph library for Android built with Kotlin & Jetpack Compose
Apache License 2.0
191 stars 13 forks source link
graph jetpack-compose jetpack-compose-charts kotlin

Composable-Graphs

Kotlin CodeQL tag Jetpack Compose
jetc.dev

✨ A very Minimal, Sleek and Lightweight Graph library for Android using Jetpack Compose

Important ⚠️

Please migrate to v1.2.2 or above if you are using lower versions and refer the updated documentation below for the usage

Gradle Setup

Latest version:

In settings.gradle.kts, Add jitpack url

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        ...
        maven(url = "https://jitpack.io") // Add jitpack
    }
}

In build.gradle.kts, in dependencies block, add

implementation("com.github.jaikeerthick:Composable-Graphs:v{version}") //ex: v1.2.3

Graphs Available

  1. Line Graph
  2. Bar Graph
  3. Pie Chart
  4. Donut Chart (Normal, Progressive)

Preview

       


# Usage ### 1. Line Graph ```kotlin val data = listOf(LineData(x = "Sun", y = 200), LineData(x = "Mon", y = 40)) LineGraph( modifier = Modifier .padding(horizontal = 16.dp, vertical = 12.dp), data = data, onPointClick = { value: LineData -> // do something with value }, ) ``` ### 2. Bar Graph ```kotlin BarGraph( data = listOf(BarData(x = "22", y = 20), BarData(x = "23", y = 30)), ) ``` ### 3. Pie Chart ```kotlin // sample data val pieChartData = listOf( PieData(value = 130F, label = "HTC", color = Color.Green), PieData(value = 260F, label = "Apple", labelColor = Color.Blue), PieData(value = 500F, label = "Google"), ) // composable PieChart( modifier = Modifier .padding(vertical = 20.dp) .size(220.dp), data = pieChartData, onSliceClick = { pieData -> Toast.makeText(context, "${pieData.label}", Toast.LENGTH_SHORT).show() } ) ``` ### 4. Donut Chart Donut Chart supports 2 types of implementations: ```DonutChartType.Normal``` and ```DonutChartType.Progressive()``` ```kotlin // sample values val donutChartData = listOf( DonutData(value = 30F), DonutData(value = 60F), DonutData(value = 70F), DonutData(value = 50F), ) // composable DonutChart( modifier = Modifier .padding(vertical = 20.dp) .size(220.dp), data = donutChartData, type = DonutChartType.Progressive(), style = viewModel.donutChartStyle, ) ``` ## Styling Create stunning & colorful graphs with awesome styling🎨. Composable-Graphs supports various styling helpers: - Modifier (Yes, We heard you!💬) - Visibility - Colors - LabelPosition ``` kotlin val style = BarGraphStyle( visibility = BarGraphVisibility( isYAxisLabelVisible = true ), yAxisLabelPosition = LabelPosition.RIGHT ) val style2 = LineGraphStyle( visibility = LinearGraphVisibility( isYAxisLabelVisible = false, isCrossHairVisible = true ), colors = LinearGraphColors( lineColor = GraphAccent2, pointColor = GraphAccent2, clickHighlightColor = PointHighlight2, fillType = LineGraphFillType.Gradient( brush = Brush.verticalGradient(listOf(Color.Green, Color.Yellow)) ) ) ) ```` ## Work In Progress (v1.2.4) : ### Features - Show y values above points & bars (sticky) ### Interaction - Ability to turn off interaction on charts (disable clicks) ### Grid - Customize grid color - Ability to control visibility of x and y axis grids separately ### Highlight - Highlight Shape for Line Graph - Circle, HallowedCircle, Triangle, Square - Control size of the highlight

## Contributions are welcome ❤️