Tool Forge - Build AI Apps from Backend Logic

Create area charts to visualize trends over time with filled areas under the lines.

Usage

Area chart

const chart = block.areaChart({
  title: 'Monthly Revenue',
  data: [
    { month: 'Jan', revenue: 4000, expenses: 2400 },
    { month: 'Feb', revenue: 3000, expenses: 1398 },
    { month: 'Mar', revenue: 2000, expenses: 9800 },
  ],
  index: 'month',
  categories: ['revenue', 'expenses'],
})

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	—
index	Key of the data object for the x-axis	`keyof T`	Yes	—
categories	Keys of the data object for the y-axis series	`(keyof T)[]`	Yes	—
colors	Colors for each category series	`ChartColor[]`	No	`['blue']`
xAxisLabel	Label for the x-axis	`string`	No	`undefined`
yAxisLabel	Label for the y-axis	`string`	No	`undefined`
fillType	Type of fill under the area	`'gradient' \| 'solid' \| 'none'`	No	`'gradient'`
stackType	How series are stacked	`'default' \| 'stacked' \| 'percent'`	No	`'default'`
intervalType	X-axis tick placement logic	`'equidistantPreserveStart' \| 'preserveStartEnd'`	No	`'equidistantPreserveStart'`
startEndOnly	Show only start and end labels on x-axis	`boolean`	No	`false`
showXAxis	Whether to display the x-axis	`boolean`	No	`true`
showYAxis	Whether to display the y-axis	`boolean`	No	`true`
showGridLines	Whether to display grid lines	`boolean`	No	`true`
showTooltip	Whether to display tooltips on hover	`boolean`	No	`true`
showLegend	Whether to display the legend	`boolean`	No	`true`
valueFormat	Format configuration for values	`ValueFormat`	No	`undefined`

Returns

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

Examples

Basic area chart

return block.areaChart({
  title: 'Website Traffic',
  data: trafficData,
  index: 'date',
  categories: ['visitors'],
  colors: ['blue'],
})

Stacked area chart

return block.areaChart({
  title: 'Revenue by Product',
  data: revenueData,
  index: 'month',
  categories: ['productA', 'productB', 'productC'],
  colors: ['blue', 'emerald', 'amber'],
  stackType: 'stacked',
})

Percentage stacked chart

Percentage stacked area chart

return block.areaChart({
  title: 'Market Share',
  data: marketData,
  index: 'quarter',
  categories: ['companyA', 'companyB', 'companyC'],
  stackType: 'percent',
  valueFormat: { type: 'percentage' },
})

With axis labels and formatting

return block.areaChart({
  title: 'Sales Performance',
  description: 'Monthly sales data for 2024',
  data: salesData,
  index: 'month',
  categories: ['sales'],
  xAxisLabel: 'Month',
  yAxisLabel: 'Revenue',
  valueFormat: {
    type: 'currency',
    currency: 'USD',
    notation: 'compact',
  },
})

Minimal chart without axes

return block.areaChart({
  data: sparkData,
  index: 'time',
  categories: ['value'],
  showXAxis: false,
  showYAxis: false,
  showGridLines: false,
  showLegend: false,
  fillType: 'solid',
})

Value Format Options

Property	Description	Type	Default
type	Format type	`'number' \| 'currency' \| 'percentage'`	`'number'`
decimals	Decimal precision (0-10)	`number`	`0`
currency	Currency code (for currency type)	`string`	`'USD'`
currencyDisplay	How to display currency	`'symbol' \| 'code' \| 'name'`	`'symbol'`
notation	Number notation	`'standard' \| 'compact'`	`'standard'`
locale	Locale for formatting	`string`	`'en-US'`

Available Colors

type ChartColor =
  | 'blue'
  | 'emerald'
  | 'violet'
  | 'amber'
  | 'gray'
  | 'cyan'
  | 'pink'
  | 'lime'
  | 'fuchsia'
  | 'red'
  | 'green'
  | 'yellow'

areaChart

On this page