Home › docs › stockcharts › integration › Vue

Pages

open all | close all

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

t 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

© fenopix
About Us
FAQs
Careers
Privacy Policy

Server Side Technologies
ASP.NET MVC Charts
PHP Charts
JSP Charts
Spring MVC Charts

Front End Technologies
JavaScript Charts
jQuery Charts
React Charts
Angular Charts
JavaScript StockCharts

Contact
Fenopix, Inc.
2093 Philadelphia Pike,
#5678, Claymont,
Delaware 19703
United States Of America

Server Side Technologies
Front End Technologies
Contact
ASP.NET MVC Charts JavaScript Charts FAQs
PHP Charts jQuery Charts Sales Enquiries
Spring MVC Charts React Charts Support Forum
JSP Charts Angular Charts Careers
JavaScript StockCharts

Privacy Policy  © fenopix