Vue.js StockChart with Date-Time Axis

Download Vue.js Chart Samples

Example shows Vuejs StockChart with date-time (time series) values plotted against x-axis. API also allows you to customize the axis-range, interval of axis labels, format & placement of labels, zooming / panning, etc.

<!-- App.vue -->
<script>
  import msftData from "./assets/msft2020.json";
  export default {
    data() {
      var dps1 = [], dps2 = [];
      msftData.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["close"] });
      });
      return {
        chart: null,
        options: {
          exportEnabled: true,
          theme: "light2",
          title: {
            text: "Vue.js StockChart with Date-Time Axis"
          },
          subtitles: [{
            text: "MSFT Stock Price"
          }],
          charts: [{
            axisY: {
              title: "Price",
              prefix: "$",
              tickLength: 0
            },
            data: [{
              type: "candlestick",
              name: "Price (in USD)",
              yValueFormatString: "$#,###.##",
              dataPoints: dps1
            }]
          }],
          navigator: {
            data: [{
              dataPoints: dps2
            }],
            slider: {
              minimum: new Date(2020, 1, 1),
              maximum: new Date(2020, 11, 1)
            }
          }
        },
        styleOptions: {
          width: "100%",
          height: "460px"
        }
      }
    }
  }
</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