Home
Chart & Graph
Candlestick Chart Library – TradingVue.js

Candlestick Chart Library – TradingVue.js

tvjsx Last Updated: 2 years ago

TradingVue.js is a feature-rich Vue.js charting library to generate highly customizable candlestick and sparkline charts for traders.

How to use it:

1. Install & Import the library.

import TradingVue from 'trading-vue-js'

2. Basic usage.

// in your template
<template>
  <trading-vue :data="this.$data"></trading-vue>
</template>
export default {
  name: 'app',
  components: { TradingVue },
  data() {
    return {
      ohlcv: [
        // data here
      ]
    }
  }
}

3. Default props.

titleTxt: {
  type: String,
  default: 'TradingVue.js'
},
id: {
  type: String,
  default: 'trading-vue-js'
},
width: {
  type: Number,
  default: 800
},
height: {
  type: Number,
  default: 421
},
colorTitle: {
  type: String,
  default: '#42b883'
},
colorBack: {
  type: String,
  default: '#121826'
},
colorGrid: {
  type: String,
  default: '#2f3240'
},
colorText: {
  type: String,
  default: '#dedddd'
},
colorTextHL: {
  type: String,
  default: '#fff'
},
colorScale: {
  type: String,
  default: '#838383'
},
colorCross: {
  type: String,
  default: '#8091a0'
},
colorCandleUp: {
  type: String,
  default: '#23a776'
},
colorCandleDw: {
  type: String,
  default: '#e54150'
},
colorWickUp: {
  type: String,
  default: '#23a77688'
},
colorWickDw: {
  type: String,
  default: '#e5415088'
},
colorWickSm: {
  type: String,
  default: '#bdbec0'
},
colorVolUp: {
  type: String,
  default: '#79999e42'
},
colorVolDw: {
  type: String,
  default: '#ef535042'
},
colorPanel: {
  type: String,
  default: '#565c68'
},
colorTbBack: {
  type: String
},
colorTbBorder: {
  type: String,
  default: '#8282827d'
},
font: {
  type: String,
  default: Const.ChartConfig.FONT
},
toolbar: {
  type: Boolean,
  default: false
},
data: {
  type: Object,
  required: true
},
// Your overlay classes here
overlays: {
  type: Array,
  default: function () { return [] }
},
// Overwrites ChartConfig values,
// see constants.js
chartConfig: {
  type: Object,
  default: function () { return {} }
},
legendButtons: {
  type: Array,
  default: function () { return [] }
},
indexBased: {
  type: Boolean,
  default: false
}

Preview:

TradingVue.js

Changelog:

v1.0.1 (01/16/2021)

  • Fixed incorrect ‘error’ exit in utils.js, fast_filter_i(arr, t1, t2), gt2i() to setCursor()

v1.0.0 (12/20/2020)

  • Update

v0.10.0 (12/07/2020)

  • Update

v0.9.0 (11/18/2020)

  • Update

v0.8.0alpha (10/09/2020)

  • Add shader props, fix botbar shaders

v0.8.0 (10/06/2020)

  • bugfix

v0.7.0 (09/15/2020)

  • Support skins

v0.6.1 (08/17/2020)

  • Bugfix

v0.6.0 (08/15/2020)

  • Bugfix

v0.5.2 (07/18/2020)

  • Bugfix

v0.5.1 (06/15/2020)

  • Index-based rendering mode (hides weekend gaps + sup Renko)
  • Log-scale mode
  • Interfaces (preview)
  • Performance fixes
  • Zoom to the current candle mode
  • Pixel-perfect candles, candle wicks
  • Offchart drawing tools
  • Price level
  • Custom grid heights
  • Sidear & Botbar inline shaders
  • Added RangeTool
  • Forced chart timeframe (overwrites the auto-detected one)
  • Updated DataCube

Download Details:

Author: tvjsx

Live Demo: https://tvjsx.github.io/trading-vue-demo/

Download Link: https://github.com/tvjsx/trading-vue-js/archive/master.zip

Official Website: https://github.com/tvjsx/trading-vue-js

Install & Download:

# NPM
$ npm install trading-vue-js --save

Related Posts

Add Comment