Socket
Socket
Sign inDemoInstall

@canvasjs/vue-stockcharts

Package Overview
Dependencies
2
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @canvasjs/vue-stockcharts

CanvasJS Vue StockCharts - Official


Version published
Weekly downloads
19
increased by18.75%
Maintainers
1
Install size
12.7 MB
Created
Weekly downloads
 

Readme

Source
CanvasJS

CanvasJS Vue StockCharts Plugin - Official

CanvasJS Vue StockChart Plugin for creating interactive financial charts and graphs for your Vue.js applications. Library supports a wide range of chart types including line, area, column, candlestick & more. It's also bundled with features like interactivity, animation, zooming / panning, exporting as image, etc.


CanvasJS Vue.js StockCharts

Installing CanvasJS Vue StockCharts

Install CanvasJS Vue StockCharts package to your Vue application via NPM.

Install Vue StockCharts via NPM
npm install @canvasjs/vue-stockcharts

See npm documentation to know more about npm usage.

Import Vue StockChart 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');
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 {
      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>


Vue.js StockChart
Interactive Vue StockChart

Vue.js Interactive StockCharts


Keywords

FAQs

Last updated on 29 Feb 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc