Syncfusion AI Assistant

How can I help you?

Getting Started with the Vue Stock Chart Component in Vue 2

21 May 20267 minutes to read

This article provides a step-by-step guide for setting up a Vue 2 project using Vue-CLI and integrating the Syncfusion® Vue Stock Chart component.

Prerequisites

Ensure that the development environment meets the required criteria listed in System requirements for Syncfusion® Vue UI components.

Dependencies

The list of minimum dependencies required to use the Stock Chart is as follows:

|-- @syncfusion/ej2-charts
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-pdf-export
    |-- @syncfusion/ej2-file-utils
    |-- @syncfusion/ej2-compression
    |-- @syncfusion/ej2-svg-base

Setup the Vue 2 Project

To generate a Vue 2 project using Vue-CLI, use the vue create command. You can install Vue CLI using either npm or Yarn:

npm

npm install -g @vue/cli
vue create quickstart
cd quickstart
npm run serve

yarn

yarn global add @vue/cli
vue create quickstart
cd quickstart
yarn run serve

When creating a new project, choose the option Default ([Vue 2] babel, eslint) from the menu.

Vue 2 project

Once the quickstart project is set up with default settings, proceed to add Syncfusion® components to the project.

Add Syncfusion® Vue Packages

Syncfusion® packages are available at npmjs.com. To use Vue components, install the required npm package.

This article uses the Vue Stock Chart component as an example. Install the @syncfusion/ej2-vue-charts package by using either npm or Yarn:

npm

npm install @syncfusion/ej2-vue-charts

yarn

yarn add @syncfusion/ej2-vue-charts

Note: npm v5+ saves packages to dependencies by default; --save is not required.

Add Syncfusion® Vue Stock Chart Component

Follow the steps below to add the Vue Stock Chart component:

Step 1: First, import and register the Stock Chart component in the script section of the src/App.vue file.

<script>
import { StockChartComponent } from '@syncfusion/ej2-vue-charts';
export default {
  components: {
    'ejs-stockchart': StockChartComponent
  }
}
</script>

Step 2: In the template section, define the Stock Chart component.

<template>
  <div id="app">
      <ejs-stockchart></ejs-stockchart>
  </div>
</template>

Run the Project

To run the project, use either npm or Yarn:

npm

npm run serve

yarn

yarn run serve

The output will appear as follows:

Vue 2 Stock Chart demo

Module Injection

To create a Stock Chart with additional features, inject the required modules. The following modules extend the Stock Chart’s basic functionality.

  • CandleSeries — Inject this module to use candle series.
  • DateTime — Inject this module to use date time axis.
  • RangeTooltip — Inject this module to show the tooltip.

Inject these modules in the provide section as shown below.

<script>
import { StockChartComponent, CandleSeries, DateTime, RangeTooltip } from "@syncfusion/ej2-vue-charts";

export default {
  components: {
    'ejs-stockchart': StockChartComponent
  },
  provide: {
    stockChart: [CandleSeries, DateTime, RangeTooltip]
  }
};
</script>

Populate Stock Chart with Data

This section demonstrates how to bind JSON data to the Stock Chart. The data includes DateTime values for the x-axis.

export default {
  data() {
    return {
      data: [{
        x: new Date('2012-04-02'),
        open: 85.9757,
        high: 90.6657,
        low: 85.7685,
        close: 90.5257,
        volume: 660187068
      },
      {
        x: new Date('2012-04-09'),
        open: 89.4471,
        high: 92,
        low: 86.2157,
        close: 86.4614,
        volume: 912634864
      },
      {
        x: new Date('2012-04-16'),
        open: 87.1514,
        high: 88.6071,
        low: 81.4885,
        close: 81.8543,
        volume: 1221746066
      },
      {
        x: new Date('2012-04-23'),
        open: 81.5157,
        high: 88.2857,
        low: 79.2857,
        close: 86.1428,
        volume: 965935749
      },
      {
        x: new Date('2012-04-30'),
        open: 85.4,
        high: 85.4857,
        low: 80.7385,
        close: 80.75,
        volume: 615249365
      }]
    };
  }
};

Add a series object to the Stock Chart using the series property and set the JSON array to the dataSource property.

<template>
  <div class="control-section">
    <div>
      <ejs-stockchart id="stockchartcontainer" :title="title">
        <e-stockchart-series-collection>
          <e-stockchart-series :dataSource="seriesData" type="Candle" volume='volume' xName='date' low='low' high='high'
            open='open' close='close'></e-stockchart-series>
        </e-stockchart-series-collection>
      </ejs-stockchart>
    </div>
  </div>
</template>
<script>
import { chartData } from "./datasource.js";
import {
  StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, DateTime, CandleSeries
} from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    'ejs-stockchart': StockChartComponent,
    'e-stockchart-series-collection': StockChartSeriesCollectionDirective,
    'e-stockchart-series': StockChartSeriesDirective
  },
  data() {
    return {
      seriesData: chartData,
      title: 'AAPL Stock Price',
    };
  },
  provide: {
    stockChart: [
      DateTime, CandleSeries
    ]
  }
};
</script>

You can refer to our Vue Stock Chart feature tour page for its groundbreaking feature representations. You can also explore our Vue Stock Chart example that shows you how to present and manipulate data.

See Also