In this jetpack compose tutorial example, we will see how to create Bar Chart using Jetpack Compose. Jetpack Compose is a cutting-edge toolkit for creating native Android user interfaces.It simplifies and accelerates UI development on Android by using minimal code, powerful tools, and explicit Kotlin APIs. Compose supports material design ideas. Many of its UI elements are built with material design in mind right out of the box.
A bar chart, also known as a bar graph, is a type of chart or graph that uses rectangular bars with heights or lengths proportional to the values they represent to display categorical data.
Implementation
Step 1. Create a new Project in Android Studio.
File > New > New Project > Select (Empty Compose Activity) > Next > Enter Name (BarChartJetpack) > FINISH. |
After creating the new project, Android Studio starts Gradle and builds your project, which may take a few seconds.
Step 2. At first, Open MainActivity.kt file
First we will create a composable function of BarChart() in which we use Canvas for display bar chart where we define point list, animate the graph, draw lines, rectangle and so on..
@Composable val context = LocalContext.current Canvas( for (p in point) { |
Now we will create a private function identifyClickItem() which will help to get position by clicking on chart whether its a no.(1,2,3...) or -1.
private fun getPositionFromAngle( |
Finally we will call our BarChart() function inside onCreate() function, we will use scaffold and TopAppBar for display the title in action bar.
class MainActivity : ComponentActivity() { |
Complete example code create Bar chart using Jetpack Compose
import android.graphics.Point class MainActivity : ComponentActivity() { private fun identifyCLickItem( @Composable val context = LocalContext.current Canvas( for (p in point) { |
Step 3. Add the following colors to your Color.kt file
import androidx.compose.ui.graphics.Color
val Purple200 = Color(0xFFBB86FC) |
Step 4. Run the app in your emulator or real device and you will get the following output:
OUTPUT
Tap on Bar
Conclusion: In this article we have covered how to create Bar Chart using JetPack Compose.
Jetpack compose Chart Examples
Create Pie Chart with Jetpack compose
Create Line Chart with Jetpack compose
Article Contributed By :
|
|
|
|
1502 Views |