The Boilerplate

Welcome to the journey! What you see above is a TVJS instance, where you can play & hack stuff to learn things fast. It has trading-vue-js chart component (see GitHub) on the left and FileExplorer on the right. Think of the the app as a virtual folder with a Vue.js project. Switching between examples will reset them to the default state. Good luck and have fun!

The first example is a basic project with one custom overlay TestOverlay.vue and one dataset data.json. You can start your custom experiments with cloning it (click the "Default" app, and then the "Clone {}" button, the copy will apear in "My Apps"):

<!-- App.vue explained -->
<template>
    <trading-vue :data="chart"            // The chart data
        :width="width" :heigh="height"    // Width & height, calulated by the TVJS engine
        :toolbar="true"                   // Show toolbar (drawing tools)
        :overlays="overlays"              // Array of user-created overlays
        :color-back="colors.back"         // Colors provided by the TVJS engine
        :color-grid="colors.grid"         // ...
        :color-text="colors.text"         // ...
        :color-title="colors.tvTitle">    // ...
    </trading-vue>
</template>
<script>
import { DataCube } from 'trading-vue-js' // DataCube helper
import Data from 'data.json'              // Sample Data (BTC price in this example)
import TestOverlay from 'TestOverlay.vue' // Custom overlay

export default {
    name: 'MainChart',
    props: ['width', 'height', 'colors'], // Props generated by the TVJS engine
    data() {
        return {
            chart: new DataCube(Data),    // Wrap data into DataCube & plug-in it into TVJS
            overlays: [NewOverlay]        // Your overlay array
        }
    }
}
</script>

The Basics

Data Structure

Data for the trading-vue component must be in the following format (this is a minimal version, the full version can be found here):

{
    "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
        },
        ...
    ]
}

Check data.json from the Boilerplate as a real-world example of the data format.

Main chart full format

"chart": {   // Mandatory
    "type": "<Candles|Spline>", // Main overlay type
    "indexBased": <true|false>, // Index-based rendering mode
    "data": [
        [timestamp, open, high, low, close, volume],
        ...
    ],
    "tf": <Number|'1s'...'1Y'>, // Forced timeframe
    "grid": { // Grid settings (optional)
        "logScale": <true|false>,
        "height": Number,   // Grid height (weight)
    }
    "settings": { } // Settings (depending on "type")
}

As you can see, you can specify some chart characteristics: indexBased - used for rendering Stocks & Renko charts, tf - timeframe (autodetected otherwise), grid -> logScale - log scale mode. You'll learn about them later in this tutorial.

Changing main overlay "type"

You can use different overlay for displaying the main OHLCV data, such as built-in Spline. All you need is to change Candles -> Spline in the chart object:

Later you'll know how to create custom overlays and apply them to the main chart or other indicators. Total freedom of your creativity. Sounds dope, right?

Settings object: Z-index & Legend

settings object is used to describe specific overlay properties. z-index & legend are built-in props. You can also define arbitrary variables in settings and read (and even update) them in your overlay. For example, we defined square coordinates as t and $. Overlay timeseries array data can be empty:

Chart-config prop

By setting chart-config in the trading-vue props you can override several chart constants changing the way the chart looks. Let's modify the default number of candles DEFAULT_LEN and mess with a few other constants (you'll find the full list there):

Multiple onchart & offchart overlays

There is basically no limit (only your CPU power) on how many overlays you can put on the chart. There are several built-in overlays:

Candles, Volume, Spline, Splines, Channel, Range, Trades, Segment, Splitters

Look into the following data.json to find some of them:

Note that we are using a compact main chart format here, instead of "chart": { "data": [...] } we can write "ohlcv": [...]. This means that TVJS will use the standart Candles overlay.

Custom chart colors. Dark/light mode switch

To be continued...