Tool Forge - Build AI Apps from Backend Logic

Create donut or pie charts to show proportions and percentages in a circular format.

Usage

const chart = block.donutChart({
  title: 'Revenue by Category',
  data: [
    { category: 'Electronics', revenue: 45000 },
    { category: 'Clothing', revenue: 32000 },
    { category: 'Books', revenue: 18000 },
  ],
  category: 'category',
  value: 'revenue',
})

Props

Prop	Description	Type	Required	Default
title	Chart title displayed above the chart	`string`	No	`undefined`
description	Description text below the title	`string`	No	`undefined`
data	Array of data objects to visualize	`T[]`	Yes	—
category	Key of the data object for category labels	`keyof T`	Yes	—
value	Key of the data object for the values	`keyof T`	Yes	—
colors	Colors for each category	`ChartColor[]`	No	`['blue']`
variant	Chart style	`'donut' \| 'pie'`	No	`'donut'`
label	Text to display in the center (donut only)	`string`	No	`undefined`
showLabel	Whether to show the center label	`boolean`	No	`false`
showTooltip	Whether to display tooltips on hover	`boolean`	No	`true`
valueFormat	Format configuration for values	`ValueFormat`	No	`undefined`

Returns

Returns a DonutChartOutput object that can be returned from a handler or passed to io.message().

Examples

Basic donut chart

return block.donutChart({
  title: 'Expenses by Department',
  data: expenseData,
  category: 'department',
  value: 'amount',
  colors: ['blue', 'emerald', 'amber', 'violet', 'pink'],
})

Pie chart variant

return block.donutChart({
  title: 'Market Share',
  data: marketData,
  category: 'company',
  value: 'share',
  variant: 'pie',
  colors: ['blue', 'emerald', 'amber'],
})

With center label

return block.donutChart({
  title: 'Budget Allocation',
  data: budgetData,
  category: 'category',
  value: 'amount',
  label: 'Total: $125K',
  showLabel: true,
  valueFormat: {
    type: 'currency',
    currency: 'USD',
    notation: 'compact',
  },
})

Percentage display

return block.donutChart({
  title: 'Traffic Sources',
  data: trafficData,
  category: 'source',
  value: 'percentage',
  colors: ['blue', 'emerald', 'amber', 'violet'],
  valueFormat: {
    type: 'percentage',
    decimals: 1,
  },
})

donutChart

On this page