How to change the size of bars in column chart ? about vico HOT 7 CLOSED

Hello! Hereʼs a quick example. I hope it helps.

<com.patrykandpatryk.vico.view.chart.ChartView
    android:id="@+id/chart"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:showBottomAxis="true"
    app:showStartAxis="true" />

with (binding.chart) {
    setModel(
        model = entryModelOf(
            0f to 10f,
            5f to 15f,
            10f to 20f,
        ),
    )
    chart = ColumnChart(
        column = LineComponent(
            thicknessDp = 24f,
            color = Color.BLACK,
        ),
    )
    (startAxis as Axis).guideline = null
    with (bottomAxis as Axis) {
        guideline = null
        valueFormatter = AxisValueFormatter { _, _ -> "Test" }
    }
}

from vico.

Hi @khmaies5!

You can define the columns’ (bars’) thickness right in LineComponent’s constructor. Alternatively you can use lineComponent() function if you are using Jetpack Compose.

In order to hide the guidelines, you need to set guideline to null while creating an axis.
You can use a horizontal axis builder, or vertical axis builder. There's also compose-only functions such as startAxis() etc.

from vico.

I will check it out, also I am not using compose.
I believe that this lib has a lot of potential but it's not well documented or not having enough examples on how to use it in different scenarios (i am talking about not so advanced developers)

from vico.

Hi @khmaies5!

You can define the columns’ (bars’) thickness right in LineComponent’s constructor. Alternatively you can use lineComponent() function if you are using Jetpack Compose.

In order to hide the guidelines, you need to set guideline to null while creating an axis. You can use a horizontal axis builder, or vertical axis builder. There's also compose-only functions such as startAxis() etc.

I changed the thickness and hid the guideline using styling for the column bar but that messedup the view so i tried to do what you told me but i wasn't successful (how to add the lineComponent constructor to the column chart).
I am using the sample app.

one other reauest, can we edit the y&x axis steps? for example i want the x axis to count from 0 to 10 and step by 5 so it shows 0->5->10 and the y axis to show 24h format from 00:00 -> 08:00 -> 16:00 -> 00:00

from vico.

(how to add the lineComponent constructor to the column chart).

The ColumnChart’s constructor accepts both single column LineComponent, as well as a list of columns. I can’t see what problem you may have with that.

i want the x axis to count from 0 to 10 and step by 5

Simply add your list of ChartEntry with 0, 5, 10 x-axis values.

Alternatively use custom AxisValueFormatter that converts x-axis values to whatever you need. An then set it to your Axis.

y axis to show 24h format from 00:00 -> 08:00 -> 16:00 -> 00:00

Use the AxisValueFormatter, as I’ve mentioned before.

from vico.

Thank you, this is really helpful

from vico.

I assume that this issue can be closed now.

from vico.