How to draw candlesticks in your own app

The short way

Lightweight Charts puts candles on a page in about ten lines, with no account and nothing to buy:

import { createChart, CandlestickSeries } from 'lightweight-charts';

const chart = createChart(document.getElementById('container'));
const series = chart.addSeries(CandlestickSeries, {
  upColor: '#26a69a',
  downColor: '#ef5350',
  borderVisible: false,
});

series.setData([
  { time: '2018-12-22', open: 75.16, high: 82.84, low: 36.16, close: 45.72 },
  { time: '2018-12-23', open: 45.12, high: 53.90, low: 45.12, close: 48.09 },
]);

chart.timeScale().fitContent();

That is the whole contract: a container element, a series type, an array of OHLC objects keyed by time. The library never fetches anything, so where those objects come from is your problem and not its. Two things are already decided by those ten lines, and both are on the rest of this page — you have no indicators, and you have an attribution obligation.

What the options are

A renderer and nothing above it. Lightweight Charts is Apache-2.0, canvas, and six series types, with no indicators, no drawing tools, no symbol search and no datafeed adapter. TradingView's own comparison page puts it at 35 KB; the 5.2.1 standalone production bundle is 198 KB minified and about 62 KB gzipped, which is the number to budget against. A trendline layer and a moving average are both yours to write on the plugin API.

A renderer that already has the analysis layer. KLineChart is the same licence and roughly the same weight — 58 KB gzipped, zero runtime dependencies — and version 10.0.3 registers 27 technical indicators and 16 drawing overlays. Its NOTICE credits both KLineChart and TradingView's Lightweight Charts, so shipping it means shipping a TradingView attribution even though it is not a TradingView project.

Everything, free, with a link on the chart. amCharts 5 Stock Chart is the unusual bargain in this category: 34 indicator modules, 19 drawing tools, a period and series-type toolbar, and a LICENSE that permits all of it in a commercial product provided the branding link stays. Paying is what removes the link — $64 a year per developer seat for a public site with no login, $224 for anything behind one.

Free, closed, and only if you qualify. TradingView Advanced Charts has no fee clause at all and arrives with 100+ indicators and the interface most traders already recognise. The eligibility test is the price: companies only, a publicly accessible implementation offered free to its users, a mandatory non-nofollow attribution link and a published announcement of the partnership. TradingView's public FAQ says it plainly — not for personal use, hobbies, studies or testing.

Paid per seat, with a support contract behind it. Highcharts Stock ships 48 indicators, a navigator strip, a range selector and data grouping, at $732 a year per developer for Core plus Stock on one public application. AnyStock sells per product and per registered domain from $139, with about 36 indicators and 18 drawing tools. SciChart.js is the WebGL and WebAssembly option at $1,349.66 a year per developer, and ships no indicators at all — the ones in its demos are example source you copy.

The library the rest of the dashboard already uses. Apache ECharts has a candlestick series and no financial scaffolding around it; Plotly.js has candlestick and ohlc traces under MIT and is the same renderer that draws a notebook figure. Both are the right answer when the price chart is one panel among twenty and one library for all of them is worth more than the financial affordances you will hand-build. Neither is the right answer when the chart is the product.

Where this breaks

Attribution follows the build, not the repository. Apache-2.0 clause 4(d) requires a redistributor to reproduce the attribution notices from the project's NOTICE file — in a NOTICE file of your own, in your documentation, or wherever third-party notices normally appear in what you generate. That obligation attaches to the thing you ship, not to your source tree, and it is the part people discover after launch. Lightweight Charts adds a second half on top of the licence: its documentation asks for the NOTICE text and a link to tradingview.com, and the attributionLogo layout option, which defaults to true, is what satisfies the link half by drawing it on the chart. Switch it off and you owe the link somewhere else.

Free of charge and open source are different words. Four libraries here are free and only two of them are open:

