A highly customizable stock trade chart with one dependency written in JavaScript
Tags: chart
Published: 2023-11-10 08:59:05

---
title: A highly customizable stock trade chart with one dependency written in JavaScript
published: true
date: 2023-11-09 00:59:00 UTC
tags: Chart
canonical_url: https://reactjsexample.com/a-highly-customizable-stock-trade-chart-with-one-dependency-written-in-javascript/
---

# README
 ![A highly customizable stock trade chart with one dependency written in JavaScript](https://reactjsexample.com/content/images/2023/11/Code_2023-11_19-54-06.jpg)

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

![A highly customizable stock trade chart with one dependency written in JavaScript](https://github.com/tradex-app/TradeX-chart/raw/master/assets/EMA.png)

## Demo

### [Live Demo](https://tradex-chart.guildmedia.net/)
### Requirements

TradeX-chart targets browsers that support [ECMAScript 2022](https://www.ecma-international.org/wp-content/uploads/ECMA-262_13th_edition_june_2022.pdfhttps:/).

## 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 here:[Documentation](https://tradex-app.github.io/TradeX-chart/)

or built and run locally from the repository by running:

```
git clone https://github.com/tradex-app/TradeX-chart
cd ./tradex-chart/src/docs
npm run build
```

## Editable Live Sandbox Examples

Editable sandbox examples can found on [CodeSandbox.io](https://codesandbox.io/u/tradex-app)

## Framework Integration Examples

[\* React / NextJS](https://github.com/tradex-app/TradeX-chart/blob/master/nextjs)

- Vue (TODO:)
- Svelte (TODO:)

## Features

- 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](https://https://anchegt.github.io/talib-web/) as a WebAssembly module.
- [Custom Themes](https://tradex-app.github.io/TradeX-chart/reference/themes/)
- [Custom Indicators](https://tradex-app.github.io/TradeX-chart/reference/indicators_default/https:/)
- [Custom Overlays](https://tradex-app.github.io/TradeX-chart/reference/overlays_custom/https:/)
- Custom Drawing Tools (to be implemented)
- [Event Hub](https://tradex-app.github.io/TradeX-chart/reference/events/) – subscribe to chart events
- Rendering Optimization – smooth performance
- High frequency chart candles updates
- Export chart to png, jpg, webp, with optional watermarking

## Support

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

[TradeX Discord](https://discord.gg/dMegsSQDe)[GitHub](https://github.com/tradex-app/TradeX-chart/discussions)

## 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.

* * *

```
if (youEnjoyed) {
    starThisRepository();
}
```

## GitHub

[View Github](https://github.com/tradex-app/TradeX-chart?ref=reactjsexample.com)