Referência

Módulos

Pacotes de opt-in que registram seus tipos de gráfico quando importados. Importe apenas os que você precisa — o bundle principal permanece pequeno.

Finanças

Gráficos de séries temporais financeiras mais 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

candlestick, ohlc, heikinashi, hollowcandlestick, volume, vbp, arearange, baseline, flags, 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 um calcula de OHLC e retorna uma série de overlay.

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 e estatísticas prontas para publicação — o pacote científico.

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

volcano — expressão diferencial, auto-classificado por thresholds.
manhattan — GWAS por cromossomo com linhas de significância (canvas para >20k pontos).
kaplanmeier — curvas de sobrevivência com bandas de confiança e marcas de censura.
forestplot — tamanhos de efeito de meta-análise com um diamante agrupado.
sequencelogo, clusteredheatmap, pcoa, phylotree.
circos & variantes — gráficos de genoma circular multi-track (faixas de histograma, link, heatmap).

DataTable

Uma grade de dados interativa que funciona com qualquer gráfico — ordenação, filtragem, paginação, seleção e exportação.

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

Referência completa da DataTable →

React

Um wrapper fino que conduz um gráfico a partir de props e limpa ao 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 aqui é renderizado ao vivo na galeria, com formatos de dados em Tipos de Gráficos.