jaikeerthick / Composable-Graphs

✨ A very Minimal, Sleek and Powerful Graph library for Android built with Kotlin & Jetpack Compose

Composable-Graphs

✨ 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

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

BarGraph(
    data = listOf(BarData(x = "22", y = 20), BarData(x = "23", y = 30)),
)

3. Pie Chart

// 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()

// 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

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 ❤️