Create BarGraph in Jetpack Compose | Android Studio | Kotlin

You will learn to create a simple BarGraph using the power of Jetpack Compose and Kotlin

YouTube - Developer Chunk

How we will achieve it.

The bar you see in the graph is not else but a Box Layout and we have made its corners rounded that's it.

So as you can see we have multiple Boxes aligned in a Row() and the height of each box is according to the data.

I have used a List<FLoat> to store the values of the Graph. Here Float refers to a percentage like 0.5f which means 50%, also we will use List<String> here String refers to Alphabets A, B, C, D, E, and F as seen in the above image.

Here is how we will create the Bars

Here data is a Map<Float, String>

Creating Bar Graph

To make it simple to understand I have marked the Layouts in the Image of the Bar Graph

Let us start the Coding…

And finally, we will call the Compose Function

CustomChart(
    barValue = listOf(0.5f,0.6f,0.2f,0.7f,0.8f),
    xAxisScale = listOf("A", "B", "C", "D", "E"),
    total_amount = 1000
)

If you find my work helpful, you can show appreciation by buying me some coffee. Your support is greatly appreciated and will help me continue to create better articles, videos, projects, and much more. The link to do so: https://www.buymeacoffee.com/DeveloperChunk

That’s it, this is how you can create a Bar Graph using Jetpack Compose.

GitHub - developerchunk/CustomBarGraph-JetpackCompose