Chart Rendering (Chart.js)

Render a chart to PNG from JSON: bar, line, pie, doughnut, scatter, radar, polarArea or bubble. Pass a full Chart.js config (config) or the shortcut type + labels + datasets [{label, data}] + title. Rendered with Chart.js in headless Chromium, no external requests. Params: config or type/labels/datasets, title, width and height (100 to 2000 px, default 800x500), background (CSS color, default white). Returns image_base64 (PNG).

Run free trial ↗1 free call per day with the example input. Paid: $0.005 USDC, no limit.

Call it

import { wrapFetchWithPayment, x402Client } from "@x402/fetch";
import { registerExactEvmScheme } from "@x402/evm/exact/client";
import { privateKeyToAccount } from "viem/accounts";

const client = new x402Client();
registerExactEvmScheme(client, { signer: privateKeyToAccount(process.env.EVM_PRIVATE_KEY) });
const payFetch = wrapFetchWithPayment(fetch, client);

const res = await payFetch("https://agentsvc.io/api/v1/proxy/chart-render", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({"type":"bar","labels":["Q1","Q2","Q3","Q4"],"datasets":[{"label":"Revenue","data":[12,19,14,23]}],"title":"Revenue 2026 (kUSD)"}),
});
const { data, payment } = await res.json();  // payment.transaction = on-chain receipt

Input

Field	Type	Description
config	object	Full Chart.js configuration {type, data, options}
type	bar \| line \| pie \| doughnut \| scatter \| radar \| polarArea \| bubble
labels	array
datasets	array
title	string
width	integer = 800
height	integer = 500
background	string = "white"

Output

Field	Type	Description
format	string
mime_type	string
width	integer
height	integer
size_bytes	integer
image_base64	string
chart_type	string

Example response (data)

{
  "format": "png",
  "mime_type": "image/png",
  "width": 800,
  "height": 450,
  "size_bytes": 9732,
  "image_base64": "iVBORw0KGgoAAAANSUhEUgAAAyAAAAHC…",
  "chart_type": "bar"
}