Skip to content

Row Chart

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
RowChart(
    modifier = Modifier.fillMaxSize().padding(horizontal = 22.dp),
    data = remember {
        listOf(
            Bars(
                label = "Jan",
                values = listOf(
                    Bars.Data(label = "Linux", value = 50.0, color = Brush.verticalGradient(...),
                    Bars.Data(label = "Windows", value = 70.0, color = SolidColor(Color.Red)),
                ),
            ),
            Bars(
                label = "Feb",
                values = listOf(
                    Bars.Data(label = "Linux", value = 80.0, color = Brush.verticalGradient(...),
                    Bars.Data(label = "Windows", value = 60.0, color = SolidColor(Color.Red)),
                ),
            )
        ),
    },
    barProperties = BarProperties(
        radius = Bars.Data.Radius.Rectangle(topRight = 6.dp, topLeft = 6.dp),
        spacing = 3.dp,
        strokeWidth = 20.dp
    ),
    animationSpec = spring(
        dampingRatio = Spring.DampingRatioMediumBouncy,
        stiffness = Spring.StiffnessLow
    ),
)

Negative Values

You can set negative values for this chart and define max value and min value: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
RowChart(
    data = remember {
        listOf(
            Bars(
                label = "1",
                values = listOf(
                    Bars.Data(value = -40.0, color = Color.Blue)
                )
            ),
            Bars(
                label = "2",
                values = listOf(
                    Bars.Data(value = 50.0, color = Color.Blue)
                )
            ),
            ...
        )
    },
    maxValue = 75.0,
    minValue = -75.0
    ...
)

By default, max value is the highest value of given data, min value is 0 when there is no value under the zero in given data, otherwise if there is value under zero, min value will be (-maxValue)