Getting Started with the Vue Bullet Chart Component in Vue 2

28 Jul 20267 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 Bullet Chart component.

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 Bullet Chart component:

|-- @syncfusion/ej2-vue-charts
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-pdf-export
    |-- @syncfusion/ej2-file-utils
    |-- @syncfusion/ej2-compression
    |-- @syncfusion/ej2-charts
    |-- @syncfusion/ej2-vue-base
    |-- @syncfusion/ej2-svg-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.

Terminal showing Vue CLI creating a 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 --save

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 Bullet Chart Component

Follow these steps to add the Vue Bullet Chart component.

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

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

export default {
  components: {
    'ejs-bulletchart': BulletChartComponent
  }
};
</script>

Step 2: Define the Bullet Chart component in the template section.

<template>
  <div id="app">
    <ejs-bulletchart id="bulletChart"></ejs-bulletchart>
  </div>
</template>

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

<template>
  <div>
    <ejs-bulletchart id="bulletChart"> </ejs-bulletchart>
  </div>
</template>
<script>
import { BulletChartComponent } from '@syncfusion/ej2-vue-charts';

export default {
  name: "App",
  components: {
    'ejs-bulletchart': BulletChartComponent
  },
  data() {
    return {
    }
  }
}
</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 the Bullet Chart displays.

Module Registration

The Bullet Chart component uses feature-specific modules. Register only the modules required by the application with the component’s provide option.

This guide uses BulletTooltip, which enables tooltip support.

import {
  BulletChartComponent,
  BulletTooltip
} from '@syncfusion/ej2-vue-charts';

export default {
  components: {
    'ejs-bulletchart': BulletChartComponent
  },
  provide: {
    bulletChart: [BulletTooltip]
  }
};

Register BulletTooltip only when the tooltip is enabled.

Note: The module injection key must be bulletChart.

Populate the Bullet Chart with Data

The Bullet Chart uses the following properties to bind data:

  • dataSource specifies the array of data objects.
  • valueField maps the feature-measure field.
  • targetField maps the comparative-target field.
  • minimum specifies the minimum value of the quantitative scale.
  • maximum specifies the maximum value of the quantitative scale.
  • interval specifies the interval between scale labels.

Each data object must contain the fields assigned to valueField and targetField. Those fields must contain numeric values.

The following template binds the value and target fields and configures a scale that contains both values:

<ejs-bulletchart
  :dataSource="data"
  valueField="value"
  targetField="target"
  :minimum="minimum"
  :maximum="maximum"
  :interval="interval"
></ejs-bulletchart>
data() {
  return {
    data: [
      { value: 75, target: 85 }
    ],
    minimum: 0,
    maximum: 100,
    interval: 20
  };
}
<template>
  <div>
    <ejs-bulletchart id="bulletChart" :dataSource="data" valueField="value" targetField="target" height="300"
      :minimum="minimum" :maximum="maximum" :interval="interval"> </ejs-bulletchart>
  </div>
</template>
<script>
import { BulletChartComponent } from '@syncfusion/ej2-vue-charts';

export default {
  name: "App",
  components: {
    'ejs-bulletchart': BulletChartComponent
  },
  data() {
    return {
      data: [
        { value: 100, target: 80 },
        { value: 200, target: 180 },
        { value: 300, target: 280 },
        { value: 400, target: 380 },
        { value: 500, target: 480 },
      ],
      minimum: 0, maximum: 500, interval: 50
    }
  }
}
</script>

Troubleshooting

  • The Bullet Chart is not rendered. Verify that BulletChartComponent is imported and registered, the chart has a valid size, and the browser console contains no component, data, or licensing errors.
  • No feature measure or target is displayed. Verify that dataSource contains records, valueField and targetField match fields in every data object, and the mapped fields contain numeric values.
  • The scale does not contain the measure or target. Set minimum and maximum so that both mapped values fall within the quantitative scale.
  • 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 Bullet Chart API documentation.

See Also