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>
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.
"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.
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 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:
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):
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.