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).

TypeResource
DesignFigma
MobileMobile Storybook
CodeGitlab

Barline Chart Preview

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
BarLineChartVariantvalue
PRIMARY"primary"
SECONDARY"secondary"

PRIMARY variant: Barline Chart Primary Preview

SECONDARY variant: Barline Chart Secondary Preview

Legend Orientation

Set the legendOrientation props to the available ChartLegendOrientation enum class values:

import id.co.biofarma.binduiandroid.model.enums.ChartLegendOrientation
ChartLegendOrientationvalue
VERTICAL_LEFT"vertical-left"
VERTICAL_RIGHT"vertical-right"
HORIZONTAL_TOP"horizontal-top"
HORIZONTAL_BOTTOM"horizontal-bottom"

VERTICAL_LEFT Legend Orientation: Barline VERTICAL_LEFT Legend Orientation Preview

VERTICAL_RIGHT Legend Orientation: Barline VERTICAL_RIGHT Legend Orientation Preview

HORIZONTAL_TOP Legend Orientation: Barline HORIZONTAL_TOP Legend Orientation Preview

HORIZONTAL_BOTTOM Legend Orientation: Barline HORIZONTAL_BOTTOM Legend Orientation


Props

PropsRequiredDefaultTypedescription
idfalse-StringA unique identifier for the barline chart.
modifierfalseModifierModifierTo decorate or add behavior to barline container
dataSettrueBarLineChartDataSetThe dataset to be displayed at the chart
showLegendfalsetrueBooleanCondition to show / hide barline legend
xAxisLabelsfalseList<String>The barline x axis labels
variantfalseBarLineChartVariant.PRIMARY.valueStringThe barline chart variant
legendOrientationfalseChartLegendOrientation.HORIZONTAL_BOTTOM.valueStringThe barline chart legend position
BIND © Biofarma Innovate Next-level Design .