vue-scichart

This plugin isn't just a wrapper of the Scichart API, but provides a better solution on importing modules you need to use in certain charts and have a faster option method you can just pass and you done need to create.

View Demo View Github

:electric_plug: Install

# npm usage
npm install vue-scichart --save

# yarn usage
yarn add vue-scichart

:sparkles: Usage

vue-scichart can be used as a vue directive from your javascript. We should pass the key of Scichart as well. You can use form a .env file for example.

import Vue from 'vue'
import scichart from 'vue-scichart'

const opts = {
  key: process.env.YOUR_SCICHART_KEY
}

Vue.use(scichart, opts)

But that's not everything we need. We should get two files before we can start creating new charts. the files are scichart2d.data and scichart2d.wasm and they are different on vue/nuxt context.

Vue

You should change your vue config file, and add write-file-webpack-plugin and copy-webpack-plugin with specific versions

npm install [email protected] --save-dev 
npm install [email protected] --save-dev

on vue.config.js:

const path = require('path');
const WriteFilePlugin = require('write-file-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  lintOnSave: false,
  configureWebpack: {
    plugins: [
      new WriteFilePlugin(),
      new CopyWebpackPlugin({
        patterns: [
          {
            from: path.join(
              __dirname,
              'node_modules/vue-scichart/dist/scichart2d.data'
            ),
            to: path.join(
              __dirname,
              process.env.NODE_ENV === 'production' ? 'dist' : 'public'
            ),
          },
          {
            from: path.join(
              __dirname,
              'node_modules/vue-scichart/dist/scichart2d.wasm'
            ),
            to: path.join(
              __dirname,
              process.env.NODE_ENV === 'production' ? 'dist/js' : 'public/js'
            ),
          },
        ],
      }),
    ],
  },
};

After change our vue.config.js file we can on main Vue file, in my case will be on main.js


import Vue from 'vue';
import App from './App.vue';
import scichart from 'vue-scichart';

Vue.config.productionTip = false;

Vue.use(scichart, {
  key: process.env.VUE_APP_SCICHART_KEY, // I'm using .env
});

new Vue({
  render: (h) => h(App),
}).$mount('#app');

After we can use on our component as we need


<template>
  <div>
    <line-chart />
  </div>
</template>

<script>

import { LineChart } from 'vue-scichart'

export default {
  components: {
    LineChart
  }
}

</script>

More about which chart we can import and use, check our docs, on Component Attributes

GitHub