trendkit

Drawing tools for Lightweight Charts — trendlines, rays, Fibonacci retracements, zones and a measure tool, built on the v5 plugin API.

Status: pre-release. Five drawing tools and three indicators work and are verified in a browser. Not yet published to npm — the React entry point and the documentation pass are still to come.

Why

Lightweight Charts is excellent and free, but it draws data — not the things a discretionary trader puts on the data. Since v5 it exposes a plugin API (attachPrimitive, hitTest, two-way coordinate conversion) that makes the missing layer buildable. trendkit is that layer.

Install

npm install trendkit lightweight-charts

lightweight-charts is a peer dependency — trendkit never bundles its own copy, because two chart runtimes in one page means two sets of instanceof checks that disagree.

Use

import { createChart, CandlestickSeries } from "lightweight-charts";
import { createTrendkit, Trendline } from "trendkit";

const chart = createChart(container);
const series = chart.addSeries(CandlestickSeries);
series.setData(candles);

const kit = createTrendkit({ chart, series, tools: [Trendline] });

kit.store.add({
  id: crypto.randomUUID(),
  tool: "trendline",
  points: [
    { time: candles[20].time, logical: 20, price: 102.65 },
    { time: candles[120].time, logical: 120, price: 112.80 },
  ],
});

Only the tools you pass are bundled — the package is sideEffects: false, so anything you leave out is tree-shaken away.

Indicators

Independent of the drawing tools — use either alone.

import { addIndicator } from "trendkit";

const rsi = addIndicator(chart, { type: "rsi", period: 14 }, candles);
addIndicator(chart, { type: "macd" }, candles);            // 12/26/9
addIndicator(chart, { type: "bollinger" }, candles);       // 20, 2σ

rsi.setData(moreCandles);   // recompute
rsi.remove();               // takes its pane with it

RSI and MACD get their own panes; Bollinger overlays the price pane, because it is the only one of the three measured in price units.

The maths follows the conventions the rest of the industry uses, which is mostly a matter of getting three things right: RSI uses Wilder's smoothing (k = 1/n), not an EMA; MACD's EMAs are seeded with an SMA, and its signal line skips the leading nulls rather than treating them as zeros; Bollinger uses population standard deviation, not sample. Each of those is a way to produce numbers that look plausible and disagree with every other platform.

The raw functions are exported too, if you only want the numbers:

import { rsi, macd, bollinger, ema, sma, wilder, stdev } from "trendkit";

Persistence

toJSON() and fromJSON() are the whole story. Where the result is stored is your decision, not the library's:

kit.store.subscribe(() => localStorage.setItem("drawings", JSON.stringify(kit.toJSON())));

Two things it gets right

Drawings are anchored in (time, price), never pixels. A trendline through two candles stays through those candles when you pan, zoom or resize. Points dragged past the last bar — where there is no Time to convert — fall back to the logical bar index, so projections into empty space keep working.

Rendering happens in bitmap space, not CSS pixels. On a Retina screen a 1px line drawn in CSS pixels lands across two device pixels and renders as a grey smear. trendkit snaps to the device grid: measured on a DPR 2 display, a 2px line is 4 fully opaque device rows with 2 antialiased edges.

Development

npm install
npm run dev        # the example at localhost:5174
npm test
npm run verify     # typecheck + lint + test + build

vitest is pinned to v3. npm 10.9.2 crashes with Cannot read properties of null (reading 'edgesOut') while resolving vitest 4's peer graph — an npm bug, not a vitest one. Revisit when npm 11 is common.

Licence

MIT