Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

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: 29 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/tradex-app/tradex-chart
Owner: tradex-app
License: gpl-3.0
Created: 2022-07-06T10:37:03.000Z (over 2 years ago)
Default Branch: master
Last Pushed: 2024-10-07T14:08:06.000Z (about 1 month ago)
Last Synced: 2024-10-10T06:23:34.184Z (29 days ago)
Topics: canvas, chart, crypto, cryptocurrency, javascript, mobile, mobile-web, nextjs, react, stock-chart, talib, technical-analysis, technical-indicators, trading
Language: JavaScript
Homepage: https://tradex-app.github.io/TradeX-chart/
Size: 33.9 MB
Stars: 97
Watchers: 8
Forks: 16
Open Issues: 6
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

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)

```

## TypeScript

Types provided

## 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();

}

```