Barline Chart
A barline chart component in a UI combines bar and line charts to display different types of data on the same graph. It is especially useful for comparing data trends over time (with the line) alongside discrete data points (with the bars).
Type | Resource |
---|---|
Design | Figma |
Mobile | Mobile Storybook |
Code | Gitlab |
Usage
import id.co.biofarma.binduiandroid.components.barlinechart.BarLineChart
import id.co.biofarma.binduiandroid.components.barlinechart.BarLineChartDataSet
import id.co.biofarma.binduiandroid.components.barlinechart.DataSetBarChart
import id.co.biofarma.binduiandroid.components.barlinechart.DataSetLineChart
val barData5 = listOf(
DataSetBarChart(
label = "Bar Data",
data = listOf(15.0, 30.0, 55.0, 40.0, 50.0)
)
)
val lineData5 = listOf(
DataSetLineChart(
label = "Line Data",
data = listOf(27.0, 42.0, 22.0, 57.0, 52.0)
)
)
val dataPoints = BarLineChartDataSet(
barData = barData5,
lineData = lineData5
)
val months = listOf("Jan", "Feb", "Mar", "Apr", "May")
Variant
Set the variant
props to the available BarLineChartVariant
enum class values:
import id.co.biofarma.binduiandroid.model.enums.BarLineChartVariant
BarLineChartVariant | value |
---|---|
PRIMARY | "primary" |
SECONDARY | "secondary" |
PRIMARY
variant:
SECONDARY
variant:
Legend Orientation
Set the legendOrientation
props to the available ChartLegendOrientation
enum class values:
import id.co.biofarma.binduiandroid.model.enums.ChartLegendOrientation
ChartLegendOrientation | value |
---|---|
VERTICAL_LEFT | "vertical-left" |
VERTICAL_RIGHT | "vertical-right" |
HORIZONTAL_TOP | "horizontal-top" |
HORIZONTAL_BOTTOM | "horizontal-bottom" |
VERTICAL_LEFT
Legend Orientation:
VERTICAL_RIGHT
Legend Orientation:
HORIZONTAL_TOP
Legend Orientation:
HORIZONTAL_BOTTOM
Legend Orientation:
Props
Props | Required | Default | Type | description |
---|---|---|---|---|
id | false | - | String | A unique identifier for the barline chart. |
modifier | false | Modifier | Modifier | To decorate or add behavior to barline container |
dataSet | true | BarLineChartDataSet | The dataset to be displayed at the chart | |
showLegend | false | true | Boolean | Condition to show / hide barline legend |
xAxisLabels | false | List<String> | The barline x axis labels | |
variant | false | BarLineChartVariant.PRIMARY.value | String | The barline chart variant |
legendOrientation | false | ChartLegendOrientation.HORIZONTAL_BOTTOM.value | String | The barline chart legend position |