Vue.js StockChart with Numeric Axis

Download Vue.js Chart Samples

Example shows Vuejs StockChart with numeric values on x-axis. Library comes with options to control & customize axis parameters like auto-labelling, interval, interval-type, label-formatting, font-customizations, etc.

<!-- App.vue -->
<script>
export default {
  data() {
    return {
      chart: null,
      options: {
        exportEnabled: true,
        title: {
          text: "Vue.js StockChart with Numeric Axis"
        },
        charts: [{
          data: [{
            type: "line",
            dataPoints:	this.generateRandomData()
          }]
        }],
        rangeSelector: {
          inputFields: {
            startValue: 250,
            endValue: 750
          },
          buttons: [{
            label: "100",
            range: 100,
            rangeType: "number"
          },{
            label: "200",
            range: 200,
            rangeType: "number"
          },{
            label: "500",
            range: 500,
            rangeType: "number"
          },{
            label: "All",
            rangeType: "all"
          }]
        }
      },
      styleOptions: {
          width: "100%",
          height: "450px"
      }
    }
  },
  methods:{
    generateRandomData() {
      var y = 1000, dps = [];
      for(var i = 0; i < 1000; i++) {
        y += Math.round(Math.random() *	10 - 5);
        dps.push({ y: y});
      }
      return dps;
    }
  }
}
</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