• amCharts calls its own terms linkware. You may use it commercially, modify it and bundle it, provided you do not disable, hide or alter the branding link, and you ship the LICENSE file. You may not sell the software itself or distribute it other than as part of an application.
• TradingView Advanced Charts ships no source at all, and clause 2.5 bars the library from any public code repository and requires that your project is not open source. Clause 7.5 sets liquidated damages at $50,000 for each proven breach.
• Highcharts publishes its full source on GitHub and npm and is still proprietary: GitHub reports no recognised licence, there is no SPDX identifier to check, and the terms are the EULA.
• SciChart's Community build is non-commercial only, carries a watermark that can be moved but not hidden, sends telemetry that cannot be turned off, and is valid for six months from the release date of the version you shipped. Rebuilding does not reset the clock — you upgrade and redeploy, or the chart draws an error.

A seat is per developer, and the deployment moves the price more than the tier does. Highsoft's Standard License Agreement defines a Developer as any unnamed person, employee or contractor, "who will be simultaneously working with the API and/or the source code of the Licensed Software" — so the number you are buying is concurrent developers, and a three-person team triples the figure. The second axis is where the thing runs: on Highcharts, internal-only is $370 a year against $732 for one public application and $2,198 for up to five. AnyStock counts differently again — per product, per domain you register at purchase, with the $139 Website tier void the moment your site has a login of any kind. SciChart's JavaScript SKUs issue runtime keys locked to domains you register by hand, and the only route to an unlocked key is a cross-platform bundle that costs more than the JavaScript product itself.

Some of the free ones are free on application. Advanced Charts is a form, an approval and then an invitation to a private GitHub repository; AnyChart's non-commercial licence is granted by request through a form rather than downloaded. Neither is a package manager away, and neither is a decision you can make on a Friday afternoon.

You still write the adapter. Not one library on this page ships market data, a symbol, a session or a holiday calendar, and the gap between "renders OHLC" and "renders a trading chart" is most of the work:

• The row order is not standard. An ECharts candlestick item is [open, close, lowest, highest] rather than the open-high-low-close almost every feed returns, remapped through encode: { y: [1, 4, 3, 2] }.
• Weekend gaps are the default on a real date axis. Plotly.js leaves flat holes across Saturdays, holidays and the overnight session until you configure rangebreaks, and the holiday list is yours to maintain per exchange, forever. ECharts dodges it with a category axis of trading dates instead.
• A volume pane is assembly, not a flag. In ECharts it is a second grid with its own axis pair, a bar series pointed at it, axisPointer.link for a crosshair across both, and every dataZoom listing both axis indices. The project's own large-scale candlestick example spends 133 lines of option object on that, before a single indicator exists.
• Live updates have their own API. Appending a tick is Plotly.extendTraces, series.update(), or updateData depending on the library — and ECharts documents incremental rendering for scatter and lines but not for candlesticks, so a live chart there is setOption with the series again.

A performance claim is about points on screen, not rows in memory. SciChart advertises real-time rendering of up to 100 million points at 60 FPS, with no published method behind it. Lightweight Charts says "responsive even with thousands of bars" and publishes no figure at all; its opt-in data conflation, added in 5.1.0 and off by default, is aimed at tens of thousands of points and up. ECharts turns large: true on above 600 candles and its own documentation says that in that mode the style of an individual data item can no longer be customised — a rendering optimisation that silently takes a feature away. Plotly has no WebGL candlestick or OHLC trace at all, so a price chart there is SVG at any size, one path per bar. The figure that matters is the one your data produces on your page, and none of these numbers is it.

If you outgrow this

When the chart becomes the product, the missing piece is almost always the indicator and drawing layer rather than the renderer, and that is the moment the licence question gets expensive. The three honest exits are paying per seat, qualifying for Advanced Charts, or accepting the amCharts link — and the fourth, building the layer yourself on a plugin API, is the one people underestimate. Everything in this catalogue that draws a chart inside your own code is in JavaScript charting libraries for finance, and the ones you can read the source of are in open source.

When the data behind it becomes the problem, that is a separate shopping trip with none of the same vendors. Market data APIs is the catalogue side of it, how to stream real-time stock quotes is the mechanics of getting updates into the chart, and why real-time stock data is so expensive is why putting a live quote on a public page costs more than everything on this page combined.

When the series stops fitting in a request, the chart is no longer the constraint. Where a year of ticks lives, and what it costs to run, is tick data storage.