barList
Create a vertical list of horizontal bars for comparing multiple values.
Usage
const list = block.barList({
title: 'Top Pages',
data: [
{ name: '/home', value: 1200 },
{ name: '/products', value: 850 },
{ name: '/about', value: 420 },
{ name: '/contact', value: 280 },
],
})Props
| Prop | Description | Type | Required | Default |
|---|---|---|---|---|
| title | Title displayed above the list | string | No | undefined |
| description | Description text below the title | string | No | undefined |
| data | Array of items with name and value | Array<{ name: string; value: number }> | Yes | — |
| sortOrder | How to sort the bars | 'ascending' | 'descending' | 'none' | No | 'descending' |
| color | Color for all bars | ChartColor | No | 'blue' |
Returns
Returns a bar list block that can be returned from a handler or passed to io.message().
Examples
Top pages by views
return block.barList({
title: 'Top Pages',
description: 'Last 30 days',
data: [
{ name: '/home', value: 12500 },
{ name: '/products', value: 8200 },
{ name: '/pricing', value: 6100 },
{ name: '/docs', value: 4800 },
{ name: '/blog', value: 3200 },
],
color: 'blue',
})Sales by region
return block.barList({
title: 'Sales by Region',
data: [
{ name: 'North America', value: 450000 },
{ name: 'Europe', value: 320000 },
{ name: 'Asia Pacific', value: 280000 },
{ name: 'Latin America', value: 150000 },
],
color: 'emerald',
})Ascending order
return block.barList({
title: 'Lowest Performing Products',
data: productData,
sortOrder: 'ascending',
color: 'red',
})Preserve original order
return block.barList({
title: 'Pipeline Stages',
data: [
{ name: 'Leads', value: 500 },
{ name: 'Qualified', value: 250 },
{ name: 'Proposal', value: 100 },
{ name: 'Negotiation', value: 50 },
{ name: 'Closed', value: 25 },
],
sortOrder: 'none', // Keep funnel order
color: 'violet',
})Error tracking
return block.barList({
title: 'Errors by Type',
description: 'Last 24 hours',
data: [
{ name: 'TypeError', value: 145 },
{ name: 'NetworkError', value: 89 },
{ name: 'ValidationError', value: 56 },
{ name: 'AuthError', value: 23 },
],
color: 'red',
})In a dashboard layout
return block.layout({
columns: 12,
children: [
{
element: block.barList({
title: 'Top Referrers',
data: referrerData,
color: 'blue',
}),
colSpan: 6,
},
{
element: block.barList({
title: 'Top Countries',
data: countryData,
color: 'emerald',
}),
colSpan: 6,
},
],
})