- Types of actual bar
- Actual bar customization
Contact Support
Value bar in Vue Bullet chart component
13 Jun 202414 minutes to read
To display the primary data or the current value of the data being measured known as the Feature Measure that should be encoded as a bar. This is called as the Actual Bar or the Feature Bar in the Bullet Chart, and to display the actual bar the valueField
should be mapped to the appropriate field from the data source.
<template>
<div>
<ejs-bulletchart id="bulletChart" :dataSource="data" valueField="value" targetField="target" :minimum="minimum"
:maximum="maximum" :interval="interval" title="Sales Rate" categoryField="category">
<e-bullet-range-collection>
<e-bullet-range end="35" color="red"></e-bullet-range>
<e-bullet-range end="50" color="blue"></e-bullet-range>
<e-bullet-range end="100" color="green"></e-bullet-range>
</e-bullet-range-collection>
</ejs-bulletchart>
</div>
</template>
<script setup>
import { BulletChartComponent as EjsBulletchart, BulletRangeCollectionDirective as EBulletRangeCollection, BulletRangeDirective as EBulletRange } from '@syncfusion/ej2-vue-charts';
const data = [{ value: 55, target: 75, category: "Year 1" }];
const minimum = 0;
const maximum = 100;
const interval = 20;
</script>
<template>
<div>
<ejs-bulletchart id="bulletChart"
:dataSource="data"
valueField="value"
targetField="target"
:minimum="minimum"
:maximum="maximum"
:interval="interval"
title="Sales Rate"
categoryField="category"
>
<e-bullet-range-collection>
<e-bullet-range end="35" color="red"></e-bullet-range>
<e-bullet-range end="50" color="blue"></e-bullet-range>
<e-bullet-range end="100" color="green"></e-bullet-range>
</e-bullet-range-collection>
</ejs-bulletchart>
</div>
</template>
<script>
import { BulletChartComponent, BulletRangeCollectionDirective, BulletRangeDirective } from '@syncfusion/ej2-vue-charts';
export default {
name: "App",
components: {
"ejs-bulletchart": BulletChartComponent,
"e-bullet-range-collection": BulletRangeCollectionDirective,
"e-bullet-range": BulletRangeDirective
},
data () {
return {
data: [{ value: 55, target: 75, category: "Year 1" }],
minimum: 0, maximum: 100, interval: 20
}
}
}
</script>
Types of actual bar
The shape of the actual bar can be customized using the type
property of the Bullet Chart. The actual bar contains Rect and Dot shapes. By default, the actual bar shape is Rect.
<template>
<div>
<ejs-bulletchart id="bulletChart" :dataSource="data" valueField="value" targetField="target" :minimum="minimum"
:maximum="maximum" :interval="interval" title="Sales Rate" categoryField="category" type="Dot">
<e-bullet-range-collection>
<e-bullet-range end="35" color="red"></e-bullet-range>
<e-bullet-range end="50" color="blue"></e-bullet-range>
<e-bullet-range end="100" color="green"></e-bullet-range>
</e-bullet-range-collection>
</ejs-bulletchart>
</div>
</template>
<script setup>
import { BulletChartComponent as EjsBulletchart, BulletRangeCollectionDirective as EBulletRangeCollection, BulletRangeDirective as EBulletRange } from '@syncfusion/ej2-vue-charts';
const data = [{ value: 55, target: 75, category: "Year 1" }];
const minimum = 0;
const maximum = 100;
const interval = 20;
</script>
<template>
<div>
<ejs-bulletchart id="bulletChart"
:dataSource="data"
valueField="value"
targetField="target"
:minimum="minimum"
:maximum="maximum"
:interval="interval"
title="Sales Rate"
categoryField="category"
type="Dot"
>
<e-bullet-range-collection>
<e-bullet-range end="35" color="red"></e-bullet-range>
<e-bullet-range end="50" color="blue"></e-bullet-range>
<e-bullet-range end="100" color="green"></e-bullet-range>
</e-bullet-range-collection>
</ejs-bulletchart>
</div>
</template>
<script>
import { BulletChartComponent, BulletRangeCollectionDirective, BulletRangeDirective } from '@syncfusion/ej2-vue-charts';
export default {
name: "App",
components: {
"ejs-bulletchart": BulletChartComponent,
"e-bullet-range-collection": BulletRangeCollectionDirective,
"e-bullet-range": BulletRangeDirective
},
data () {
return {
data: [{ value: 55, target: 75, category: "Year 1" }],
minimum: 0, maximum: 100, interval: 20
}
}
}
</script>
Actual bar customization
Border customization
Using the valueBorder
property of the bullet chart, you can customize the border color
and width
of the actual bar.
<template>
<div>
<ejs-bulletchart id="bulletChart" :dataSource="data" valueField="value" targetField="target" :minimum="minimum"
:maximum="maximum" :interval="interval" title="Sales Rate" categoryField="category" :valueBorder="valueBorder">
<e-bullet-range-collection>
<e-bullet-range end="35" color="red"></e-bullet-range>
<e-bullet-range end="50" color="blue"></e-bullet-range>
<e-bullet-range end="100" color="green"></e-bullet-range>
</e-bullet-range-collection>
</ejs-bulletchart>
</div>
</template>
<script setup>
import { BulletChartComponent as EjsBulletchart, BulletRangeCollectionDirective as EBulletRangeCollection, BulletRangeDirective as EBulletRange } from '@syncfusion/ej2-vue-charts';
const data = [{ value: 55, target: 75, category: "Year 1" }];
const minimum = 0;
const maximum = 100;
const interval = 20;
const valueBorder = {
color: "red", width: 3
};
</script>
<template>
<div>
<ejs-bulletchart id="bulletChart"
:dataSource="data"
valueField="value"
targetField="target"
:minimum="minimum"
:maximum="maximum"
:interval="interval"
title="Sales Rate"
categoryField="category"
:valueBorder="valueBorder"
>
<e-bullet-range-collection>
<e-bullet-range end="35" color="red"></e-bullet-range>
<e-bullet-range end="50" color="blue"></e-bullet-range>
<e-bullet-range end="100" color="green"></e-bullet-range>
</e-bullet-range-collection>
</ejs-bulletchart>
</div>
</template>
<script>
import { BulletChartComponent, BulletRangeCollectionDirective, BulletRangeDirective } from '@syncfusion/ej2-vue-charts';
export default {
name: "App",
components: {
"ejs-bulletchart": BulletChartComponent,
"e-bullet-range-collection": BulletRangeCollectionDirective,
"e-bullet-range": BulletRangeDirective
},
data () {
return {
data: [{ value: 55, target: 75, category: "Year 1" }],
minimum: 0, maximum: 100, interval: 20, valueBorder: {
color: "red", width: 3
}
}
}
}
</script>
Fill color and height customization
Customize the fill color and height of the actual bar using the valueFill
and valueHeight
properties of the bullet chart. Also, you can bind the color for the actual bar from dataSource
for the bullet chart using valueFill
property.
<template>
<div>
<ejs-bulletchart id="bulletChart" :dataSource="data" valueField="value" targetField="target" :minimum="minimum"
:maximum="maximum" :interval="interval" title="Sales Rate" categoryField="category" valueFill="color">
<e-bullet-range-collection>
<e-bullet-range end="35" color="red"></e-bullet-range>
<e-bullet-range end="50" color="blue"></e-bullet-range>
<e-bullet-range end="100" color="green"></e-bullet-range>
</e-bullet-range-collection>
</ejs-bulletchart>
</div>
</template>
<script setup>
import { BulletChartComponent as EjsBulletchart, BulletRangeCollectionDirective as EBulletRangeCollection, BulletRangeDirective as EBulletRange } from '@syncfusion/ej2-vue-charts';
const data = [{ value: 55, target: 75, category: "Year 1", color: "blue" }];
const minimum = 0;
const maximum = 100;
const interval = 20;
</script>
<template>
<div>
<ejs-bulletchart id="bulletChart" :dataSource="data" valueField="value" targetField="target" :minimum="minimum"
:maximum="maximum" :interval="interval" title="Sales Rate" categoryField="category" valueFill="color">
<e-bullet-range-collection>
<e-bullet-range end="35" color="red"></e-bullet-range>
<e-bullet-range end="50" color="blue"></e-bullet-range>
<e-bullet-range end="100" color="green"></e-bullet-range>
</e-bullet-range-collection>
</ejs-bulletchart>
</div>
</template>
<script>
import { BulletChartComponent, BulletRangeCollectionDirective, BulletRangeDirective } from '@syncfusion/ej2-vue-charts';
export default {
name: "App",
components: {
"ejs-bulletchart": BulletChartComponent,
"e-bullet-range-collection": BulletRangeCollectionDirective,
"e-bullet-range": BulletRangeDirective
},
data() {
return {
data: [{ value: 55, target: 75, category: "Year 1", color: "blue" }],
minimum: 0, maximum: 100, interval: 20
}
}
}
</script>