Vue.js StockChart with Navigator & Range Selector

Download Vue.js Chart Samples

Vuejs StockChart plugin comes bundled with elements like navigator & range-selector which lets you control the range of data shown inside viewport of the charts. Library has built-in features to synchronize tooltip & crosshair across all the charts within a StockChart.

<!-- App.vue -->
<script>
  import btcData from "./assets/btcusd2018.json";
  export default {
    data() {
      var dps1 = [], dps2 = [], dps3 = [];
      btcData.forEach(data => {
        dps1.push({ x: new Date(data["date"]), y: [data["open"], data["high"], data["low"], data["close"]] });
        dps2.push({ x: new Date(data["date"]), y: data["volume_usd"] });
        dps3.push({ x: new Date(data["date"]), y: data["close"] });
      });
      return {
        chart: null,
        options: {
          theme: "light2",
          exportEnabled: true,
          title: {
            text: "Bitcoin Price & Volume"
          },
          charts: [{
            toolTip: {
              shared: true
            },
            axisX: {
              lineThickness: 5,
              tickLength: 0,
              labelFormatter: function(e) {
                return "";
              }
            },
            axisY: {
              prefix: "$"
            },
            legend: {
              verticalAlign: "top"
            },
            data: [{
              showInLegend: true,
              name: "Stock Price (in USD)",
              yValueFormatString: "$#,###.##",
              type: "candlestick",
              dataPoints: dps1
            }]
          }, {
            height: 100,
            toolTip: {
              shared: true
            },
            axisY: {
              prefix: "$",
              labelFormatter: this.addSymbols
            },
            legend: {
              verticalAlign: "top"
            },
            data: [{
              showInLegend: true,
              name: "Volume (BTC/USD)",
              yValueFormatString: "$#,###.##",
              dataPoints: dps2
            }]
          }],
          navigator: {
            data: [{
              dataPoints: dps3
            }],
            slider: {
              minimum: new Date(2018, 6, 1),
              maximum: new Date(2018, 8, 1)
            }
          }
        },
        styleOptions: {
          width: "100%",
          height: "450px"
        }
      }
    },
    methods: {
      addSymbols(e) {
        var suffixes = ["", "K", "M", "B"];
        var order = Math.max(Math.floor(Math.log(Math.abs(e.value)) / Math.log(1000)), 0);
        if (order > suffixes.length - 1) order = suffixes.length - 1;
        var suffix = suffixes[order];
        return CanvasJS.formatNumber(e.value / Math.pow(1000, order)) + suffix;
      }
    }
  }
</script>
<template>
  <CanvasJSStockChart :options="options" :style="styleOptions" />
</template>                              
/* main.js */
import { createApp } from 'vue'
import App from './App.vue'

import CanvasJSStockChart from '@canvasjs/vue-stockcharts';

const app = createApp(App);
app.use(CanvasJSStockChart);
app.mount('#app');

Chart Customizations

Note   For step by step instructions, follow our Vuejs Integration Tutorial