lightweight-charts draws a fast candlestick chart on a canvas, but it ships no React component. Here is a typed one for version 5: candles and volume, live bars without re-renders, cleanup that survives Strict Mode, and the TradingView link its licence asks for. If you want the whole trading screen around the chart, Ledger is free.
"use client";
import { useEffect, useRef } from "react";
import {
CandlestickSeries,
ColorType,
HistogramSeries,
createChart,
type IChartApi,
type ISeriesApi,
type UTCTimestamp,
} from "lightweight-charts";
export type Candle = {
time: UTCTimestamp; // seconds since epoch, UTC
open: number;
high: number;
low: number;
close: number;
volume?: number;
};
/** Called once the chart exists. Push each new or changed bar to onBar; return a cleanup. */
export type Subscribe = (onBar: (bar: Candle) => void) => () => void;
const UP = "#22c55e";
const DOWN = "#ef4444";
const toBar = ({ time, open, high, low, close }: Candle) => ({ time, open, high, low, close });
const toVolume = (c: Candle) => ({
time: c.time,
value: c.volume ?? 0,
color: c.close >= c.open ? "rgba(34,197,94,0.35)" : "rgba(239,68,68,0.35)",
});
export function CandleChart({
candles,
subscribe,
className = "h-[420px] w-full",
}: {
candles: Candle[]; // oldest first
subscribe?: Subscribe;
className?: string;
}) {
const box = useRef<HTMLDivElement>(null);
const chartRef = useRef<IChartApi | null>(null);
const priceRef = useRef<ISeriesApi<"Candlestick"> | null>(null);
const volumeRef = useRef<ISeriesApi<"Histogram"> | null>(null);
// 1. Create the chart once, in the browser. createChart needs the DOM,
// so it lives in an effect, never in the render body.
useEffect(() => {
const el = box.current;
if (!el) return;
const chart = createChart(el, {
autoSize: true, // follows the div's size, no resize listener needed
layout: {
background: { type: ColorType.Solid, color: "transparent" },
textColor: "#a1a1aa",
attributionLogo: true, // the TradingView link the licence asks for
},
grid: {
vertLines: { color: "rgba(255,255,255,0.04)" },
horzLines: { color: "rgba(255,255,255,0.04)" },
},
rightPriceScale: { borderVisible: false },
timeScale: { borderVisible: false, timeVisible: true },
});
const price = chart.addSeries(CandlestickSeries, {
upColor: UP,
downColor: DOWN,
borderVisible: false,
wickUpColor: UP,
wickDownColor: DOWN,
});
price.priceScale().applyOptions({ scaleMargins: { top: 0.08, bottom: 0.28 } });
// Volume on its own overlay scale, squeezed into the bottom fifth.
const volume = chart.addSeries(HistogramSeries, { priceFormat: { type: "volume" }, priceScaleId: "" });
volume.priceScale().applyOptions({ scaleMargins: { top: 0.8, bottom: 0 } });
chartRef.current = chart;
priceRef.current = price;
volumeRef.current = volume;
return () => {
chart.remove(); // frees the canvases; Strict Mode mounts twice in dev
chartRef.current = null;
priceRef.current = null;
volumeRef.current = null;
};
}, []);
// 2. Full data: first load, or a new symbol or interval. setData replaces everything.
useEffect(() => {
if (!priceRef.current || !volumeRef.current) return;
priceRef.current.setData(candles.map(toBar));
volumeRef.current.setData(candles.map(toVolume));
chartRef.current?.timeScale().fitContent();
}, [candles]);
// 3. Live bars: update() replaces the last bar when the time matches and
// appends when it is newer. No re-render, the zoom stays where it was.
useEffect(() => {
if (!subscribe) return;
return subscribe((bar) => {
priceRef.current?.update(toBar(bar));
volumeRef.current?.update(toVolume(bar));
});
}, [subscribe]);
return <div ref={box} className={className} />;
}import type { UTCTimestamp } from "lightweight-charts";
import type { Candle } from "@/components/candle-chart";
// Coinbase Exchange public candles: no key needed.
// Each row is [time, low, high, open, close, volume], newest first.
type Row = [number, number, number, number, number, number];
export const toCandles = (rows: Row[]): Candle[] =>
rows
.map(([time, low, high, open, close, volume]) => ({ time: time as UTCTimestamp, open, high, low, close, volume }))
.sort((a, b) => a.time - b.time); // the chart wants the oldest bar first
export async function getCandles(product = "BTC-USD", granularity = 3600): Promise<Candle[]> {
const res = await fetch(
`https://api.exchange.coinbase.com/products/${product}/candles?granularity=${granularity}`,
{ next: { revalidate: 60 } },
);
if (!res.ok) throw new Error(`Coinbase said ${res.status}`);
return toCandles((await res.json()) as Row[]);
}"use client";
import { useCallback } from "react";
import { CandleChart, type Candle, type Subscribe } from "@/components/candle-chart";
import { toCandles } from "@/lib/candles";
// Polls the newest bar every 15 s and hands it to the chart. Swap this for your
// own websocket: whatever you use, call onBar with the latest bar.
export function LiveChart({ initial, product = "BTC-USD", granularity = 3600 }: { initial: Candle[]; product?: string; granularity?: number }) {
const subscribe = useCallback<Subscribe>(
(onBar) => {
let stop = false;
const tick = async () => {
try {
const res = await fetch(`https://api.exchange.coinbase.com/products/${product}/candles?granularity=${granularity}`);
if (!res.ok || stop) return;
const bars = toCandles(await res.json());
const last = bars[bars.length - 1];
if (last) onBar(last);
} catch {
// offline for a moment: the next tick tries again
}
};
const id = setInterval(tick, 15_000);
return () => {
stop = true;
clearInterval(id);
};
},
[product, granularity],
);
return <CandleChart candles={initial} subscribe={subscribe} />;
}import { getCandles } from "@/lib/candles";
import { LiveChart } from "@/components/live-chart";
export default async function Page() {
const initial = await getCandles("BTC-USD", 3600); // runs on the server
return (
<main className="mx-auto max-w-5xl p-6">
<h1 className="mb-4 text-lg font-semibold">BTC-USD, 1 hour</h1>
<LiveChart initial={initial} />
</main>
);
}npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/ledger-dashboard.jsonAll comparisons, with prices read on each library's own site.
No. Importing lightweight-charts on the server works; only createChart needs the DOM, and it runs inside useEffect, which never runs on the server.
React Strict Mode mounts effects twice in development. Without chart.remove() in the cleanup you get a second canvas. The component removes the chart on unmount.
The Apache-2.0 licence and the README ask for the attribution notice and a link to tradingview.com on your page. The logo is the easy way to give that link. If you link it somewhere else on the page, you can set attributionLogo: false.
No. Ledger draws its own SVG candles with no chart library. It's free and MIT, and its data lives in one store.ts file.
Yes. The folder has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code.