This section explains you the steps required to create a simple Bullet Chart and demonstrate the basic usage of the Bullet Chart control.
System requirements for Syncfusion Vue UI components
Below is the list of minimum dependencies required to use the 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-baseYou can use Vue CLI to setup your vue applications.
To install Vue CLI use the following commands.
npm install -g @vue/cli
npm install -g @vue/cli-initStart a new Vue application using below Vue CLI command.
vue init webpack-simple quickstart
cd quickstart
npm installAll the available Essential JS 2 packages are published in npmjs.com registry.
To install Bullet Chart component, use the following command
npm install @syncfusion/ej2-vue-charts --saveThe —save will instruct NPM to include the Bullet Chart package inside of the
dependenciessection of thepackage.json.
You can register the Bullet Chart component in your application by using the Vue.use().
Refer to the code example given below.
import { BulletChartPlugin } from '@syncfusion/ej2-vue-charts';
Vue.use(BulletChartPlugin);Registering
BulletChartPluginin vue, will register the Bullet Chart component along with its required child directives globally.
<ejs-bulletchart> selector in <template> section of the App.vue file.<template>
<div>
<ejs-bulletchart id="bulletChart"> </ejs-bulletchart>
</div>
</template>
<script>
import Vue from 'vue';
import { BulletChartPlugin } from '@syncfusion/ej2-vue-charts';
Vue.use(BulletChartPlugin);
export default {
data () {
return {
}
}
}
</script>npm run devBullet Chart component are segregated into individual feature-wise modules. In order to use a particular feature, you need to inject its feature module using provide method. In the current application,we are going to use tooltip feature of the Bullet Chart.
BulletTooltip - Inject this provider to use tooltip feature.These modules should be injected to the provide method as follows,
import Vue from "vue";
import { BulletChartPlugin, BulletTooltip } from "@syncfusion/ej2-vue-charts";
Vue.use(BulletChartPlugin);
export default {
provide: {
bulletChart: [BulletTooltip]
}
};This section explains how to plot local data to the Bullet Chart.
let data: any[] = [
{ value: 100, target: 80 },
{ value: 200, target: 180 },
{ value: 300, target: 280 },
{ value: 400, target: 380 },
{ value: 500, target: 480 },
];Now assign the local data to dataSource property. value and target values should be mapped with valueField and targetField respectively.
<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 Vue from 'vue';
import { BulletChartPlugin } from '@syncfusion/ej2-vue-charts';
Vue.use(BulletChartPlugin);
export default {
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: 300, interval: 50
}
}
}
</script>You can add a title using title property to the Bullet Chart to provide quick
information to the user about the data plotted in the Bullet Chart.
<template>
<div>
<ejs-bulletchart id="bulletChart"
:dataSource="data"
valueField="value"
targetField="target"
:minimum="minimum"
:maximum="maximum"
:interval="interval"
title="Revenue"
> </ejs-bulletchart>
</div>
</template>
<script>
import Vue from 'vue';
import { BulletChartPlugin } from '@syncfusion/ej2-vue-charts';
Vue.use(BulletChartPlugin);
export default {
data () {
return {
data: [{ value: 270, target: 250 }],
minimum: 0, maximum: 300, interval: 50
}
}
}
</script>You can add a range using e-bullet-range of the e-bullet-range-collection.
<template>
<div>
<ejs-bulletchart id="bulletChart"
:dataSource="data"
valueField="value"
targetField="target"
:minimum="minimum"
:maximum="maximum"
:interval="interval"
title="Revenue"
>
<e-bullet-range-collection>
<e-bullet-range end="100" color="red"></e-bullet-range>
<e-bullet-range end="200" color="blue"></e-bullet-range>
<e-bullet-range end="300" color="green"></e-bullet-range>
</e-bullet-range-collection>
</ejs-bulletchart>
</div>
</template>
<script>
import Vue from 'vue';
import { BulletChartPlugin } from '@syncfusion/ej2-vue-charts';
Vue.use(BulletChartPlugin);
export default {
data () {
return {
data: [{ value: 270, target: 250 }],
minimum: 0, maximum: 300, interval: 50
}
}
}
</script>You can use tooltip for the Bullet Chart by setting the enable property to true in tooltip object and by injecting the BulletTooltip module using provide method.
<template>
<div>
<ejs-bulletchart id="bulletChart"
:dataSource="data"
valueField="value"
targetField="target"
:minimum="minimum"
:maximum="maximum"
:interval="interval"
title="Revenue"
:tooltip="tooltip"
> </ejs-bulletchart>
</div>
</template>
<script>
import Vue from 'vue';
import { BulletChartPlugin, BulletTooltip } from '@syncfusion/ej2-vue-charts';
Vue.use(BulletChartPlugin);
export default {
data () {
return {
data: [{ value: 270, target: 250 }],
minimum: 0, maximum: 300, interval: 50,
tooltip: { enable: true }
}
},
provide: {
bulletChart: [BulletTooltip]
}
}
</script>