Módulos
Paquetes opcionales que registran sus tipos de gráfico al importarlos. Importa solo los que necesites — el bundle principal permanece pequeño.
Finanzas
Gráficos de series de tiempo financieras más 19 indicadores técnicos.
import KatuCharts from 'katucharts.js';
import 'katucharts.js/finance'; // registers the finance chart types
KatuCharts.chart('c', {
series: [{
type: 'candlestick',
data: [[172,178,170,176], [176,182,174,180], /* [o,h,l,c] */]
}]
});Tipos de gráficos
velas, ohlc, heikinashi, hollowcandlestick, volumen, vbp, rango de área, línea base, banderas, renko, kagi, pointandfigure, linebreak.
Indicadores técnicos (19)
SMA, EMA, WMA, DEMA, TEMA, RSI, Stochastic, MACD, CCI, ROC, Momentum, Bollinger Bands, ATR, VWAP, OBV, VBP, Ichimoku Cloud, ADX, PSAR. Cada uno se calcula desde OHLC y retorna una serie de superposición.
import { EMA, RSI, BollingerBands } from 'katucharts.js/finance';
// ohlc: [{ x, open, high, low, close, volume? }, ...]
const ema = EMA.calculate(ohlc, { period: 21 }).values;
chart.addSeries({ type: 'line', name: 'EMA 21', data: ema });
// or declare it in the options and let the chart compute it
KatuCharts.chart('c', {
series: [
{ id: 'px', type: 'candlestick', data: ohlc },
{ type: 'sma', linkedTo: 'px', params: { period: 50 } }
]
});Bioinformática
Genómica y estadísticas listos para publicación — el paquete de ciencia.
import KatuCharts from 'katucharts.js';
import 'katucharts.js/bio'; // registers the bioinformatics chart types
KatuCharts.chart('c', {
series: [{
type: 'volcano',
data: [{ x: 2.5, y: 10.3, name: 'BRCA1' }, { x: -1.8, y: 4.2, name: 'TP53' }],
foldChangeThreshold: 1,
pValueThreshold: 0.01
}]
});- <b>volcán</b> — expresión diferencial, auto-clasificada por umbrales.
- <b>manhattan</b> — GWAS por cromosoma con líneas de significancia (lienzo para >20k puntos).
- <b>kaplanmeier</b> — curvas de supervivencia con bandas de confianza y marcas de censura.
- <b>forest plot</b> — tamaños de efecto meta-analíticos con un diamante agrupado.
- <b>logo de secuencia</b>, <b>mapa de calor agrupado</b>, <b>pcoa</b>, <b>árbol filogenético</b>.
- <b>circos</b> y variantes — gráficos genómicos circulares multi-pista (pistas de histograma, enlace, mapa de calor).
DataTable
Una cuadrícula de datos interactiva que se empareja con cualquier gráfico — clasificación, filtrado, paginación, selección y exportación.
import { DataTable } from 'katucharts.js/datatable';
const table = new DataTable('#grid', {
data: rows,
columns: [
{ accessorKey: 'name', header: 'Name' },
{
accessorKey: 'value',
header: 'Value',
cell: ({ row }) => row.getValue('value').toFixed(2),
},
],
pagination: { pageSize: 25 },
filtering: { enabled: true },
exporting: { enabled: true, formats: ['csv', 'json'] },
});Referencia completa de DataTable →
React
Un wrapper delgado que impulsa un gráfico desde props y limpia al desmontar.
import KatuCharts from 'katucharts.js';
import { KatuChartsReact } from 'katucharts.js/react';
export default function Chart() {
return (
<KatuChartsReact
katuCharts={KatuCharts}
options={{ series: [{ type: 'line', data: [1, 3, 2, 5, 4] }] }}
containerProps={{ style: { height: 400 } }}
/>
);
}