Three ways to build a trading chart: Lightweight Charts, MetaTrader 5 and Highcharts Stock

Every trading chart solves the same problem: thousands of bars, a few dozen lines computed from them, prices that change several times a second, and a person who needs to read all of it at a glance. The products people use for this made very different choices about where the work happens and who does it. Three of them show the range well.

• Lightweight Charts is a small open-source library for the web. It draws price series, and leaves the trading tools around them to you.
• MetaTrader 5 is a trading platform: a desktop terminal, a web terminal and mobile apps, extended with programs written in its own language, MQL5.
• Highcharts Stock is the financial edition of a general charting suite that draws with SVG, with WebGL brought in for large data.

Everything below comes from their public documentation, linked at the end. We build a chart library ourselves, so we have opinions; we have tried to keep them in the last section.

Lightweight Charts: a fast core, and a plugin API for the rest

Lightweight Charts is open source under the Apache 2.0 licence, with one condition worth knowing before you ship: its licence requires you to name TradingView as the creator, by showing the notice from its NOTICE file and a link to tradingview.com on a public page of your site or app. TradingView lists the component at 35 KB.

What it draws are series: area, bar, baseline, candlestick, histogram and line, each added with chart.addSeries(). A series cannot change type once added. The current version (5.2) can split a chart into panes, so price and volume can sit in separate areas of one chart, with an API to add panes, move series between them and resize them. A series can also carry price lines, horizontal lines at a price with a title, created in code.

The docs present indicators and drawing tools as things you build with plugins:

• a custom series is a new way to draw data, with its own data shape and renderer;
• a series primitive is attached to a series and drawn in its coordinates: a drawing tool, an annotation, an overlay. It can also draw on the price and time scales;
• a pane primitive belongs to a whole pane, a watermark for example, and cannot draw on the scales.

What it gets right. The core is small and stays small, because everything that is not a series lives outside it. The primitive split is a clean way to say where a plugin may draw.

What it leaves to you. Indicators, drawing tools and their editing, orders you can drag on the chart, a toolbar: if your product needs a trading screen rather than a price chart, that is most of the work. The docs also note it is client-side only and not meant to run on the server.

TradingView’s other web libraries cover that ground. Its comparison page lists Advanced Charts (670 KB, “100+” indicators, more than 80 drawing tools), free with the TradingView logo, and Trading Platform (900 KB, adding trading from the chart, watchlists, multiple chart layouts and the option to disable branding), which connects to a broker’s back end for data and order routing. Both are proprietary, and the page says they are provided to companies for public web projects, not for personal use, hobbies, studies or testing. You host them yourself.

MetaTrader 5: the chart as part of a platform

MetaTrader 5 is not a library you embed in your own product; it is the platform brokers offer their clients, on the desktop, in the browser and on phones. Its desktop help lists 38 technical indicators and 44 graphical objects; the web terminal has a smaller set and places orders from the chart or from market depth. What makes it interesting to anyone building charts is how it lets users extend the chart, because that design has been in use for about fifteen years and is very explicit about computation.

A custom indicator is an MQL5 program. Its values live in indicator buffers: arrays the program binds with SetIndexBuffer(). The program does not resize them; the terminal manages their size as bars arrive.

All of an indicator’s work happens in one function, OnCalculate(), which the terminal calls as prices arrive. It passes the number of bars (rates_total) and the value the function returned last time (prev_calculated). On most ticks they are equal, since a tick usually updates the bar that is still forming; when a new bar opens, rates_total is one more; and when history changes underneath (older bars downloaded, gaps filled), the terminal sets prev_calculated to zero and the indicator recomputes everything. An indicator that respects this does a tiny amount of work per tick no matter how long the history is.

OnCalculate() can also take another indicator’s buffer as its input, so indicators stack: a TEMA of a MACD is an ordinary thing to build. The MQL4 reference’s comparison page puts MQL5’s limits at 512 buffers and 18 drawing styles.

