Scatter Chart

A scatter chart (or scatter plot) is a data visualization component used to represent the relationship between two continuous variables.

TypeResource
DesignFigma
MobileMobile Storybook
CodeGitlab

Scatter Chart Preview

Usage

  import id.co.biofarma.binduiandroid.components.scatterchart.*
    val set1 = ScatterData(
          label = "Data 1",
          shape = "circle",
          x = listOf(1.23f, 2.45f, 3.67f, 4.89f, 5.12f, 6.34f, 7.56f, 8.78f, 9.90f, 0.45f, 2.12f, 3.54f, 4.76f, 5.98f, 6.21f, 7.43f, 8.65f, 9.87f, 0.21f, 1.43f),
          y = listOf(120.5f, 230.4f, 340.6f, 450.8f, 560.1f, 670.3f, 780.5f, 890.7f, 990.0f, 100.4f, 210.2f, 320.3f, 430.5f, 540.7f, 650.9f, 760.1f, 870.2f, 980.3f, 90.5f, 200.6f)
      )
 
      Column(
          modifier = Modifier
          .fillMaxSize(),
          horizontalAlignment = Alignment.CenterHorizontally,
          verticalArrangement = Arrangement.Center
      ) {
      ScatterChart(
          legendOrientation = ChartLegendOrientation.HORIZONTAL_TOP.Value,
          xAxisMin = 0f,
          xAxisMax = 10f,
          yAxisMin = 0f,
          yAxisMax = 1000f,
          scatterData = listOf(set1)
      )

Examples

scatterData

Set the scatterData to display on the screen

Scatter Chart scatterData

legendOrientation

Set the legendOrientation to ChartLegendOrientation.HORIZONTAL_TOP.Value, ChartLegendOrientation.HORIZONTAL_BOTTOM.Value, ChartLegendOrientation.VERTICAL_RIGHT.Value, or ChartLegendOrientation.VERTICAL_LEFT.Value determine position of the legend.

Scatter Chart legendOrientation


Props

PropsRequiredDefaultTypedescription
idfalse-StringA unique identifier for the Scatter Chart.
legendOrientationfalseChartLegendOrientation.HORIZONTAL_BOTTOM.valueChartLegendOrientationLegend position of the cart.
xAxisMinfalse0fFloatSet minimum x-axis of the chart.
xAxisMaxfalse0fFloatSet maximum x-axis of the chart..
yAxisMinfalse0fFloatSet minimum y-axis of the chart..
yAxisMinfalse0fFloatSet maximum y-axis of the chart..
scatterDatatrue-List<ScatterData>Scatter data to be displayed on the chart.
BIND © Biofarma Innovate Next-level Design .