Bar Chart
A bar chart is a chart that presents categorical data with rectangular bars with heights or lengths proportional to the values that they represent. It is a very common chart type used in data visualization.
| Type | Resource |
|---|---|
| Design | Figma |
| Web | Web Storybook |
| Code | Gitlab |
Usage
import id.co.biofarma.binduiandroid.components.barchart.BarChartval xAxisLabels = listOf("Jan", "Feb", "Mar", "Apr", "Mei")
val sampleData = listOf(
BarChartDataset(
label = "Data 1",
values = listOf(50f, 55f, 30f, 15f, 44f),
color = colors.random().hashCode()
),
BarChartDataset(
label = "Data 2",
values = listOf(35f, 66f, 50f, 22f, 23f),
color = colors.random().hashCode()
),
BarChartDataset(
label = "Data 3",
values = listOf(24f, 15f, 42f, 34f, 30f),
color = colors.random().hashCode()
),
BarChartDataset(
label = "Data 4",
values = listOf(55f, 90f, 85f, 75f, 98f),
color = colors.random().hashCode()
),
BarChartDataset(
label = "Data 5",
values = listOf(10f, 15f, 13f, 11f, 15f),
color = colors.random().hashCode()
),
)
val data = when (dataset) {
1 -> sampleData.take(1)
2 -> sampleData.take(2)
3 -> sampleData.take(3)
4 -> sampleData.take(4)
else -> sampleData.take(5)
}
BarChart(
xAxisLabels = xAxisLabels,
dataset = data,
onBarClick = {x, y ->
Toast.makeText(context, "Data: $y in $x", Toast.LENGTH_SHORT).show()
},
legendPosition = legendPosition
)Examples
Dataset
The number of datasets can affect the shape of the bar chart
Legend Position
Use legendPosition parameter to set the position of the legend. There is two options: top and bottom.
Props
| Props | Required | Default | Type | description |
|---|---|---|---|---|
| id | false | - | String | A unique identifier for the pie chart. |
| legendPosition | false | - | top bottom | Locations of the legend. |
| xAxisLabels | false | - | List<String> | The labels corresponding to the dataset. |
| dataset | false | - | List<BarChartDataset> | The values corresponding to the dataset. |