Getting Started with the Vue Chart Component in the Quasar Framework

18 Nov 20185 minutes to read

This section provides a step-by-step guide to creating a Quasar application and integrating the Syncfusion^® Vue Chart component using the Composition API. It helps developers set up a responsive, high-performance charting solution within the Quasar ecosystem.

The Quasar Framework is a Vue.js–based open-source framework that enables developers to build modern, high-performance applications for web, mobile, and desktop from a single code base.

Prerequisites

Ensure that the development environment meets the requirements listed in System requirements for Syncfusion^® Vue Chart components.

Set Up the Quasar Project

To create a new Quasar project, run the following command:

npm init quasar

The command prompts for project options; example prompts appear below:

The generator installs dependencies when prompted. Confirm installation to proceed, as shown below:

Navigate to the project directory:

cd quasar-project

Now that quasar-project is ready, add the Syncfusion^® Vue Chart component to the project.

Add Syncfusion^® Vue Packages

Syncfusion^® Vue Chart component packages are available at npmjs.com. To use Syncfusion^® Vue components in the project, install the corresponding npm package.

This article uses the Vue Chart component as an example. To use the Vue Chart component in the project, install the @syncfusion/ej2-vue-charts package using:

npm install @syncfusion/ej2-vue-charts

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

Add the Syncfusion^® Vue Component

Follow the steps below to add the Vue Chart component:

Step 1: First, add the setup attribute to the script tag to indicate that Vue will be using the Composition API, and import the Chart component in the script section of src/app.vue.

~/src/app.vue

<script setup>
import { provide } from 'vue';
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, LineSeries, Category } from "@syncfusion/ej2-vue-charts";
</script>

Step 2: Declare the values for the dataSource property in the script section.

~/src/app.vue

<script setup>
let seriesData = [
    { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
    { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
    { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
    { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
    { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
    { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
const primaryXAxis = { valueType: 'Category' };
</script>

Step 3: In the template section, define the Chart component with the dataSource property.

~/src/app.vue

<template>
    <ejs-chart id="container" :primaryXAxis='primaryXAxis'>
        <e-series-collection>
            <e-series :dataSource='seriesData' type='Line' xName='month' yName='sales' name='Sales'> </e-series>
        </e-series-collection>
    </ejs-chart>
</template>

Here is the summarized code for the above steps in the src/app.vue file:

~/src/app.vue

<template>
    <ejs-chart id="container" :primaryXAxis='primaryXAxis'>
        <e-series-collection>
            <e-series :dataSource='seriesData' type='Line' xName='month' yName='sales' name='Sales'> </e-series>
        </e-series-collection>
    </ejs-chart>
</template>

<script setup>
import { provide } from 'vue';
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, LineSeries, Category } from "@syncfusion/ej2-vue-charts";

let seriesData = [
    { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
    { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
    { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
    { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
    { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
    { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
let primaryXAxis = {valueType: 'Category'};

// Register required modules (idiomatic one-liner)
provide('chart', [LineSeries, Category]);
</script>

Run the Project

To run the project, use the following command:

npm run dev

The output will appear as follows: