Getting Started with CanvasJS Vue StockChart Plugin

This tutorial teaches you to quickly add beautiful StockCharts to your Vue.js applications using CanvasJS & NPM.

In case you have any suggestions/feedback please post it in our forum.

Here are couple of things that you need to remember while using React StockChart Component.

  1. You no longer have to call render() method during the initial render. You need to call render whenever data is updated.
  2. You can get the reference of the stockchart instance by passing the call-back function like `@stockchart-ref=”stockChartRef”` to the component & get the instance as a callback parameter. This allows you to access all chart properties and methods including render().
  3. Once you get reference to the stockchart object, you can update any of the options – like stockchart.options.title.text = “New StockChart Title” and call stockChart.render(). Refer Updating Chart Options / Data for more information.
  4. You can also style the stockchart component as shown below
    5. <CanvasJSStockChart :options="stockChartOptions" @stockchart-ref="stockChartRef" :styles="{width: '100%', height: '460px'}"/>

Step-By-Step Instruction

1. Create Vue.js App

Create Vue.js app. Please refer to Vue.js documentation for prerequisites, environment setup & tutorial on creating Vue.js project & app.

2. Install CanvasJS Vue StockCharts Plugin via NPM

Install CanvasJS Vue StockCharts package via NPM by running the following command.

npm install @canvasjs/vue-stockcharts

3. Import CanvasJS Vue StockCharts plugin & install it

Import the Vue StockCharts plugin to your Vue.js application & install it.

import { createApp } from 'vue'
import App from './App.vue'

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

const app = createApp(App);
app.use(CanvasJSStockChart); // install the CanvasJS Vuejs StockChart Plugin
app.mount('#app');

4. Set the stockchart-options & create stockchart

Set the stockchart-options in app.vue & use ‘CanvasJSStockChart’ selector to create stockchart inside template tag.

<!-- App.vue -->
<script>
  export default {
    data() {
      return {
        chart: null,
        options: {
          title: {
            text: "CanvasJS StockChart in Vue.js"
          },
          charts: [{
            data: [{
              type: "line",
              dataPoints: [
                { x: new Date("2018-01-01"), y: 71 },
                { x: new Date("2018-02-01"), y: 55 },
                { x: new Date("2018-03-01"), y: 50 },
                { x: new Date("2018-04-01"), y: 65 },
                { x: new Date("2018-05-01"), y: 95 },
                { x: new Date("2018-06-01"), y: 68 },
                { x: new Date("2018-07-01"), y: 28 },
                { x: new Date("2018-08-01"), y: 34 },
                { x: new Date("2018-09-01"), y: 14 },
                { x: new Date("2018-10-01"), y: 71 },
                { x: new Date("2018-11-01"), y: 55 },
                { x: new Date("2018-12-01"), y: 50 },
                { x: new Date("2019-01-01"), y: 34 },
                { x: new Date("2019-02-01"), y: 50 },
                { x: new Date("2019-03-01"), y: 50 },
                { x: new Date("2019-04-01"), y: 95 },
                { x: new Date("2019-05-01"), y: 68 },
                { x: new Date("2019-06-01"), y: 28 },
                { x: new Date("2019-07-01"), y: 34 },
                { x: new Date("2019-08-01"), y: 65 },
                { x: new Date("2019-09-01"), y: 55 },
                { x: new Date("2019-10-01"), y: 71 },
                { x: new Date("2019-11-01"), y: 55 },
                { x: new Date("2019-12-01"), y: 50 }
              ]
            }]
          }],
          navigator: {
            slider: {
              minimum: new Date("2018-07-01"),
              maximum: new Date("2019-06-30")
            }
          }
        }
      }
    }
</script>
<template>
  <CanvasJSStockChart :options="options" />
</template>

In order to make it simpler we have also created examples with different use-cases. Please check out our Vue.js StockChart Gallery for the same.

If you have any questions, please feel free to ask in our forums.Ask Question