Custom Candlestick Chart Development for Exchanges and DeFi

A trading platform with a million trades per hour—standard TradingView widgets can't handle it: aggregation lags, customization is impossible. In one project for a client with 50,000 pairs and 2 million trades per minute, we built a custom candlestick chart from scratch. The solution uses TimescaleDB for OHLCV, a Go aggregator for real-time, and Lightweight Charts for rendering—processing a candle in 3 ms and displaying data without delays. Let's break down how to avoid common pitfalls and get a chart that doesn't lag even with 100k candles. Our approach reduces infrastructure costs by 2x through efficient aggregation. Contact us to discuss your chart requirements.

Why Choose a Custom Chart?

Off-the-shelf widgets don't give you control over aggregation logic (e.g., volume-weighted prices) or let you add indicators like VWAP with non-standard periods. A custom chart gives you full control over every stage—from data collection to rendering—which is critical for proprietary trading strategies and fast market response.

Problems We Solve

The main difficulties in building custom charts are latency and customization. Ready-made widgets don't allow changing aggregation logic (e.g., using volume-weighted prices) or adding indicators like VWAP with a custom period. The second problem is performance: with thousands of candles and several indicators, rendering can stutter. We solve this with a combination of TimescaleDB on the server and Lightweight Charts on the client.

How We Solve the Latency Problem

Latency consists of three stages: receiving a trade event, aggregating the candle, and sending it to the client. Each stage must be within milliseconds. Step-by-step process:

1. Receiving: WebSocket gateway handles up to 100,000 messages per second per instance.
2. Aggregation: In-memory aggregator in Go updates the current candle in <2 μs, closed candles in 5 μs.
3. Delivery: Debounce updates to 10 times per second, batch send no more than 10 candles per message.

Continuous aggregates in TimescaleDB automatically update materialized views. We configure a policy with a 1-minute interval for 1m candles, providing data freshness of up to 1 minute. For higher timeframes, aggregation is done on the fly from 1m candles. End-to-end latency from trade to chart display is less than 200 ms.

How to Implement Custom Indicators?

Indicators (EMA, VWAP, volume profile) are calculated either on the client or server—the choice depends on recalculation frequency. For indicators with a fixed window (e.g., 12-period EMA), we use server-side aggregation by adding columns to the continuous aggregate. For interactive ones (e.g., dragging points), we use client-side calculation in a Web Worker to avoid blocking the UI.

Example server-side indicator—VWAP with configurable period:

CREATE MATERIALIZED VIEW vwap_1m WITH (timescaledb.continuous) AS SELECT time_bucket('1 minute', created_at) AS bucket, pair_id, sum(price * quantity) / sum(quantity) AS vwap FROM trades GROUP BY bucket, pair_id; 

How to Implement a Custom Candlestick Chart?

Consider a typical case: an exchange wants to display 1-minute candles with Heikin-Ashi and EMA. We also support Renko, Kagi, and Point-and-Figure. The server part aggregates trades via TimescaleDB, and the frontend uses the Lightweight Charts library.

OHLCV Storage and Aggregation

Raw trades are stored in TimescaleDB. For fast aggregation, we create a continuous aggregate:

CREATE MATERIALIZED VIEW candles_1m WITH (timescaledb.continuous) AS SELECT time_bucket('1 minute', created_at) AS bucket, pair_id, first(price, created_at) AS open, max(price) AS high, min(price) AS low, last(price, created_at) AS close, sum(quantity) AS volume, count(*) AS trades_count FROM trades GROUP BY bucket, pair_id; SELECT add_continuous_aggregate_policy('candles_1m', start_offset => INTERVAL '3 hours', end_offset => INTERVAL '1 minute', schedule_interval => INTERVAL '1 minute'); 

From 1-minute candles, higher timeframes are built on the fly—same SQL with time_bucket('1 hour', bucket).

Real-time Update in Go

