# BarList

*Category:* Components
*Section:* Progress
*Source:* https://uikit.developers.rio.cloud/#/components/barList
*Captured:* 2026-04-27T14:57:44.196Z

## BarList

### Example: Example 1

BarList

On-time delivery

Warehouse efficiency

Truck utilization

Freight cost/km

Fuel consumption index

92%

84%

78%

65%

15%

BarList reversed

On-time delivery

Warehouse efficiency

Truck utilization

Freight cost/km

Fuel consumption index

92%

84%

78%

65%

15%

#### React (tsx)

```tsx
import BarList from '@rio-cloud/rio-uikit/BarList';

export default () => {
    const handleSelect = (item: (typeof transportData)[number]) => {
        console.log(`Clicked on: ${item.name}`);
    };

    return (
        <div className='padding-20-md'>
            <div className='display-flex flex-wrap gap-50'>
                <div className='flex-1-1 border rounded padding-15 padding-bottom-20 bg-white'>
                    <div className='text-size-16 text-medium margin-bottom-15'>BarList</div>
                    <BarList
                        data={transportData}
                        valueFormatter={value => `${value}%`}
                        onSelectRow={handleSelect}
                        referenceValue={100}
                        showAnimation
                    />
                </div>
                <div className='flex-1-1 border rounded padding-15 padding-bottom-20 bg-white'>
                    <div className='text-size-16 text-medium margin-bottom-15'>BarList reversed</div>
                    <BarList
                        data={transportData}
                        valueFormatter={value => <span className='text-medium'>{value}%</span>}
                        onSelectRow={handleSelect}
                        referenceValue={100}
                        showAnimation
                        className='flex-row-reverse gap-10'
                    />
                </div>
            </div>
        </div>
    );
};

const transportData = [
    {
        key: 'truck_utilization',
        name: 'Truck utilization',
        value: 78,
        href: 'https://example.com/metrics/truck-utilization',
    },
    {
        key: 'on_time_delivery',
        name: 'On-time delivery',
        value: 92,
        href: 'https://example.com/metrics/on-time-delivery',
    },
    {
        key: 'freight_cost_per_km',
        name: 'Freight cost/km',
        value: 65,
    },
    {
        key: 'warehouse_efficiency',
        name: 'Warehouse efficiency',
        value: 84,
    },
    {
        key: 'fuel_consumption',
        name: 'Fuel consumption index',
        value: 15,
        href: 'https://example.com/metrics/fuel-consumption',
    },
];
```

#### HTML (html)

```html
<div class="padding-20-md">
    <div class="display-flex flex-wrap gap-50">
        <div class="flex-1-1 border rounded padding-15 padding-bottom-20 bg-white">
            <div class="text-size-16 text-medium margin-bottom-15">BarList</div>
            <div class="display-flex justify-content-between gap-15">
                <div class="width-100pct space-y-5">
                    <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 49.4673%;">
                        </div>
                        <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                            <a href="https://example.com/metrics/on-time-delivery" class="text-color-darker" target="_blank" rel="noreferrer">On-time delivery</a>
                        </div>
                    </div>
                    <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 31.4876%;">
                        </div>
                        <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                            <div class="text-color-darker">Warehouse efficiency</div>
                        </div>
                    </div>
                    <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 15.2012%;">
                        </div>
                        <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                            <a href="https://example.com/metrics/truck-utilization" class="text-color-darker" target="_blank" rel="noreferrer">Truck utilization</a>
                        </div>
                    </div>
                    <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 0%;">
                        </div>
                        <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                            <div class="text-color-darker">Freight cost/km</div>
                        </div>
                    </div>
                    <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 0%;">
                        </div>
                        <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                            <a href="https://example.com/metrics/fuel-consumption" class="text-color-darker" target="_blank" rel="noreferrer">Fuel consumption index</a>
                        </div>
                    </div>
                </div>
                <div class="space-y-5">
                    <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
                        <div class="text-color-darkest">92%</div>
                    </div>
                    <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
                        <div class="text-color-darkest">84%</div>
                    </div>
                    <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
                        <div class="text-color-darkest">78%</div>
                    </div>
                    <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
                        <div class="text-color-darkest">65%</div>
                    </div>
                    <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
                        <div class="text-color-darkest">15%</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex-1-1 border rounded padding-15 padding-bottom-20 bg-white">
            <div class="text-size-16 text-medium margin-bottom-15">BarList reversed</div>
            <div class="display-flex justify-content-between gap-15 flex-row-reverse gap-10">
                <div class="width-100pct space-y-5">
                    <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 49.4673%;">
                        </div>
                        <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                            <a href="https://example.com/metrics/on-time-delivery" class="text-color-darker" target="_blank" rel="noreferrer">On-time delivery</a>
                        </div>
                    </div>
                    <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 31.4876%;">
                        </div>
                        <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                            <div class="text-color-darker">Warehouse efficiency</div>
                        </div>
                    </div>
                    <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 15.2012%;">
                        </div>
                        <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                            <a href="https://example.com/metrics/truck-utilization" class="text-color-darker" target="_blank" rel="noreferrer">Truck utilization</a>
                        </div>
                    </div>
                    <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 0%;">
                        </div>
                        <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                            <div class="text-color-darker">Freight cost/km</div>
                        </div>
                    </div>
                    <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer">
                        <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 0%;">
                        </div>
                        <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                            <a href="https://example.com/metrics/fuel-consumption" class="text-color-darker" target="_blank" rel="noreferrer">Fuel consumption index</a>
                        </div>
                    </div>
                </div>
                <div class="space-y-5">
                    <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
                        <div class="text-color-darkest">
                            <span class="text-medium">92%</span>
                        </div>
                    </div>
                    <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
                        <div class="text-color-darkest">
                            <span class="text-medium">84%</span>
                        </div>
                    </div>
                    <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
                        <div class="text-color-darkest">
                            <span class="text-medium">78%</span>
                        </div>
                    </div>
                    <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
                        <div class="text-color-darkest">
                            <span class="text-medium">65%</span>
                        </div>
                    </div>
                    <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
                        <div class="text-color-darkest">
                            <span class="text-medium">15%</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
valueFormatter={(value) => `${value}%`}
```

