How to have a bar chart's bars fully occupy their X values?

[Tyler-Lopez]

Question

This is something I'm a bit confused on.

If I have a series of line chart data and I plot that, like (1, 2, 3, 4, 5, 6, 7) I would like these bars to be touching eachother. So, I would like the bars big - as big as the whole x-value they are associated with is. I can't seem to do this.

Is there anything I'm missing?

It would seem that I can do this in a very hacky, awkward way by making the column thickness a large number (but not Float.MAX_VALUE - oddly, that will crash) and changing the spacing to 0. That said, this can't be right - there is still some spacing and increasing the spacing seems to not be respected.

Vico version(s)

No response

UI framework(s)

Jetpack Compose

[Tyler-Lopez]

I am thinking that I want to set each bar value's width to context.horizontalDimensions.xSpacing, but I don't know how I can get access to this value before I draw the line component.

[Gowsky]

Hi @Tyler-Lopez. Simply set the columnCollectionSpacing to 0.dp in the rememberColumnCartesianLayer function.

[Tyler-Lopez]

Thanks! What should the width be set to in this case? I'm assuming the answer is it can just be anything. I did encounter some runtime exceptions when attempting to set it to the maximum number value. Just pointing that out as a bit of an oddity.

[Tyler-Lopez]

Oh - right also: so one of my concerns with the API design here is that if you need to rely upon columnCollectionSpacing to fill the max width, then you have no control over giving max-width bars a little bit of space between them. It would be great if this were changed! I might make an issue to follow up with this if that is alright.

[Gowsky]

What should the width be set to in this case? I'm assuming the answer is it can just be anything. I did encounter some runtime exceptions when attempting to set it to the maximum number value.

You specify the width in the Dp unit. The columns’ width changes accordingly to the zoom level.

Why would you try to set the width to the maximum value? This would make a single column way thicker than the screen‘s width (given the default zoom level). If you want your bars to fill the entire width of the chart, use Zoom.Content.

one of my concerns with the API design here is that if you need to rely upon columnCollectionSpacing to fill the max width, then you have no control over giving max-width bars a little bit of space between them.

This is not just the API design. This would affect the x axis and make it mathematically invalid.

[Tyler-Lopez]

Thanks for your thoughts here!

Do you agree that it is not currently possible to have bars, which occupy the maximum width that they can in a zoomed-out state (Zoom.Content) to have space between them? I am just identifying that as a missing capability. This may not make as much sense when we talk about zoomable bar charts, but I think that bars that occupy the maximum width they can relative to the number of bars and their container width while having spacing is a common pattern.

edit: Presumably, it might be possible with the existing library by clients of the API in setting the chart to some known width, using Zoom.Content, and then calculating the bar width and spacing. I have not tried this yet.

[Gowsky]

@Tyler-Lopez, I think there's a slight misunderstanding here.

A column filling the entirety of its designated space is one thing. You achieve this by setting the spacing to zero.

All columns, considered as a whole, filling the entirety of the viewport is another. You achieve this by using Zoom.Content, which scales both the column width and the spacing. You do not rely on columnCollectionSpacing to achieve this, as you suggested above. The exact width and spacing values are irrelevant — they will be multiplied by a factor that makes the content fill the viewport anyway. What you should focus on is the ratio between the column width and spacing.

Do you agree that it is not currently possible to have bars, which occupy the maximum width that they can in a zoomed-out state (Zoom.Content) to have space between them?

It is possible. You can set columnCollectionSpacing to a nonzero value, giving the columns some spacing, and Zoom.Content will still ensure that the columns fill the viewport. If gaps appear on the sides, it's because you're using HorizontalLayout.Segmented — they'll disappear when you switch to HorizontalLayout.FullWidth.

If you don't have an x-axis, adding one temporarily may make it easier to see what's going on.

If you're having trouble achieving the desired result, please share a runnable example on which we can discuss the required changes.