Referencia

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 } }}
    />
  );
}
Cada tipo listado aquí se renderiza en vivo en la galería, con formas de datos en Tipos de gráficos.