Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/tradex-app/TradeX-chart

TradeX Chart is a trade / stock chart written in plain (vanilla) JavaScript with mobile support
https://github.com/tradex-app/TradeX-chart

canvas chart crypto cryptocurrency javascript mobile mobile-web nextjs react stock-chart talib technical-analysis technical-indicators trading

Last synced: 25 days ago
JSON representation

TradeX Chart is a trade / stock chart written in plain (vanilla) JavaScript with mobile support

Lists

README

        

# README

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

[![Version](https://badgen.net/npm/v/tradex-chart)](https://www.npmjs.com/package/tradex-chart)
[![Size](https://badgen.net/bundlephobia/minzip/tradex-chart)](https://bundlephobia.com/result?p=tradex-chart)
[![LICENSE](https://badgen.net/github/license/tradex-app/tradex-chart)](LICENSE)
[![GitHub](https://badgen.net/badge/icon/github?icon=github&label)](https://github.com/tradex-app/TradeX-chart)
[![NPM](https://badgen.net/badge/icon/npm?icon=npm&label)](https://www.npmjs.com/package/tradex-chart)

![](assets/EMA.png)

## Table of Contents

* [Demo](#demo)
* [Getting Started](#getting-started)
* [Documentation](/docs/documentation.md)
* [Features](#features)
* [License](/LICENSE)

## Demo

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

## Getting Started

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

```

```

## How to Use

Minimal working example:

```javascript

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)

```

## Documentation

Documentation can be found here:
[Documentation](https://tradex-app.github.io/TradeX-chart/)

or built and run locally from the repository by running:

```shell
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](nextjs)
* Vue (TODO:)
* Svelte (TODO:)

## Features

* Plain JavaScript with no framework dependencies
* All chart features and functions accessible via [API](https://tradex-app.github.io/TradeX-chart/api/core/)
* [State object](https://tradex-app.github.io/TradeX-chart/reference/state/) defines [chart configuration](https://tradex-app.github.io/TradeX-chart/reference/02_configuration/), [indicators](https://tradex-app.github.io/TradeX-chart/reference/indicators_default/) and tools
* State can be [imported](https://https://tradex-app.github.io/TradeX-chart/reference/state/#create-and-use-a-state) or [exported](https://tradex-app.github.io/TradeX-chart/reference/state/#export) 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](https://tradex-app.github.io/TradeX-chart/reference/api-examples/#download-image), 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)
* [Issue Tracker](https://github.com/tradex-app/TradeX-chart/issues)
* [GitHub](https://github.com/tradex-app/TradeX-chart/discussions)

## Contributing

Testing, [bug reports and feature requests](https://github.com/tradex-app/TradeX-chart/issues) welcome

If anybody you have any bugs/issues/feature requests, please, before making a submission, first:
* check the GitHub issue tracker: https://github.com/tradex-app/TradeX-chart/issues
* documentation: https://tradex-app.github.io/TradeX-chart/
* live examples: https://tradex-chart.guildmedia.net/examples/static_chart/
* development roadmap: https://github.com/tradex-app/TradeX-chart/blob/master/docs/TradeX-chart-Development-Roadmap.pdf

To submit an issue:
* [Fork the chart repostitory](https://github.com/tradex-app/TradeX-chart/fork)
* 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](https://github.com/tradex-app/TradeX-chart/pulls)

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

---

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