Getting Started with the Vue Sparkline Component in Vue 2

24 Jul 20268 minutes to read

This article provides a step-by-step guide to creating a Vue 2 application using Vue CLI and integrating the Syncfusion® Vue Sparkline component.

To get started quickly with Vue Sparkline, watch this video:

Prerequisites

Ensure that the development environment meets the system requirements for Syncfusion Vue UI components.

Note: Vue CLI is in maintenance mode. This guide uses Vue CLI because it describes integration with a Vue 2 application.

Dependencies

The following are the minimum dependencies required to use the Vue Sparkline component:

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

Only the @syncfusion/ej2-vue-charts package must be installed directly. Its required dependencies are installed automatically.

Use a package release that supports Vue 2. Before upgrading, check the Vue system requirements and the package release notes.

Setting Up the Vue 2 Project

Install Vue CLI globally using either npm or yarn, and create a project with the vue create command.

npm

npm install -g @vue/cli
vue create quickstart

yarn

yarn global add @vue/cli
vue create quickstart

When creating the project, select Default ([Vue 2] babel, eslint) from the menu. If this preset is unavailable, select the manual configuration option and choose Vue 2 when prompted for the Vue version.

Vue 2 project

After the project is created, navigate to its directory:

cd quickstart

Add the Syncfusion® Vue Package

Syncfusion Vue packages are available on npm.

Install the @syncfusion/ej2-vue-charts package using either npm or yarn.

npm

npm install @syncfusion/ej2-vue-charts

yarn

yarn add @syncfusion/ej2-vue-charts

Note: npm v5 and later save installed packages to dependencies by default, so the --save option is not required.

Add the Syncfusion® Vue Sparkline Component

Follow these steps to add the Vue Sparkline component.

Step 1: Import and locally register the Sparkline component in the script section of src/App.vue.

<script>
import { SparklineComponent } from '@syncfusion/ej2-vue-charts';

export default {
  components: {
    'ejs-sparkline': SparklineComponent
  }
};
</script>

Step 2: Define the Sparkline component in the template section.

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

At this stage, the component is registered, but no visible Sparkline series is rendered until a data source is configured.

Bind a Data Source to the Sparkline

The Sparkline component uses the following properties to bind object data:

  • dataSource specifies an array of data objects or a DataManager instance.
  • xName maps the horizontal-value field.
  • yName maps the numeric-value field.
  • valueType specifies how x-values are interpreted.

When the x-values are category strings, set valueType to Category. Each data object must contain the fields assigned to xName and yName, and the field assigned to yName must contain a numeric value.

<ejs-sparkline
  :dataSource="dataSource"
  xName="day"
  yName="value"
  valueType="Category"
></ejs-sparkline>
data() {
  return {
    dataSource: [
      { day: 'Mon', value: 3 },
      { day: 'Tue', value: 5 },
      { day: 'Wed', value: 2 },
      { day: 'Thu', value: 4 },
      { day: 'Fri', value: 6 }
    ]
  };
}

The following is the complete code for the src/App.vue file. Replace the contents of src/App.vue with the following complete example:

<template>
    <div class="control_wrapper">
    <div>
        <ejs-sparkline id="sparkline" align="center" :dataSource='dataSource' xName='xval' yName='yval' :height='height' :width='width'></ejs-sparkline>
    </div>
    </div>
</template>
<script>
import { SparklineComponent } from "@syncfusion/ej2-vue-charts";

export default {
  components: {
    'ejs-sparkline': SparklineComponent
  },
  data: function() {
    return {
    height: '100px',
    width: '70%',
    dataSource: [
            { x: 0, xval: '2005', yval: 20090440 },
            { x: 1, xval: '2006', yval: 20264080 },
            { x: 2, xval: '2007', yval: 20434180 },
            { x: 3, xval: '2008', yval: 21007310 },
            { x: 4, xval: '2009', yval: 21262640 },
            { x: 5, xval: '2010', yval: 21515750 },
            { x: 6, xval: '2011', yval: 21766710 },
            { x: 7, xval: '2012', yval: 22015580 },
            { x: 8, xval: '2013', yval: 22262500 },
            { x: 9, xval: '2014', yval: 22507620 },
        ]
    }
  }
}
</script>

Run the Project

Save src/App.vue, and then start the development server using either npm or yarn.

npm

npm run serve

yarn

yarn run serve

Open the local URL displayed in the terminal, commonly http://localhost:8080, and verify that an area Sparkline displays.

Module Injection

The Sparkline component is split into feature modules. To enable a feature, import its module and provide it to the component using the provide option.

Tooltip support is provided by the optional SparklineTooltip module. Register it with the component’s provide option only when tooltips are enabled.

import {
  SparklineComponent,
  SparklineTooltip
} from '@syncfusion/ej2-vue-charts';

export default {
  components: {
    'ejs-sparkline': SparklineComponent
  },
  provide: {
    sparkline: [SparklineTooltip]
  }
};

Troubleshooting

  • The Sparkline is not rendered. Verify that SparklineComponent is imported and registered, the component has valid width and height values, and the browser console contains no component, data, or licensing errors.
  • No data is displayed. Verify that dataSource contains records, xName and yName match fields in every data object, and the field mapped by yName contains numeric values.
  • Category values are not interpreted correctly. Set valueType to Category when the field mapped by xName contains category strings.
  • The tooltip is not displayed. Set tooltipSettings.visible to true, bind the settings object with :tooltipSettings="tooltipSettings", and register SparklineTooltip with the exact sparkline key.
  • A package or Vue version error occurs. Confirm that the installed @syncfusion/ej2-vue-charts release supports Vue 2 and that all Syncfusion packages use compatible versions.

For additional assistance, refer to the Vue Sparkline API documentation.

See Also