What it gets right. The contract between the platform and the indicator is explicit: who owns the memory, when to compute, how much changed. That is exactly the part web libraries tend to leave vague.

What it leaves to you. Nothing, if you are a trader. If you are building a product of your own, it is a platform you reach through a broker, not a component you put in your page: you can learn from it, not ship it.

Highcharts Stock: SVG first, WebGL when the data gets big

Highcharts describes its library as “based on SVG and some canvas/WebGL”. SVG makes every point a real element, easy to style, animate and make accessible. For data that would be too much to draw that way, Highcharts Stock has two answers.

Data grouping replaces a run of points with one grouped point, sized to the chart’s pixel width (groupPixelWidth), and is on by default for line, area, column, candlestick, OHLC and most indicator series. How a group’s value is made depends on the series: an average for lines, a sum for columns, open-high-low-close for OHLC, or a function of your own.

The Boost module goes further: “a stripped down renderer” that draws the data with WebGL, on a canvas inside the chart’s SVG, so that very large numbers of points can be drawn quickly. It switches on per series above a threshold (5,000 points by default). The page is clear about the trade: columns become 1 px lines, areas lose their line, dash styles and most marker shapes are not supported, and most interactive features such as animation are off.

Indicators are modules. The base module includes SMA; each of the other indicators (the docs list 48, overlays and oscillators) is a separate module loaded after it, and attached to a price series with linkedTo. Stock Tools is a module that builds a toolbar around the chart for annotations (the drawing tools), indicators and zooming.

Highcharts is source-available. Its shop sells licences by use: a public website open to users outside your organisation needs a SaaS licence, and a product distributed to or hosted for your customers needs an OEM licence.

What it gets right. Data grouping is the honest answer to “more bars than pixels”: draw what can be seen. Modules per indicator keep the download to what a page uses.

What it leaves to you. Order entry: there is no built-in way to place or drag orders on the chart. And because the fast path and the full-featured path are different renderers with different abilities, you choose features with the data size in mind.

Side by side

	Lightweight Charts	MetaTrader 5	Highcharts Stock
What it is	Web library	Trading platform (desktop, web, mobile)	Web library
Licence	Apache 2.0, attribution shown on a public page	Offered through brokers	Source-available, licences by use
Drawing	Canvas	The platform’s own	SVG; WebGL with Boost
Indicators	Yours, as plugins	38 built in (desktop), and MQL5 programs	48 (SMA in the base module, the others one module each)
Drawing tools	Yours, as plugins	44 graphical objects (desktop)	Annotations, with the Stock Tools toolbar
Trading on the chart	Not built in	Yes	Not built in
Large data	A small core	Incremental OnCalculate	Data grouping, Boost

Ideas worth borrowing

Building TradeCanvas, these are the ideas from this group we think every trading chart should have, whoever writes it:

1. An explicit contract for computing indicators. MetaTrader’s prev_calculated is the right model: on a tick, recompute the last bar, not the history. TradeCanvas indicators can implement update() for exactly this, and fall back to a full calculation when the bars underneath change.
2. Draw what can be seen. A million bars on a 1,000-pixel axis is a thousand columns of pixels; data grouping makes the work scale with the screen, not with the history.
3. Say where a plugin may draw. Series primitives and pane primitives are a good split. A plugin that can draw anywhere eventually draws over something it should not.
4. Decide what a faster renderer may drop. Boost trades features for speed, openly. We made the other choice for TradeCanvas: our WebGL renderer (still a preview) draws what the GPU can draw the same and hands the rest to Canvas 2D in order, so switching renderer changes speed, not what is drawn. Both are reasonable; the point is to choose and say so.

TradeCanvas is a trading chart library for the web under the MIT licence: indicators, drawing tools, orders on the chart and a widget around it, with no logo or credit required on screen. The next posts in this series take the problems of building it one at a time.