{"id":13394204,"url":"https://github.com/tvjsx/trading-vue-js","last_synced_at":"2025-05-15T04:04:24.967Z","repository":{"id":39556003,"uuid":"176145143","full_name":"tvjsx/trading-vue-js","owner":"tvjsx","description":"💹  Hackable charting lib for traders. You can draw literally ANYTHING on top of candlestick charts. [Not Maintained]","archived":false,"fork":false,"pushed_at":"2024-06-24T06:30:07.000Z","size":33048,"stargazers_count":2157,"open_issues_count":78,"forks_count":650,"subscribers_count":79,"default_branch":"master","last_synced_at":"2025-05-05T02:04:45.950Z","etag":null,"topics":["algo-trading","bitcoin","candlestick-charts","charts","crypto","financial-analysis","finviz","overlays","reactive","trading","visualization","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://tvjsx.github.io/trading-vue-demo/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tvjsx.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-17T18:47:44.000Z","updated_at":"2025-05-03T23:31:25.000Z","dependencies_parsed_at":"2024-09-24T04:01:03.604Z","dependency_job_id":"71addb81-e1c4-4a73-af66-b0887be87ea9","html_url":"https://github.com/tvjsx/trading-vue-js","commit_stats":{"total_commits":724,"total_committers":10,"mean_commits":72.4,"dds":"0.026243093922651894","last_synced_commit":"bdbfe783274c7ab51c9ac3e458840b8a8008f389"},"previous_names":["c451/trading-vue-js"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tvjsx%2Ftrading-vue-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tvjsx%2Ftrading-vue-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tvjsx%2Ftrading-vue-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tvjsx%2Ftrading-vue-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tvjsx","download_url":"https://codeload.github.com/tvjsx/trading-vue-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254270641,"owners_count":22042858,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["algo-trading","bitcoin","candlestick-charts","charts","crypto","financial-analysis","finviz","overlays","reactive","trading","visualization","vue","vuejs"],"created_at":"2024-07-30T17:01:12.360Z","updated_at":"2025-05-15T04:04:24.911Z","avatar_url":"https://github.com/tvjsx.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","bitcoin","Charting libraries"],"sub_categories":[],"readme":"\n\u003cdiv align=\"center\"\u003e\n  \u003cimg width=\"318\" heigth=\"256\" src=\"https://raw.githubusercontent.com/tvjsx/trading-vue-js/master/assets/README-c8a97eb7.png?raw=true\" alt=\"trading-vue logo\"\u003e\n\u003c/div\u003e\n\n# TradingVue.js ![npm](https://img.shields.io/npm/v/trading-vue-js.svg?color=brightgreen\u0026label=version) ![license](https://img.shields.io/badge/license-MIT-blue.svg) ![build](https://img.shields.io/badge/build-passing-brightgreen.svg) ![size](https://img.shields.io/github/size/tvjsx/trading-vue-js/dist/trading-vue.min.js.svg) [![Gitter](https://badges.gitter.im/Trading-Vue-js/community.svg)](https://gitter.im/Trading-Vue-js/community?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge) [![DONATE](https://img.shields.io/badge/฿-Donate-f7921b.svg)](https://github.com/tvjsx/trading-vue-js/blob/master/DONATION.md)\n\n**TradingVue.js** was a hackable charting lib for traders. You could draw literally ANYTHING on top of candlestick charts. [Not Maintained]\n\n\u003cdiv align=\"center\"\u003e\n\u003cbr\u003e\n  \u003ca href=\"https://discord.gg/wrXCN6ysgW\"\u003e \u003cimg src=\"https://raw.githubusercontent.com/tvjsx/trading-vue-js/master/assets/README-06bc5a15.png\" alt=\"trading-vue logo\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n\n## Why\n\nIf you create trading software - this lib is probably for you. If you like to make custom indicators and think out of the box - this lib is most likely for you. And if you miss usability of [TradingView.com](https://www.tradingview.com) in other open-source libraries and can't stand it - you are definetly in the right place!\n\n\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg width=\"720\" heigth=\"420\" src=\"https://github.com/tvjsx/trading-vue-js/blob/master/assets/V1.gif?raw=true\" alt=\"White preview\"\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n## Features\n\n* Scrolling \u0026 zooming as we all like\n* Simple API for making new overlays\n* Custom drawing tools\n* Non-time based charts (e.g. Renko)\n* One overlay === one .vue component\n* Fully reactive\n* Fully responsive\n* Customizable colors and fonts\n* Quite fast (works even with 3 mil candles)\n* Scripts (make your own indicators)\n\n## Demo \u0026 Docs\n\n### [Demo](https://tvjsx.github.io/trading-vue-demo/) | [Getting Started](https://github.com/tvjsx/trading-vue-js/tree/master/docs/guide) | [API Book](https://github.com/tvjsx/trading-vue-js/tree/master/docs/api#api-book) | [Built-in Overlays](https://github.com/tvjsx/trading-vue-js/tree/master/docs/overlays#built-in-overlays) | [Examples](https://github.com/tvjsx/trading-vue-js/tree/master/test/tests) | [101 Project](https://github.com/tvjsx/trading-vue-101) | [llll Gitter](https://gitter.im/Trading-Vue-js) | [FAQ](https://github.com/tvjsx/trading-vue-js/tree/master/docs/faq) | [FREE Overlay Pack](https://github.com/tvjsx/tvjs-overlays) | [Free XP Pack](https://github.com/tvjsx/tvjs-xp)\n\n*To run the examples, download the repo \u0026 `npm run test`*\n\n## Install\n\n**NPM**\n```\nnpm i trading-vue-js\n```\n**In browser**\n\n```\n\u003cscript src=\"trading-vue.min.js\"\u003e\u003c/script\u003e\n```\n\n## How to use\n\nMinimal working example:\n\n```html\n\u003ctemplate\u003e\n\u003ctrading-vue :data=\"this.$data\"\u003e\u003c/trading-vue\u003e\n\u003c/template\u003e\n\u003cscript\u003e\n\nimport TradingVue from 'trading-vue-js'\n\nexport default {\n    name: 'app',\n    components: { TradingVue },\n    data() {\n        return {\n            ohlcv: [\n                [ 1551128400000, 33,  37.1, 14,  14,  196 ],\n                [ 1551132000000, 13.7, 30, 6.6,  30,  206 ],\n                [ 1551135600000, 29.9, 33, 21.3, 21.8, 74 ],\n                [ 1551139200000, 21.7, 25.9, 18, 24,  140 ],\n                [ 1551142800000, 24.1, 24.1, 24, 24.1, 29 ],\n            ]\n        }\n    }\n}\n\n\u003c/script\u003e\n```\n\n## Core philosophy\n\nThe core philosophy is **Data -\u003e Screen Mapping (DSM)**. The library provides you with functions that map your data (it could be anything) to screen coordinates. The lib does all the dirty work behind the scenes: scrolling, scaling, reactivity, etc.\n\n ```\n layout.t2screen(t) // time -\u003e x\n layout.$2screen($) // price -\u003e y\n layout.t_magnet(t) // time -\u003e nearest candle x\n layout.screen2$(y) // y -\u003e price\n layout.screen2t(x) // x -\u003e time\n ```\n Using these functions and the standard js canvas API, you can do magic.\n\n\n## Data structure\n\nPRO TIP: **chart** is mandatory if you want to see something other than a white screen\n\nIMPORTANT: All data must be sorted by time (in ascending order). The main OHLCV must not contain duplicate timestamps.\n\n[Full version of DataStructure](https://github.com/tvjsx/trading-vue-js/tree/master/docs/api#data-structure-new)\n\n```js\n{\n    \"chart\": {   // Mandatory\n        \"type\": \"\u003cChart Type, e.g. Candles\u003e\",\n        \"data\": [\n            [timestamp, open, high, low, close, volume],\n            ...\n        ],\n        \"settings\": { } // Settings (depending on Chart Type)\n    },\n    \"onchart\": [ // Displayed ON the chart\n        {\n            \"name\": \"\u003cIndicator name\u003e\",\n            \"type\": \"\u003ce.g. EMA, SMA\u003e\",\n            \"data\": [\n                [timestamp, ... ], // Arbitrary length\n                ...\n            ],\n            \"settings\": { } // Arbitrary settings format\n        },\n        ...\n    ],\n    \"offchart\": [ // Displayed BELOW the chart\n        {\n            \"name\": \"\u003cIndicator name\u003e\",\n            \"type\": \"\u003ce.g. RSI, Stoch\u003e\",\n            \"data\": [\n                [timestamp, ... ], // Arbitrary length\n                ...\n            ],\n            \"settings\": { } // Arbitrary settings format\n        },\n        ...\n    ]\n}\n```\nThe process of adding a new indicator is simple: first you define your own data format (should be timestamped though) and display settings. For example, EMA data might look like this:\n\n ```json\n {\n     \"name\": \"EMA, 25\",\n     \"type\": \"EMA\",\n     \"data\": [\n         [ 1551128400000, 3091 ],\n         [ 1551132000000, 3112 ],\n         [ 1551135600000, 3105 ]\n     ],\n     \"settings\": {\n         \"color\": \"#42b28a\"\n     }\n },\n\n ```\n\n## Example of a simple overlay class\n\nAnd then you make a new overlay class to display that data on the grid:\n\n```js\nimport { Overlay } from 'trading-vue-js'\n\nexport default {\n    name: 'EMA',\n    mixins: [Overlay],\n    methods: {\n        draw(ctx) {\n            const layout = this.$props.layout\n            ctx.strokeStyle = this.color\n            ctx.beginPath()\n\n            for (var p of this.$props.data) {\n\n                // t2screen \u0026 $2screen - special functions that\n                // map your data coordinates to grid coordinates\n                let x = layout.t2screen(p[0])\n                let y = layout.$2screen(p[1])\n\n                ctx.lineTo(x, y)\n            }\n\n            ctx.stroke()\n        },\n        use_for() { return ['EMA'] },\n        data_colors() { return [this.color] }\n    },\n    computed: {\n        color() {\n            return this.$props.settings.color\n        }\n    }\n}\n```\n\nThat's why the title doesn't lie: you can draw ANYTHING.\n\n## Grin\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/tvjsx/trading-vue-js/blob/master/assets/GRIN.gif?raw=true\" alt=\"trading-vue logo\"\u003e\n\u003c/div\u003e\n\n#### [ Code | click your 🐁 ](https://gist.github.com/C451/6d8ea8d603e3faadd801b4b3f2e7a57d)\n\n\n## Roadmap\n\n* ~~Docs~~\n* ~~Tests~~\n* ~~Solve known issues (marked as 'TODO: IMPORTANT')~~ [PARTIALLY]\n* ~~Performance improvements~~\n* ~~Data-manipulation helpers~~\n* ~~Add more built-in overlays~~\n* ~~Add toolbar (drawing tools)~~\n* ~~Custom loayout / layout persistence~~[POST-RELEASE]\n* ~~Fix and improve mobile version~~\n* **Version 1.0.0 here**\n\nProgress in details: https://github.com/tvjsx/trading-vue-js/projects/1\n\n## Changelog\n\nSee CHANGELOG.md\n\n## Development \u0026 Building\n\n**Install devDependencies**\n\n```\nnpm install\n```\n\n**Run development enviroment (hot)**\n\n```\nnpm run dev\n```\n*Server is running on http://localhost:8080*\n\n**Run in a CDN-like mode**\n\n```\nnpm run cdn\n```\n*Server is running on http://localhost:8080*\n\n**Build the bundle**\n\n```\nnpm run build\n```\n\n**Visual testing**\n\n```\nnpm run test\n```\n\n*Server is running on http://localhost:8080*\n\n\n**Automatic testing**\n\n```\nnpm run auto-test\n```\n\n\n## Contributing\n\n1. Fork ( https://github.com/tvjsx/trading-vue-js/fork )\n2. Create your feature branch (`git checkout -b cool-new-feature`)\n3. Commit your changes (`git commit -am 'Let's rock smth'`)\n4. Push to the branch (`git push origin cool-new-feature`)\n5. Create a new Pull Request\n\nPlease read the guidelines in CONTRIBUTING.md\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftvjsx%2Ftrading-vue-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftvjsx%2Ftrading-vue-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftvjsx%2Ftrading-vue-js/lists"}