Line Chart
A line chart is a data visualization that uses data points connected by lines to show trends or changes over time. It’s ideal for displaying continuous data, such as stock prices, temperature, or sales growth.
| Type | Resource |
|---|---|
| Design | Figma |
| Mobile | Mobile Storybook |
| Code | Gitlab |
Usage
import id.co.biofarma.binduiandroid.components.linechart.* val dataSet1 = listOf(
DataSetLineChart(
label = "Data Line 1",
data = listOf(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)
)
)
LineChart(
id = "bio-line-chart",
dataSet = dataSet1,
modifier = Modifier.fillMaxSize(),
lineType = "line",
xAxisData = listOf("Jan", "Feb", "Mar", "Apr", "May", "Jun"),
legendPosition = "top",
lineShadow = true,
yAxisRange = 10
)Examples
lineType
Set the lineType to line or curved to determine line style of chart
legendOrientation
Set the legendOrientation to top, bottom, or none determine position of the legend.
lineShadow
Set the lineShadow to true or false to determine position of the legend.
Props
| Props | Required | Default | Type | description |
|---|---|---|---|---|
| id | false | biofarma-line-chart | String | A unique identifier for the Line Chart. |
| dataSet | false | listOf() | List<DataSetLineChart> | Set data to be rendered in the chart. |
| xAxisData | false | emptyList() | List<String> | Set x-axis data of the chart. |
| yAxisRange | false | 10 | Int | Set y-axis range of the chart. |
| lineType | false | line | line, curved | Set line type of the chart. |
| lineShadow | false | true | Boolean | Set line shadow the chart.. |
| legendOrientation | false | top | top, bottom, none | Legend position of the cart. |
| modifier | true | - | Modifier | Modifier for additional styling and layout modifications. |