build-custom-charts

Use this skill when a project needs a visualization beyond nao's built-in chart types.

Create a chart

Add agent/charts/<type>.js, where <type> starts with a lowercase letter and may then contain lowercase letters, numbers, hyphens, or underscores. It must not collide with a built-in chart type (such as bar, line, pie) or table. Names that break these rules are silently ignored. The file must export a render function:

export function render(element, context) {
	const { data, config, colors, theme, libs } = context;

	element.textContent = `${data.length} rows`;
	return () => element.replaceChildren();
}

The context contains: