TradingVue.js

TradingVue.js is a hackable charting lib for traders. You can draw literally ANYTHING on top of candlestick charts.

Why

If 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 in other open-source libraries and can't stand it - you are definetly in the right place!

View Demo View Github

Features

  • Scrolling & zooming as we all like
  • Simple API for making new overlays
  • No need for fancy math
  • One overlay === one .vue component
  • Fully reactive
  • Fully responsive
  • Customizable colors and fonts

Install

NPM

npm i trading-vue-js

In browser

<script src="trading-vue.min.js"></script>

How to use

Minimal working example:

<template>
<trading-vue :data="this.$data"></trading-vue>
</template>
<script>

import TradingVue from 'trading-vue-js'

export default {
    name: 'app',
    components: { TradingVue },
    data() {
        return {
            ohlcv: [
                [ 1551128400000, 33,  37.1, 14,  14,  196 ],
                [ 1551132000000, 13.7, 30, 6.6,  30,  206 ],
                [ 1551135600000, 29.9, 33, 21.3, 21.8, 74 ],
                [ 1551139200000, 21.7, 25.9, 18, 24,  140 ],
                [ 1551142800000, 24.1, 24.1, 24, 24.1, 29 ],
            ]
        }
    }
}

</script>

Core philosophy

The core philosophy is Data -> 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.

layout.t2screen(t) // time -> x
layout.$2screen($) // price -> y
layout.t_magnet(t) // time -> nearest candle x
layout.screen2$(y) // y -> price
layout.screen2t(x) // x -> time

Using these functions and the standard js canvas API, you can do magic.

Data structure

PRO TIP: chart is mandatory if you want to see something other than a white screen

{
    "chart": [   // Mandatory
        "type": "<Chart Type, e.g. Candles>",
        "data": [
            [timestamp, open, high, low, close, volume],
            ...
        ],
        "settings": { } // Settings (depending on Chart Type)
    ],
    "onchart": [ // Displayed ON the chart
        {
            "name": "<Indicator name>",
            "type": "<e.g. EMA, SMA>",
            "data": [
                [timestamp, ... ], // Arbitrary length
                ...
            ],
            "settings": { } // Arbitrary settings format
        },
        ...
    ],
    "offchart": [ // Displayed BELOW the chart
        {
            "name": "<Indicator name>",
            "type": "<e.g. RSI, Stoch>",
            "data": [
                [timestamp, ... ], // Arbitrary length
                ...
            ],
            "settings": { } // Arbitrary settings format
        },
        ...
    ]
}

The 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:

{
    "name": "EMA, 25",
    "type": "EMA",
    "data": [
        [ 1551128400000, 3091 ],
        [ 1551132000000, 3112 ],
        [ 1551135600000, 3105 ]
    ],
    "settings": {
        "color": "#42b28a"
    }
},

Example of a simple overlay class

And then you make a new overlay class to display that data on the grid:

import { Overlay } from 'trading-vue-js'

export default {
    name: 'EMA',
    mixins: [Overlay],
    methods: {
        draw(ctx) {
            const layout = this.$props.layout
            ctx.strokeStyle = this.color
            ctx.beginPath()

            for (var p of this.$props.data) {

                // t2screen & $2screen - special functions that
                // map your data coordinates to grid coordinates
                let x = layout.t2screen(p[0])
                let y = layout.$2screen(p[1])

                ctx.lineTo(x, y)
            }

            ctx.stroke()
        },
        use_for() { return ['EMA'] },
        data_colors() { return [this.color] }
    },
    computed: {
        color() {
            return this.$props.settings.color
        }
    }
}

That's why the title doesn't lie: you can draw ANYTHING.

Grin

README-0027a833

Code | click your ?

Roadmap

  • Docs
  • Tests
  • Solve known issues (marked as 'TODO: IMPORTANT')
  • Performance improvements
  • Data-manipulation helpers
  • Add more built-in overlays
  • Add toolbar (drawing tools)
  • Custom loayout / layout persistence
  • Fix and improve mobile version
  • Version 1.0.0 here

Progress in details: https://github.com/C451/trading-vue-js/projects/1

Changelog

See CHANGELOG.md

Development & Building

Install devDependencies

npm install

Run development enviroment (hot)

npm run dev

Server is running on http://localhost:8080

Build the bundle

npm run build

Visual testing

npm run test

Server is running on http://localhost:8080

GitHub