Tool Forge - Build AI Apps from Backend Logic

Create horizontal bars with categorical segments for budget allocation or distribution visualization.

Usage

const bar = block.categoryBar({
  title: 'Budget Allocation',
  values: [
    { value: 40, label: 'Engineering' },
    { value: 30, label: 'Marketing' },
    { value: 20, label: 'Sales' },
    { value: 10, label: 'Operations' },
  ],
  colors: ['blue', 'emerald', 'amber', 'violet'],
})

Props

Prop	Description	Type	Required	Default
title	Title displayed above the bar	`string`	No	`undefined`
description	Description text below the title	`string`	No	`undefined`
values	Array of values (with labels) or plain numbers	`Array<{ value: number; label: string } \| number>`	Yes	—
colors	Colors for each segment	`ChartColor[]`	No	`['blue']`
marker	Optional marker to show a target or threshold	`{ value: number; name?: string }`	No	`undefined`
showLegend	Whether to display the legend	`boolean`	No	`false`
showLabel	Whether to display labels on segments	`boolean`	No	`true`

Returns

Returns a category bar block that can be returned from a handler or passed to io.message().

Examples

Basic category bar

return block.categoryBar({
  title: 'Expense Distribution',
  values: [
    { value: 5000, label: 'Rent' },
    { value: 2000, label: 'Utilities' },
    { value: 1500, label: 'Supplies' },
  ],
  colors: ['blue', 'emerald', 'amber'],
})

With simple numbers

return block.categoryBar({
  title: 'Progress',
  values: [60, 25, 15],
  colors: ['emerald', 'amber', 'gray'],
})

With target marker

return block.categoryBar({
  title: 'Sales vs Target',
  values: [
    { value: 75, label: 'Actual Sales' },
    { value: 25, label: 'Remaining' },
  ],
  colors: ['emerald', 'gray'],
  marker: {
    value: 80,
    name: 'Target',
  },
})

With legend

return block.categoryBar({
  title: 'Team Capacity',
  values: [
    { value: 40, label: 'Allocated' },
    { value: 35, label: 'In Progress' },
    { value: 25, label: 'Available' },
  ],
  colors: ['blue', 'amber', 'emerald'],
  showLegend: true,
})

Inside a KPI card

return block.kpiCard({
  name: 'Resource Utilization',
  value: '75%',
  chart: {
    chartType: 'category-bar',
    values: [
      { value: 75, label: 'Used' },
      { value: 25, label: 'Available' },
    ],
    colors: ['blue', 'gray'],
  },
})

Budget tracking

return block.categoryBar({
  title: 'Q4 Budget',
  description: 'Spending by department',
  values: [
    { value: 120000, label: 'Engineering' },
    { value: 80000, label: 'Marketing' },
    { value: 50000, label: 'Operations' },
    { value: 30000, label: 'HR' },
  ],
  colors: ['blue', 'emerald', 'amber', 'violet'],
  showLegend: true,
  marker: {
    value: 250000,
    name: 'Budget Limit',
  },
})

categoryBar

On this page