### Example: 95

Damaged packages

Returned packages

In transit

Stored in warehouse

Shipped packages

95

320

1200

4200

8500

#### React (tsx)

```tsx
import BarList from '@rio-cloud/rio-uikit/BarList';

export default () => {
    const handleSelect = (item: (typeof transportData)[number]) => {
        console.log(`Clicked on: ${item.name}`);
    };

    return (
        <div className='padding-20-md max-width-500'>
            <BarList
                data={transportData}
                valueFormatter={value => <span className='text-color-dark'>{value}</span>}
                onSelectRow={handleSelect}
                showAnimation
                background='bg-lightest'
                color='text-color-darker'
                barColor='bg-coldplay-moos'
                sortOrder='asc'
            />
        </div>
    );
};

const transportData = [
    {
        key: 'shipped',
        name: 'Shipped packages',
        value: 8500,
    },
    {
        key: 'returned',
        name: 'Returned packages',
        value: 320,
        barColor: 'bg-warmup-corn',
    },
    {
        key: 'inTransit',
        name: 'In transit',
        value: 1200,
    },
    {
        key: 'stored',
        name: 'Stored in warehouse',
        value: 4200,
    },
    {
        key: 'damaged',
        name: 'Damaged packages',
        value: 95,
        color: 'text-color-danger',
        barColor: 'bg-warmup-salmon',
    },
];
```

#### HTML (html)

```html
<div class="padding-20-md max-width-500">
    <div color="text-color-darker" class="display-flex justify-content-between gap-15">
        <div class="width-100pct space-y-5">
            <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer">
                <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-warmup-salmon" role="presentation" style="height: 25px; opacity: 0.5; width: 2%;">
                </div>
                <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                    <div class="text-color-danger">Damaged packages</div>
                </div>
            </div>
            <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer">
                <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-warmup-corn" role="presentation" style="height: 25px; opacity: 0.5; width: 3.76471%;">
                </div>
                <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                    <div class="text-color-darker">Returned packages</div>
                </div>
            </div>
            <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer">
                <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos" role="presentation" style="height: 25px; opacity: 0.5; width: 14.1044%;">
                </div>
                <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                    <div class="text-color-darker">In transit</div>
                </div>
            </div>
            <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer">
                <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos" role="presentation" style="height: 25px; opacity: 0.5; width: 47.6604%;">
                </div>
                <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                    <div class="text-color-darker">Stored in warehouse</div>
                </div>
            </div>
            <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer">
                <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos" role="presentation" style="height: 25px; opacity: 0.5; width: 89.084%;">
                </div>
                <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
                    <div class="text-color-darker">Shipped packages</div>
                </div>
            </div>
        </div>
        <div class="space-y-5">
            <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
                <div class="text-color-darkest">
                    <span class="text-color-dark">95</span>
                </div>
            </div>
            <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
                <div class="text-color-darkest">
                    <span class="text-color-dark">320</span>
                </div>
            </div>
            <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
                <div class="text-color-darkest">
                    <span class="text-color-dark">1200</span>
                </div>
            </div>
            <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
                <div class="text-color-darkest">
                    <span class="text-color-dark">4200</span>
                </div>
            </div>
            <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
                <div class="text-color-darkest">
                    <span class="text-color-dark">8500</span>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
valueFormatter={(value) => `${value}%`}
```