Columns not starting at y=0

[Laul]

Describe the bug
Hello,
For many reasons, I am considering switching the charting lib I currently use (Kellochart, adapted from Hellochart) to yours. However, I have a requirement to be able to draw charts that contains columns not starting from y=0. For example, I need to draw a column at x=0 between y=2 and y=6. Of what I found, your implementation only allows to make a column from 0 to abs(y)>0... Unless I missed something ? If not "natively" supported, would you suggest a work around? Do you have some similar examples ? Below is a picture of my current view with Kellochart.

Module

• compose
• views
• compose-m2
• compose-m3
• core (select if none of the above apply)

To reproduce
N/A

Expected behavior
N/A

Screenshots

Android versions
N/A

Additional context
N/A

[patrickmichalik]

Hello! I’m afraid this isn’t supported, but we will be adding such functionality in the future. Unfortunately, I don’t think there’s much in the way of a trick that would enable you to implement something like this, other than creating a custom Chart implementation (possibly an extension of ColumnChart), a custom ChartEntry implementation, and so on.

[github-actions[bot]]

There hasn’t been any activity here for four weeks. If no activity occurs over the next week, this issue will be closed as stale.

[sprout-apps]

Hello,

Thanks for the great package. We have the same need for this feature, but with a line chart. Would really appreciate if you could make this enhancement!

Thank you!

[patrickmichalik]

Could you elaborate on that, @sprout-apps? While a column in a column chart has two key y values—the top and the bottom—a point in a line chart has only one.

[Laul]

 Hey ! I am sorry: I completely forgot to mention that I finally found a way to display columns not starting from 0. The idea is to put 2 different columns one on top of the other. Let's take a simple example : • You want a vertical bar / column from y=1 to y=4 at a x= 2 • You create two bars : • A "back" bar from y=0 to y=4 at a x= 2 • A "top" bar from y=0 to y=1 at a x= 2 • And then add the same background color on the "top" bar At the end I got what I put in attachment I hope it'll give ideas to you ;)

[sprout-apps]

@patrickmichalik An example in our case would be a baby growth chart. Baby's weight and height don't start with zero, so zero base doesn't work very well for the chart. It ends up with a lot of white space and the actual values don't get spread out as much, so the chart isn't that readable. It's better to start just below the birth value. Let me know if this makes sense. I can attach sample images.

[patrickmichalik]

Interesting, @Laul! I’m glad that you’ve found a workaround. Thanks for sharing.

[patrickmichalik]

Got it, @sprout-apps. That is, however, a different feature than what’s been requested here, and Vico already has it. You can use AxisValuesOverrider to customize a chart’s x range and y range. This would remove all empty space at the bottom:

object : AxisValuesOverrider<ChartEntryModel> {
    override fun getMinY(model: ChartEntryModel) = model.minY
}

[sprout-apps]

@patrickmichalik Perfect, thanks for your help!

[patrickmichalik]

You’re welcome, @sprout-apps!

[Laul]

Hi !
I continued to work on my project and I have a new question !
My goal is to create a column from the min to the max for heart rate for example. So lets say I wanna to have a bar from 50 to 130.

To do so, I use the ColumnChart.MergeMode.Stack to create my stacked column. Works well, I even have the markers with proper values .
My problem is that since it is a stacked column, the start axis contain the sum of the min + max, and not just max. I could "fix" one column axis values by substracting max-min, but the problem comes when I display several bars since min-max is not the same between each columns , so there would be one axis per column... no way :D

Would you have an idea how I could properly fix my problem ?

Here is a screenshot of the current visual:

[patrickmichalik]

Sorry for the late reply. For whatever reason, I didn’t receive a notification about your comment. I believe it would be sufficient to use relative y values for the top columns. That is, the y value of any given top column should be its desired height, not the absolute y value of its top edge. Let’s say we need these columns: 10 to 40, 35 to 50, and 15 to 35. We set the y values of the bottom columns to 10, 35, and 15. For the top columns, we use 30, 15, and 20. We get the desired result:

For Markers, you can use a custom MarkerLabelFormatter to ensure that the desired values are displayed and that they’re properly formatted. For any given top column, the absolute y value of its bottom edge is the y value of the corresponding bottom column, and the absolute y value of its top edge is the sum of the y value of the corresponding bottom column and the y value of the top column.

[Laul]

Hey !
No problem for the late reply, dont worry at all!

In the meantime, I also found a solution, by simply subtracting the previous values of the stacked column. So my max is not the max, but the max - min. something like:
series_all.s_min.y[i] + series_all.s_max.y[i]

I am happy if it helps others ;)

[patrickmichalik]

I’m glad to hear you’ve solved the problem, @Laul! Thanks for sharing.

[shrift]

@patrickmichalik Is there any update on adding support for this type of y != 0 column chart?
We previously used a highcharts dumbbell chart (with vertical, y, ranges, which is a supported option there): https://www.highcharts.com/docs/chart-and-series-types/dumbbell-series.
We decided it was worth switching to Vico despite lack of this type of dumbbell chart, we just use two line charts right now.

We're looking into adding back the "dumbbell" style for our blood pressure charts.
This thread is the closest I've seen discussing this style for Vico, so hoping this is a relevant place to ask about it.

Thank you for your time!

[sprout-apps]

@patrickmichalik My bad, that solution did work for us and everything is working fine in the app. I just forgot :)

[patrickmichalik]

I’m glad to hear that it worked, @sprout-apps!

[patrickmichalik]

I’ll comment here when candlestick charts are available in alpha, @shrift. This is quite a large addition, so we’ll be grateful for testing and feedback. Thanks!

[Laul]

Just wanted to add that I am also updating my code with the new release 2.0.0.alpha6 ; thanks for the great upgrades, it simplify a lot the things in addition to the new capabilities !

[patrickmichalik]

Thanks for the kind words, @Laul! We’re glad that you’ve found the recent updates helpful.

[patrickmichalik]

Vico 2.0.0 Alpha 15 introduced candlestick charts. As discussed above, a candle can serve as a column that spans any range of y values. Here’s a quick example:

val bottomY = listOf(1f, 4f, 3f, 2f)
val topY = listOf(8f, 12f, 8f, 6f)

candlestickSeries(opening = bottomY, closing = topY, low = bottomY, high = topY)

Candles and columns have different default styling, but the appearance of a CandlestickCartesianLayer can be customized to match that of a ColumnCartesianLayer. Note that DefaultCartesianMarker and DefaultCartesianMarkerValueFormatter will treat such a CandlestickCartesianLayer as they do any other one, so you may have to make some overrides to obtain the desired behavior on that front. If you have any questions, let me know.