Open Source JavaScript Libraries for Candlestick Charts

Building a candlestick stock chart (like TradingView) can be achieved using several open-source JavaScript libraries. Below we survey open-source charting libraries that support candlestick/OHLC charts, focusing on interactivity (zoom, pan, tooltips), modern browser support, and compatibility with React or plain JS.

TradingView Lightweight Charts (Apache 2.0 License)

TradingView provides an official open-source charting library called Lightweight Charts. It’s a free, high-performance HTML5 canvas library maintained by TradingView. Key features include:

Candlestick & OHLC Support: Designed for financial time-series – supports candlestick, OHLC, bars, line, area, etc., similar in style to TradingView’s own charts.
Interactive & Real-time: Highly interactive charts with tooltips, real-time streaming updates, and crosshairs. It’s optimized for live data (updates multiple times per second) while remaining responsive.
Lightweight & Fast: Only ~35–45 KB, yet capable of handling thousands of data points smoothly. It’s engineered for performance with large datasets.
Responsive & Mobile-Friendly: Charts work on desktops and are touch-optimized for mobile/tablet (pinch-zoom, panning). Modern ES2020 syntax is used, so only modern browsers are supported (no IE).

Usage: Can be used with plain JS or integrated into React (via wrappers or by calling createChart in a React effect). For example, in plain JS:

import { createChart } from 'lightweight-charts';
const chart = createChart(document.getElementById('container'), { width: 600, height: 300 });
const candlestickSeries = chart.addCandlestickSeries({
    upColor: '#26a69a', downColor: '#ef5350', borderVisible: false,
    wickUpColor: '#26a69a', wickDownColor: '#ef5350'
});
candlestickSeries.setData([
    { time: '2025-07-01', open: 75.16, high: 82.84, low: 70.16, close: 80.72 },
    { time: '2025-07-02', open: 81.12, high: 83.90, low: 78.12, close: 79.55 },
    // ... more data points
]);

This creates an interactive candlestick chart. The library also supports adding volume bars, multiple series, custom markers, etc. TradingView’s Lightweight Charts are widely used in fintech – TradingView notes it’s trusted by over 40,000 companies and millions of traders. Its combination of small size, rich features, and Apache 2.0 license makes it a top choice for candlestick charts.

Apache ECharts (Apache 2.0 License)

Apache ECharts (formerly Baidu ECharts) is a powerful open-source charting library that supports a wide range of chart types, including candlestick (a.k.a. K-line) charts. It’s free to use and highly customizable. Notable features:

Candlestick & Technical Charts: Candlestick and OHLC series are built-in, with options for styling (solid/hollow candles, custom colors) and combining with other series (e.g. overlay line indicators). ECharts also supports indicators and custom series if you need advanced technical analysis overlays.
Interactive & Feature-Rich: ECharts comes with interactive components like tooltips, zooming and panning (via dataZoom slider or pinch), legends, and annotations out-of-the-box. Users can zoom into time ranges or hover to see values easily.
Performance: Built on a canvas-based rendering engine (ZRender), ECharts can handle large datasets (even millions of points) efficiently with incremental rendering. It also supports WebGL acceleration via extensions.
Mobile & Modern Support: Optimized for both PC and mobile; supports modern browsers (and even IE9+ if needed). Since you only target modern browsers, ECharts’ default build (using Canvas or SVG) will work great.
Usage (JS/React): ECharts can be used in plain JS by including the library and configuring an option object. For example:
```
var chart = echarts.init(domElement);
var options = {
    xAxis: { type: 'category', data: datesArray },
    yAxis: { scale: true },
    series: [{
        type: 'candlestick',
        data: ohlcDataArray  // e.g. [ [open, close, low, high], ... ]
    }]
};
chart.setOption(options);
```
In React, you can use the official echarts-for-react wrapper. ECharts’ website provides many candlestick examples with “copy-ready” code, making it relatively easy to get started. Given its rich feature set and free availability, ECharts is a popular choice for interactive financial charts.

Chart.js (MIT License) + Financial Plugin

Chart.js is a very popular open-source charting library. While core Chart.js (v4) supports basic chart types, candlestick charts are available via an official financial chart plugin. The combination is entirely free (MIT license). Key points:

