Set bar-color based on y-value

[hhpettersen]

Hello, I'm wondering if it's possible to customize the color of individual bars in a column chart based on their y-values? For instance, can a bar's color change dynamically according to its y-value? The way I have managed to do this for now is to create separate datasets for each color I want to represent. Is this maybe the intended way?

[patrickmichalik]

Hello! The approach described is what we currently recommend. We’ll be looking into adding more flexibility in this respect, so customization is possible on a column-by-column basis.

[kevincianfarini]

@patrickmichalik I've tried your suggestion of having a series per color, and it's got a few sticking points. Namely, since the x-indexes are messed up in the series, the horizontal placer doesn't place items appropriately (I think). This is what I've got so far:

val modelProducer = remember { CartesianChartModelProducer.build() }
LaunchedEffect(values) {
    modelProducer.tryRunTransaction {
        columnSeries {
            // TODO(kcianfarini) Vico doesn't currently support styling individual columns of
            //                   a column series right now. You can only style the entire
            //                   series. To work around this, we create a new series for every
            //                   data point. This should be removed in the future without breaking
            //                   callers of this function when it's possible.
            //                   See: https://github.com/patrykandpatrick/vico/discussions/471
            //                   for more information.
            values.forEach { value ->
                series(transformToYAxisValue(value))
            }
        }
    }
}
val columns = rememberColumnCartesianLayer(
    columns = values.map { value ->
        rememberLineComponent(
            color = transformToBarColor(value),
            thickness = barWidth,
            shape = Shapes.roundedCornerShape(2.dp),
        )
    },
    spacing = 2.dp,
)
CartesianChartHost(
    chart = rememberCartesianChart(
        columns,
        startAxis = rememberStartAxis(
            axis = rememberAxisLineComponent(color = axisColor, thickness = axisStrokeWidth),
            label = rememberTextComponent(
                color = axisLabelTextColor,
                textSize = axisLabelTextSize,
                typeface = axisLabelTextStyle.toGraphicsTypeFace(),
            ),
            valueFormatter = { value, _, _ -> transformToYAxisLabel(value) },
        ),
        bottomAxis = rememberBottomAxis(
            axis = rememberAxisLineComponent(color = axisColor, thickness = axisStrokeWidth),
            label = rememberTextComponent(
                color = axisLabelTextColor,
                textSize = axisLabelTextSize,
                typeface = axisLabelTextStyle.toGraphicsTypeFace(),
            ),
            itemPlacer = AxisItemPlacer.Horizontal.default(spacing = xAxisLabelSpacing),
            valueFormatter = { index, _, _ ->
                transformToXAxisLabel(values[index.toInt()])
            }
        )
    ),
    modifier = modifier,
    modelProducer = modelProducer,
    scrollState = rememberVicoScrollState(scrollEnabled = false)
)

Graphically, this works okay. You'll notice though that the x-axis values are improperly placed and mostly missing, though.

I tried remedying this by manually adding x indexes to each series, but that results in this very strange result. Notice that the x-axis is mostly correct in this scenario.

LaunchedEffect(values) {
    modelProducer.tryRunTransaction {
        columnSeries {
            // TODO(kcianfarini) Vico doesn't currently support styling individual columns of
            //                   a column series right now. You can only style the entire
            //                   series. To work around this, we create a new series for every
            //                   data point. This should be removed in the future without breaking
            //                   callers of this function when it's possible.
            //                   See: https://github.com/patrykandpatrick/vico/discussions/471
            //                   for more information.
            values.forEachIndexed { index, value ->
                series(listOf(index), listOf(transformToYAxisValue(value)))
            }
        }
    }
}

Am I doing anything obviously wrong?

[patrickmichalik]

@kevincianfarini, could you try using the second approach (that is, the one in which the x values are explicitly specified) and adding the following to the rememberColumnCartesianLayer call?

mergeMode = { ColumnCartesianLayer.MergeMode.Stacked }

I’ll have another suggestion, but I propose that we tackle the main issue first. With the change mentioned above, the columns should be drawn as expected.

[kevincianfarini]

Stacked merge mode worked. Why? I'm not sure I understand. Also, I'd love to hear your other suggestion.

[patrickmichalik]

I’m glad to hear that switching to MergeMode.Stacked helped, @kevincianfarini. When you use MergeMode.Grouped, each column collection is given enough horizontal space to fit as many columns as there are series. However, when the workaround in question here is used, each column collection houses only one column, even though there are multiple series. One should thus use MergeMode.Stacked to prevent the series count from affecting the horizontal dimensions. This is perfectly safe to do and doesn’t introduce any unwanted side effects. Once we add column-by-column customization—which we plan on doing soon—neither multiple series nor MergeMode.Stacked will be necessary.

My second suggestion would be to limit the series and LineComponent count. It looks like you have a separate series and LineComponent for each column. It would be sufficient to add as many series and LineComponents as there are column colors. Each y value would be assigned to the series corresponding to the appropriate color. This approach would limit the number of objects created and stored in memory, and it would be safer in terms of synchronization. (This relates to what I described in the second paragraph here.) If you need an example, please let me know.

[patrickmichalik]

@kevincianfarini, I wanted to follow up and let you know that Vico 2.0.0 Alpha 13 introduces column-by-column customization. A single series is now sufficient, so the suggestion from my previous comment no longer applies.

[patrickmichalik]

Vico 2.0.0 Alpha 13 introduces this functionality. Cheers!

[hhpettersen]

Great work, thanks!

[kevincianfarini]

Awesome! Thank you!

[patrickmichalik]

You’re welcome! We’re glad you like it.