Referencia

Referencia de API

El namespace global KatuCharts crea gráficos y gestiona valores por defecto; cada instancia de gráfico expone métodos para actualizar, exportar, inspeccionar y descartar.

Global — KatuCharts

Método	Firma → retorna	Descripción
`chart`	chart(containerOrId: string \| HTMLElement, options) → Chart	Crea un gráfico en el contenedor (id o nodo DOM).
`setOptions`	setOptions(options) → void	Establece valores por defecto globales heredados por gráficos posteriores.
`getOptions`	getOptions() → Partial<Options>	Lee los valores por defecto globales actuales.
`use`	use(module) → void	Registra un plugin/módulo con un método install(KC).
`dateFormat`	dateFormat(format: string, timestamp: number) → string	Formatea una marca de tiempo en ms (tokens abajo).
`numberFormat`	numberFormat(value, decimals, decPoint?, thousandsSep?) → string	Formatea un número; valores por defecto '.' y ','.
`color`	color(input: string) → KatuChartsColor	Objeto color encadenable: .brighten(n), .setOpacity(a), .toString().
`palettes`	Record<string, string[]>	Mapa de nombre de paleta → colores hex.
`getPalette`	getPalette(name: string) → string[]	Copia de una paleta nombrada (lanza excepción si es desconocida).
`setTheme`	setTheme(name: string) → void	Aplica 'dark' \| 'light' \| 'nordic'.
`SeriesRegistry.registerType`	registerType(name, seriesClass) → void	Registra un tipo de serie personalizado.
`SeriesRegistry.getType`	getType(name) → class \| undefined	Busca una clase de serie registrada.

Tokens de dateFormat

Token	Salida	Ejemplo
`%Y`	Año de cuatro dígitos	2026
`%m / %d`	Mes / día con ceros iniciales	03 / 22
`%H / %M / %S`	Horas (24h) / minutos / segundos	14 / 05 / 09
`%B / %A`	Nombre completo de mes / día de semana	Marzo / Domingo

Paletas y temas

20 paletas integradas: default, tableau10, d3classic, brewer, google, ocean, sunset, earth, forest, berry, corporate, minimal, nordic, darkMode, neon, pastel, soft, classic, tupi, monochrome. 18 temas (9 familias, cada una en claro y oscuro) establecen un fondo + paleta, por ejemplo:

Tema	Fondo	Paleta
`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: [/* … */] }]
});

Instancia — datos y diseño

Método	Firma → retorna	Descripción
`addSeries`	addSeries(options, redraw=true) → BaseSeries	Añade una serie; redraw=false para procesar por lotes.
`get`	get(id) → BaseSeries \| Axis \| undefined	Encuentra una serie o eje por id.
`update`	update(options, redraw=true) → void	Fusiona opciones parciales (título, ejes, series…).
`addAxis`	addAxis(options, isX=false, redraw=true) → Axis	Añade un eje en tiempo de ejecución.
`redraw`	redraw() → void	Aplica cambios pendientes inmediatamente.
`animatedRedraw`	animatedRedraw(duration=500) → void	Redibujar con una transición.
`reflow`	reflow() → void	Recalcula el diseño para el tamaño actual del contenedor.
`setSize`	setSize(width, height) → void	Establece dimensiones en píxeles y redibuja.
`setTitle`	setTitle(titleOptions?, subtitleOptions?) → void	Actualiza título/subtítulo; null lo elimina.

Instancia — exportación, datos e interfaz

Método	Firma → retorna	Descripción
`getSVG`	getSVG() → string	Marcado SVG independiente.
`getCSV`	getCSV() → string	Datos como CSV.
`getTable`	getTable() → string	Datos como cadena HTML <table>.
`getDataRows`	getDataRows() → array[][]	Array 2D; primera fila son encabezados.
`exportChart`	exportChart({ type, filename, width, scale })	Descarga PNG/JPEG/SVG/PDF.
`showLoading`	showLoading(text='Loading...') → void	Muestra la superposición de carga.
`hideLoading`	hideLoading() → void	Oculta la superposición de carga.
`getSeriesInstances`	getSeriesInstances() → BaseSeries[]	Todas las instancias de serie.
`getXAxes / getYAxes`	→ Axis[]	Instancias de eje X / Y (múltiples ejes retornan muchos).
`destroy`	destroy() → void	Elimina del DOM y desvincula listeners — llamar antes de eliminar el contenedor.

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();

Renderizador de gráficos

chart.plotRenderer expone primitivos de bajo nivel para formas personalizadas y anotaciones en el área del gráfico.

Método	Firma	Dibuja
`rect`	rect(x, y, width, height, attrs?)	Rectángulo
`circle / ellipse`	circle(cx, cy, r, attrs?) / ellipse(cx, cy, rx, ry, attrs?)	Círculo / elipse
`path`	path(d, attrs?)	Ruta SVG desde una cadena d
`line`	line(x1, y1, x2, y2, attrs?)	Línea recta
`text`	text(str, x, y, attrs?)	Etiqueta de texto
`group`	group(attrs?)	Grupo <g> para anidamiento

Ayudantes de coordenadas: plotRenderer.plotArea → { x, y, width, height }; xAxis.toPixels(value) y yAxis.toPixels(value) convierten datos a píxeles.

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'
});