TradeX-chart is a highly customizable stock trade chart with one dependency written in plain JavaScript; use it with any framework or backend.


Live Demo


TradeX-chart targets browsers that support ECMAScript 2022.



npm install tradex-chart

In Browser

<script src=""></script>

How to Use

Minimal working example:

<div id="myChartDiv"></div>


import {Chart, DOM} from 'tradex-chart'
import * as talib from "talib-web"

// minimal data state
let state = {
  "ohlcv": [
// [timestamp, open, high, low, close, volume]

// minimal config
const config = {
  id: "TradeX_test",
  title: "BTC/USDT",
  width: 1000,
  height: 800,
  utils: {none: true},
  tools: {none: true},
  talib: talib,
  // see regarding talib.wasm
  // `${window.location.origin}/talib.wasm`
  rangeLimit: 30,

const mount = document.getElementById('myChartDiv')
const chart = document.createElement("tradex-chart")




Documentation can be found here: Documentation

or built and run locally from the repository by running:

git clone
cd ./tradex-chart/src/docs
npm run build

Editable Live Sandbox Examples

Editable sandbox examples can found on

Framework Integration Examples

* React / NextJS

  • Vue (TODO:)
  • Svelte (TODO:)


  • Plain JavaScript with no framework dependencies
  • All chart features and functions accessible via API
  • State object defines chart configuration, indicators and tools
  • State can be imported or exported for storage and retrieval
  • Indicator calculation provided by talib-web as a WebAssembly module.
  • Custom Themes
  • Custom Indicators
  • Custom Overlays
  • Custom Drawing Tools (to be implemented)
  • Event Hub – subscribe to chart events
  • Rendering Optimization – smooth performance
  • High frequency chart candles updates
  • Export chart to png, jpg, webp, with optional watermarking


For the latest news on TradeX-chart, feedback, feature requests, and community, join us over on Discord or GitHub.

TradeX Discord GitHub


  • Fork the Project
  • Create your Feature Branch (git checkout -b feature/AmazingFeature)
  • Commit your Changes (git commit -m ‘Add some AmazingFeature)
  • Push to the Branch (git push origin feature/AmazingFeature)
  • Open a Pull Request

Testing, bug reports and feature requests welcome

You can help speed up development by contributing with crypto or PayPal.

if (youEnjoyed) {


View Github