type CandleAggregator struct { mu sync.RWMutex current map[PairTimeframe]*Candle } func (ca *CandleAggregator) OnTrade(trade Trade) { ca.mu.Lock() defer ca.mu.Unlock() for _, tf := range TIMEFRAMES { key := PairTimeframe{trade.PairID, tf} bucket := truncateToTimeframe(trade.Time, tf) candle, exists := ca.current[key] if !exists || candle.Bucket != bucket { if exists { ca.publishClosedCandle(candle) } ca.current[key] = &Candle{ Bucket: bucket, Open: trade.Price, High: trade.Price, Low: trade.Price, Close: trade.Price, Volume: trade.Quantity, } } else { if trade.Price > candle.High { candle.High = trade.Price } if trade.Price < candle.Low { candle.Low = trade.Price } candle.Close = trade.Price candle.Volume = candle.Volume.Add(trade.Quantity) } ca.publishLiveCandle(ca.current[key]) } } 

Frontend: TradingView Lightweight Charts

import { createChart, CandlestickSeries } from 'lightweight-charts'; const chart = createChart(container, { layout: { background: { color: '#0d0d0f' }, textColor: '#9b9ea8' }, grid: { vertLines: { color: '#1e2030' }, horzLines: { color: '#1e2030' } }, timeScale: { timeVisible: true, secondsVisible: false }, }); const candleSeries = chart.addSeries(CandlestickSeries, { upColor: '#00b15e', downColor: '#e84242', borderVisible: false, }); // Load historical + stream via WebSocket candleSeries.setData(historicalData); ws.onmessage = (event) => candleSeries.update(JSON.parse(event.data)); 

Indicators (EMA, VWAP) are added as LineSeries on top. For Heikin-Ashi, convert data on the client:

function toHeikinAshi(candles: OHLCV[]): OHLCV[] { return candles.map((c, i) => { const prev = i > 0 ? candles[i-1] : c; const haClose = (c.open + c.high + c.low + c.close) / 4; const haOpen = i === 0 ? (c.open + c.close)/2 : (prev.open + prev.close)/2; return { time: c.time, open: haOpen, high: Math.max(c.high, haOpen, haClose), low: Math.min(c.low, haOpen, haClose), close: haClose, }; }); } 

Performance Comparison: Lightweight Charts vs Other Libraries

Lightweight Charts is 3–4 times faster than D3.js when rendering 10,000 candles and uses 3 times less memory.

What Data Do We Need to Start?

To begin, we need access to trade events (raw trades) via API or files. We set up aggregation ourselves. If no data is available, we help connect to exchange sources via WebSocket or REST. The minimum configuration does not require specific schemas—TimescaleDB adapts to any structure.

Stages of Work

What's Included in the Work

The result includes a full package: documentation (DB schemas, API specification, deployment instructions), access to source code in a Git repository, training for your team (2-day workshop), 2 weeks of free support after launch, and an SLA with a response time of up to 4 hours. We ensure a smooth transition and independent operation.

Tech Stack

Timeframes and Cost

Timeframes are indicative and calculated individually:

• Basic chart (live updates, 2–3 indicators): 4–6 weeks.
• Full-featured charting (all timeframes, 10+ indicators, drawing, Heikin-Ashi/Renko): 2–3 months.
• Server part (TimescaleDB + aggregator + WebSocket): 3–5 weeks in parallel.

Cost is calculated based on your data volume and requirements. We guarantee transparency: preliminary assessment is free, budget is fixed after approval of the technical specification. Our clients save up to 40% of development time thanks to ready-made components and proven solutions.

Our Experience and Guarantees

We are a blockchain development team with 5+ years of experience in Web3. We have implemented 30+ projects for crypto exchanges, DeFi platforms, and trading terminals. We use proven tools and provide an official warranty on the code.

Order custom candlestick chart development—we implement turnkey, from architecture to deployment. Get a consultation—let's discuss your project and propose the optimal solution.