Reference

API Reference

The global KatuCharts namespace creates charts and manages defaults; each chart instance exposes methods to update, export, inspect and dispose.

Global — KatuCharts

Method	Signature → returns	Description
`chart`	chart(containerOrId: string \| HTMLElement, options) → Chart	Create a chart in the container (id or DOM node).
`setOptions`	setOptions(options) → void	Set global defaults inherited by later charts.
`getOptions`	getOptions() → Partial<Options>	Read the current global defaults.
`use`	use(module) → void	Register a plugin/module with an install(KC) method.
`dateFormat`	dateFormat(format: string, timestamp: number) → string	Format a ms timestamp (tokens below).
`numberFormat`	numberFormat(value, decimals, decPoint?, thousandsSep?) → string	Format a number; defaults '.' and ','.
`color`	color(input: string) → KatuChartsColor	Chainable color object: .brighten(n), .setOpacity(a), .toString().
`palettes`	Record<string, string[]>	Map of palette name → hex colors.
`getPalette`	getPalette(name: string) → string[]	Copy of a named palette (throws if unknown).
`setTheme`	setTheme(name: string) → void	Apply 'dark' \| 'light' \| 'nordic'.
`SeriesRegistry.registerType`	registerType(name, seriesClass) → void	Register a custom series type.
`SeriesRegistry.getType`	getType(name) → class \| undefined	Look up a registered series class.

dateFormat tokens

Token	Output	Example
`%Y`	Four-digit year	2026
`%m / %d`	Zero-padded month / day	03 / 22
`%H / %M / %S`	Hours (24h) / minutes / seconds	14 / 05 / 09
`%B / %A`	Full month / weekday name	March / Sunday

Palettes & themes

20 built-in palettes: default, tableau10, d3classic, brewer, google, ocean, sunset, earth, forest, berry, corporate, minimal, nordic, darkMode, neon, pastel, soft, classic, tupi, monochrome. 18 themes (9 families, each in light and dark) set a background + palette, for example:

Theme	Background	Palette
`dark`	#1a1f24	monochrome
`light`	#ffffff	monochrome
`nordic`	#eceff4	nordic

import KatuCharts from 'katucharts.js';
import 'katucharts.js/bio'; // modules register their chart types on import

KatuCharts.setTheme('dark');
KatuCharts.setOptions({ colors: KatuCharts.getPalette('sunset') });

const chart = KatuCharts.chart('container', {
  series: [{ type: 'volcano', data: [/* … */] }]
});

Instance — data & layout

Method	Signature → returns	Description
`addSeries`	addSeries(options, redraw=true) → BaseSeries	Append a series; redraw=false to batch.
`get`	get(id) → BaseSeries \| Axis \| undefined	Find a series or axis by id.
`update`	update(options, redraw=true) → void	Merge partial options (title, axes, series…).
`addAxis`	addAxis(options, isX=false, redraw=true) → Axis	Add an axis at runtime.
`redraw`	redraw() → void	Apply pending changes immediately.
`animatedRedraw`	animatedRedraw(duration=500) → void	Redraw with a transition.
`reflow`	reflow() → void	Recalculate layout for the current container size.
`setSize`	setSize(width, height) → void	Set pixel dimensions and redraw.
`setTitle`	setTitle(titleOptions?, subtitleOptions?) → void	Update title/subtitle; null removes.

Instance — export, data & UI

Method	Signature → returns	Description
`getSVG`	getSVG() → string	Standalone SVG markup.
`getCSV`	getCSV() → string	Data as CSV.
`getTable`	getTable() → string	Data as an HTML <table> string.
`getDataRows`	getDataRows() → array[][]	2-D array; first row is headers.
`exportChart`	exportChart({ type, filename, width, scale })	Download PNG/JPEG/SVG/PDF.
`showLoading`	showLoading(text='Loading...') → void	Show the loading overlay.
`hideLoading`	hideLoading() → void	Hide the loading overlay.
`getSeriesInstances`	getSeriesInstances() → BaseSeries[]	All series instances.
`getXAxes / getYAxes`	→ Axis[]	X / Y axis instances (multi-axis returns many).
`destroy`	destroy() → void	Remove from DOM and unbind listeners — call before removing the container.

chart.showLoading('Fetching data…');
fetch('/api/data').then(r => r.json()).then(data => {
  chart.addSeries({ data });
  chart.hideLoading();
});

chart.exportChart({ type: 'image/svg+xml', filename: 'report', width: 1200 });

// on teardown
chart.destroy();

Plot renderer

chart.plotRenderer exposes low-level primitives for custom shapes and annotations in the plot area.

Method	Signature	Draws
`rect`	rect(x, y, width, height, attrs?)	Rectangle
`circle / ellipse`	circle(cx, cy, r, attrs?) / ellipse(cx, cy, rx, ry, attrs?)	Circle / ellipse
`path`	path(d, attrs?)	SVG path from a d string
`line`	line(x1, y1, x2, y2, attrs?)	Straight line
`text`	text(str, x, y, attrs?)	Text label
`group`	group(attrs?)	<g> group for nesting

Coordinate helpers: plotRenderer.plotArea → { x, y, width, height }; xAxis.toPixels(value) and yAxis.toPixels(value) convert data to pixels.

const [xAxis] = chart.getXAxes();
const [yAxis] = chart.getYAxes();
const plot = chart.plotRenderer.plotArea;

const yPx = yAxis.toPixels(6);
chart.plotRenderer.line(plot.x, yPx, plot.x + plot.width, yPx, {
  stroke: '#d62728', strokeWidth: 2, strokeDasharray: '6 3'
});
chart.plotRenderer.text('Target', plot.x + plot.width + 8, yPx + 4, {
  fill: '#d62728', fontSize: 12, fontWeight: 'bold'
});