README

WIP - under heavy development - NOT production ready

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

Demo

Live Demo

Getting Started

Requirements

TradeX-chart targets browsers that support ECMAScript 2022.

Install

NPM

npm install tradex-chart

In Browser

<script src="tradex-chart.es.js"></script>

How to Use

Minimal working example:

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

<script>

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

// minimal data state
let state = {
  "ohlcv": [
// [timestamp, open, high, low, close, volume]
    [1543579200000,4035.6,4072.78348726,3965,4055.6,2157.50135341],
    [1543582800000,4055.6,4100,4035,4059.1719252,1660.6115119],
    [1543586400000,4059.1,4076.6,4014.1,4060,1070.09946267],
    [1543590000000,4060.5,4060.5,3987.2,4049.2,1530.46774287],
    [1543593600000,4049.2,4092.7,4035,4089.6691106,922.84509291]
  ]
}

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

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

mount.appendChild(chart)
chart.start(config)

</script>

Documentation

Documentation can be found under: Documentation API

Features

Plain JavaScript with no framework dependencies
All chart features and functions accessible via API
Built in a modular manner
Provides message, emit and subscribe methods
State object defines chart configuration, on and off chart indicators
Drawing tool overlays and can be imported or exported.
Export chart to png, jpg, webp.
Indicator calculation provided by talib-web as a WebAssembly module.
Supports multiple candle types:
- solid
- hollow
- solid up, hollow down
- hollow up, solid down
- OHLC
- area
- line
Chart pan / scroll via mouse or cursor keys

Support

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

TradeX Discord

Contributing

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.

JSPM

tradex-chart

Package Exports

Readme