hellp for combin tvjs-xp and trading-vue-js

Question

hi i want charting stock data in web page. i found sample project in github https://github.com/tvjsx/tvjs-xp

i change code and connect the binance and receive and charting real time data. i have some problem after add online receive data chart lagend bouttun not work and i cant add layer. please help me. thanks

enter image description here

<trading-vue :data="dc" :width="this.width" :height="this.height"
        title-txt="TVJS XP" :key="resetkey"
        :chart-config="{DEFAULT_LEN:70}"
        ref="tvjs"
             :legend-buttons="['display', 'settings', 'up', 'down', 'add', 'remove']"
        :toolbar="true"
        :index-based="index_based"

        :color-back="colors.colorBack"
        :color-grid="colors.colorGrid"
        :color-text="colors.colorText"
         :extensions="ext"
        :overlays="ovs"
        :x-settings="xsett">
</trading-vue>
<span class="gc-mode">
    <input type="checkbox" v-model="index_based">
    <label>Index Based</label>
</span>

export default {
name: 'DataHelper',
icon: '⚡',
description: 'Real-time updates. Play with DataCube in the console',
props: ['night', 'ext', 'resetkey'],
components: {
    TradingVue
},
mounted() {
    window.addEventListener('resize', this.onResize)
    this.onResize()
    // Load the last data chunk & init DataCube:
    let now = Utils.now()
    this.load_chunk([now - Const.HOUR4, now]).then(data => {
        this.dc = new DataCube({
            ohlcv: data['dc.data'],
            // onchart: [{
            //     type: 'EMAx6',
            //     name: 'Multiple EMA',
            //     data: []
            // }],
            offchart: [
            //     {
            //     type: 'BuySellBalance',
            //     name: 'Buy/Sell Balance, $lookback',
            //     data: [],
            //     settings: {}
            // },
                    {
        name: "RSI, 20",
        type: "Range",
        data: [],
        settings: {
            "upper": 70,
            "lower": 30,
            "backColor": "#9b9ba316",
            "bandColor": "#666"
        }
    },
            ],
            datasets: [{
                type: 'Trades',
                id: 'binance-btcusdt',
                data: []
            }]
        }, { aggregation: 100 })
        // Register onrange callback & And a stream of trades
        this.dc.onrange(this.load_chunk)
        this.$refs.tvjs.resetChart()
        this.stream = new Stream(WSS)
        this.stream.ontrades = this.on_trades
        window.dc = this.dc      // Debug
        window.tv = this.$refs.tvjs // Debug
    })
},
methods: {
    onResize(event) {
        this.width = window.innerWidth
        this.height = window.innerHeight - 50
    },
    // New data handler. Should return Promise, or
    // use callback: load_chunk(range, tf, callback)
    async load_chunk(range) {
        let [t1, t2] = range
        let x = 'BTCUSDT'
        let q = `${x}&interval=1m&startTime=${t1}&endTime=${t2}`
        let r = await fetch(URL + q).then(r => r.json())
        return this.format(this.parse_binance(r))
    },
    // Parse a specific exchange format
    parse_binance(data) {
        if (!Array.isArray(data)) return []
        return data.map(x => {
            for (var i = 0; i < x.length; i++) {
                x[i] = parseFloat(x[i])
            }
            return x.slice(0,6)
        })
    },
    format(data) {
        // Each query sets data to a corresponding overlay
        return {
            'dc.data': data
            // other onchart/offchart overlays can be added here,
            // but we are using Script Engine to calculate some:
            // see EMAx6 & BuySellBalance
        }
    },
    on_trades(trade) {
        this.dc.update({
            t: trade.T,     // Exchange time (optional)
            price: parseFloat(trade.p),   // Trade price
            volume: parseFloat(trade.q),  // Trade amount
            'datasets.binance-btcusdt': [ // Update dataset
                trade.T,
                trade.m ? 0 : 1,          // Sell or Buy
                parseFloat(trade.q),
                parseFloat(trade.p)
            ],
            // ... other onchart/offchart updates
        })
    }
},
beforeDestroy() {
    window.removeEventListener('resize', this.onResize)
    if (this.stream) this.stream.off()
},
computed: {
    colors() {
        return this.$props.night ? {} : {
            colorBack: '#fff',
            colorGrid: '#eee',
            colorText: '#333'
        }
    },
},
data() {
    return {
        dc: {},
        width: window.innerWidth,
        height: window.innerHeight,
        index_based: false,
           xsett: {
            'grid-resize': { min_height: 30 }
        },
        ovs: Object.values(Overlays),

    }
}

}