Reference

Modules

Opt-in packages that register their chart types when you import them. Import only the ones you need — the core bundle stays small.

Finance

Financial time-series charts plus 19 technical indicators.

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

Chart types

candlestick, ohlc, heikinashi, hollowcandlestick, volume, vbp, arearange, baseline, flags, renko, kagi, pointandfigure, linebreak.

Technical indicators (19)

SMA, EMA, WMA, DEMA, TEMA, RSI, Stochastic, MACD, CCI, ROC, Momentum, Bollinger Bands, ATR, VWAP, OBV, VBP, Ichimoku Cloud, ADX, PSAR. Each computes from OHLC and returns an overlay series.

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

Bioinformatics

Publication-ready genomics and statistics — the science package.

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 — differential expression, auto-classified by thresholds.
manhattan — GWAS by chromosome with significance lines (canvas for >20k points).
kaplanmeier — survival curves with confidence bands and censoring marks.
forestplot — meta-analysis effect sizes with a pooled diamond.
sequencelogo, clusteredheatmap, pcoa, phylotree.
circos & variants — multi-track circular genome plots (histogram, link, heatmap tracks).

DataTable

An interactive data grid that pairs with any chart — sorting, filtering, pagination, selection and export.

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

Full DataTable reference →

React

A thin wrapper that drives a chart from props and cleans up on unmount.

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

Every type listed here is rendered live in the gallery, with data shapes in Chart Types.