Candlestick Support via Plugin: The chartjs-chart-financial plugin provides candlestick and OHLC chart types for Chart.js. Once you include this plugin, you can create charts with type: 'candlestick' or 'ohlc'. The data format is typically an array of objects with o, h, l, c values or a compatible dataset format.
Interactive Features: Chart.js provides tooltips on hover, and the financial plugin integrates with Chart.js time scales for proper date/time handling. For zooming and panning, you can add the Chart.js zoom plugin (another open-source addon) since interactivity beyond tooltips is not built-in to core Chart.js. Modern browsers are supported (legacy IE may need polyfills for the date library).
Usage (JS/React): In plain JS, you might do:
```
import 'chartjs-chart-financial';
const data = [{ t: '2025-07-01', o: 75.1, h: 82.8, l: 70.1, c: 80.7 }, ...];
new Chart(ctx, {
  type: 'candlestick',
  data: { datasets: [{ label: 'Stock', data }] },
  options: { scales: { x: { type: 'timeseries' } } }
});
```
There are also React wrappers (e.g. react-chartjs-2) which can work with this plugin. Chart.js’s advantage is its simplicity and huge community. It’s a bit heavier on bundle size than some niche libs, and for very large datasets performance might suffer compared to specialized libraries. However, for moderate data sizes and basic interactivity, it’s a solid open-source choice.

Plotly.js (MIT License)

Plotly.js is an open-source JavaScript graphing library known for its interactive, publication-quality charts. It fully supports candlestick and financial charts out of the box. Important aspects:

Built-in Candlestick Charts: Plotly’s type: 'candlestick' trace lets you create candlestick charts without extra plugins. You simply supply arrays of open, high, low, close, and x (dates) in a trace definition. Plotly will render an interactive candlestick chart with default colors (green/red) and a draggable date range slider for the x-axis.
Highly Interactive: Plotly charts have rich interactivity by default – hover tooltips, click-drag zooming, panning, autoscaling, and the ability to toggle series on/off via legend. These work automatically for candlestick charts. This interactivity is comparable to trading platforms: users can zoom into specific time windows or hover to see OHLC values.
No Cost & Offline Use: Plotly.js is completely free and open-source (MIT licensed). You can use it without any account or internet connection (the library works offline in your web app).
Integration: Works with plain JS (include the script or npm install). Plotly also has a React wrapper (react-plotly.js) for easy integration into React apps. The library is somewhat large in size (~3MB if including all plot types), but you can custom-build a smaller bundle if needed.
Usage Example: In JS, constructing a candlestick:
```
const trace = {
  x: datesArray,
  open: openPrices, high: highPrices, low: lowPrices, close: closePrices,
  type: 'candlestick',
  increasing: { line: {color: '#17BECF'} },  // optional custom colors
  decreasing: { line: {color: '#7F7F7F'} }
};
Plotly.newPlot('chartDiv', [trace], { margin: { t: 30, b: 50 }, dragmode: 'zoom' });
```
This will render an interactive candlestick chart with zoom controls, and a range slider by default on the x-axis. Plotly is a great option if you need powerful interactivity and are okay with the larger bundle. It’s used in many data analytics dashboards and can handle moderate-sized datasets (for very large data or high-frequency updates, lighter libraries like those above may perform better).

ApexCharts.js (MIT License)

ApexCharts is a modern open-source charting library that includes candlestick charts among ~20 chart types. It’s a commercial-friendly MIT-licensed project with an active community. Highlights:

Candlestick Chart Type: ApexCharts has a first-class candlestick chart type (no plugin needed). You can simply set chart: { type: 'candlestick' } in the options and provide OHLC data. The library handles rendering the candles and wicks, coloring them (green/red by default, customizable), etc.. It also supports mixed charts (e.g., candlestick with a line overlay for moving average).
Interactivity: Charts are interactive – by default you get tooltips showing OHLC on hover, ability to zoom (selection zoom or pinch on mobile) and pan. ApexCharts even provides a toolbar (with buttons for zoom, pan, reset) and supports synced charts (e.g., a candlestick chart synced with a volume bar chart). This makes it suitable for technical analysis dashboards.
Modern & React-Friendly: ApexCharts targets modern browsers. It uses SVG for rendering, which works well on modern devices (and gracefully in high DPI). For React, there’s an official react-apexcharts package that wraps the library, making it easy to use in React projects (similar wrappers exist for Angular, Vue, etc.).
Usage Example: Using ApexCharts in JS:
```
const options = {
  chart: { type: 'candlestick', height: 350 },
  series: [{
    data: [ 
      { x: new Date('2025-07-01'), y: [74.0, 80.0, 72.4, 78.9] },
      { x: new Date('2025-07-02'), y: [79.0, 85.1, 78.5, 82.3] },
      // ...more points [Date, O, H, L, C]
    ]
  }],
  xaxis: { type: 'datetime' }
};
const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
```
ApexCharts will draw an interactive candlestick chart. The library is known for its clean look and ease of use. According to ApexCharts, it has 1M+ weekly downloads on npm and is MIT licensed. In a Reddit discussion, a developer noted that few libraries have built-in candlestick support, but ApexCharts was one that did and worked well for them. If you need an elegant, open-source solution with good documentation and React integration, ApexCharts is a strong candidate.

D3.js (BSD License) and TechanJS (MIT License)

If you prefer a lower-level approach or need maximum flexibility, D3.js can be used to create candlestick charts from scratch. D3 provides the building blocks (scales, SVG drawing, axis, zoom behaviors), but you would have to implement the candlestick shapes and interactions. This yields high flexibility (and potentially great performance with Canvas or WebGL customizations), but requires more development effort.

