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.

  1. <!-- App.vue -->
  2. <script>
  3.   import msftData from "./assets/msft2020.json";
  4.   export default {
  5.     data() {
  6.       var dps1 = [], dps2 = [];
  7.       msftData.forEach(data => {
  8.         dps1.push({ x: new Date(data["date"]), y: [data["open"], data["high"], data["low"], data["close"]] });
  9.         dps2.push({ x: new Date(data["date"]), y: data["close"] });
  10.       });
  11.       return {
  12.         chart: null,
  13.         options: {
  14.           exportEnabled: true,
  15.           theme: "light2",
  16.           title: {
  17.             text: "Vue.js StockChart with Date-Time Axis"
  18.           },
  19.           subtitles: [{
  20.             text: "MSFT Stock Price"
  21.           }],
  22.           charts: [{
  23.             axisY: {
  24.               title: "Price",
  25.               prefix: "$",
  26.               tickLength: 0
  27.             },
  28.             data: [{
  29.               type: "candlestick",
  30.               name: "Price (in USD)",
  31.               yValueFormatString: "$#,###.##",
  32.               dataPoints: dps1
  33.             }]
  34.           }],
  35.           navigator: {
  36.             data: [{
  37.               dataPoints: dps2
  38.             }],
  39.             slider: {
  40.               minimum: new Date(2020, 1, 1),
  41.               maximum: new Date(2020, 11, 1)
  42.             }
  43.           }
  44.         },
  45.         styleOptions: {
  46.           width: "100%",
  47.           height: "460px"
  48.         }
  49.       }
  50.     }
  51.   }
  52. </script>
  53. <template>
  54.   <CanvasJSStockChart :options="options" :style="styleOptions" />
  55. </template>                              
  1. /* main.js */
  2. import { createApp } from 'vue'
  3. import App from './App.vue'
  4.  
  5. import CanvasJSStockChart from '@canvasjs/vue-stockcharts';
  6.  
  7. const app = createApp(App);
  8. app.use(CanvasJSStockChart);
  9. app.mount('#app');

Chart Customizations

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