An easier path with D3 is to use TechanJS, an open-source library built on D3 specifically for financial charts. TechanJS provides ready-made candlestick/OHLC chart components and technical indicators (moving averages, RSI, volume, etc.). It was created to build interactive stock charts for modern browsers (including mobile). Key points:

Candles & Indicators: TechanJS supports candlestick and OHLC charts out-of-the-box, and includes common overlays/indicators which can be layered on the chart (Bollinger Bands, MACD, etc.). This is useful if your project needs advanced technical analysis features.
Interactive Panning/Zooming: Being based on D3, it supports interactive zoom (e.g., via D3’s zoom behavior) and panning by default. You can scroll through large time series. The charts are rendered in SVG, which works in modern browsers and can be made responsive.
Status: TechanJS is MIT-licensed and quite powerful, but note that it hasn’t seen major updates in recent years (its GitHub was last active around 2016). It still works with D3 v3/v4. If you have a modern stack, you might need to update some parts or consider using D3 directly with newer patterns.
Usage: Using TechanJS typically involves including D3, then TechanJS, and constructing a chart with its API. For example, you would create a chart layout, then add a candlestick series like:
```
var techan = require('techan');  // if using as module
var candlestick = techan.plot.candlestick().xScale(x).yScale(y);
d3.select('#chart').datum(data).call(candlestick);
```
This will draw candlesticks for your OHLC data using D3 scales x and y.

D3 or TechanJS can be a good choice if you need ultimate control or want to integrate the chart deeply with custom DOM/SVG. However, for most use cases where you want quicker results, higher-level libraries like those above will be more convenient.

Recharts (MIT License) and React Stockcharts

If you are working with React, you have React-specific chart libraries:

Recharts: A popular React charting library (built on D3 + SVG). While Recharts is great for many chart types, it does not natively include a candlestick series as of now. It’s possible to construct one by combining low-level components (for example, using an <ErrorBar> to draw wicks and <Bar> for bodies), but there’s no one-liner candlestick component. One Reddit user still recommended Recharts for React due to its ease of use, but be prepared for extra work to achieve true candlesticks. If your project already uses Recharts and the data volume is not huge, a custom candlestick implementation could be done. Otherwise, you might prefer a library with built-in support.
React Stockcharts: This is a specialized React library for financial charts, inspired by D3. It’s MIT-licensed and was quite feature-rich (support for candlesticks, indicators, zoom/pan, etc.). You can plot candlesticks easily and get interactive features similar to TechanJS, but as React components. However, note that React-Stockcharts hasn’t been updated in a while (the maintainer stopped active development a few years ago). It may still work for basic needs, but you might encounter compatibility issues with the latest React.

In summary, if you want to use React, the good news is that most of the above libraries have React wrappers or components (ECharts, ApexCharts, Plotly, TradingView all integrate with React). Using those will likely be easier than hand-coding candlesticks in Recharts. But Recharts can be made to work in a pinch, and React Stockcharts is an option if you are okay with an older library.

μPlot (uPlot, MIT License) – Honorable Mention

For completeness, it’s worth mentioning μPlot (uPlot), an extremely fast and lightweight charting library for time series. μPlot is only ~10 KB and focuses on performance. It can render tens of thousands of points very quickly (often cited as one of the fastest chart libraries). It supports OHLC/candlestick charts (there are demos of candlestick and OHLC on its GitHub). Interactivity is more minimal (it has zoom and pan and tooltips, but not as feature-rich as larger libraries). If performance and size are critical (and you’re willing to handle a bit more configuration), uPlot is a great open-source solution. It works with plain JS (no specific React integration needed, though you can wrap it in a React component).

In conclusion, there are numerous open-source options for candlestick charts. Libraries like TradingView Lightweight Charts, Apache ECharts, ApexCharts, and Plotly.js stand out for providing built-in candlestick support with interactivity, modern browser compatibility, and no licensing fees. If you prefer something React-centric, you can still use these via wrappers, or attempt Recharts/React-Stockcharts. All of the above are suitable for modern web applications – they do not require legacy browser support and will deliver the interactive experience (zooming, hovering, live updates) you need for a stock visualization site. Consider the specific needs of your project (performance, desired features, React integration, etc.) and perhaps try a few demos. With the references and examples provided, you should be able to evaluate which library fits “tradingview-like” candlestick charts for your website.

Sources:

Reddit discussion of free candlestick chart libraries
TradingView Lightweight Charts official page
Apache ECharts documentation and features
Chart.js Financial Chart plugin README
Plotly.js official FAQ (licensing)
ApexCharts candlestick docs and info
TechanJS official site
React-Stockcharts GitHub (MIT license noted)
Chart.js plugin notes on performance (uPlot)