Contents
- Orientation
- Right-to-left (RTL)
- Animation
- Theme
Having trouble getting help?
Contact Support
Contact Support
Customization in Vue Bullet chart component
13 Jun 202415 minutes to read
Orientation
The Bullet Chart can be rendered in different orientations such as Horizontal or Vertical via the orientation
property. By default, the Bullet Chart is rendered in the Horizontal orientation.
<!-- <template>
<div>
<ejs-bulletchart id="bulletChart"
:dataSource="data"
valueField="value"
targetField="target"
:minimum="minimum"
:maximum="maximum"
:interval="interval"
title="Sales Rate in dollars"
labelFormat="${value}"
subtitle="(in dollars $)"
orientation="vertical"
:animation="animation"
width="20%"
>
<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 } from '@syncfusion/ej2-vue-charts';
export default {
data () {
return {
data: [{ value: 55, target: 45 }], label: '${value}',
minimum: 0, maximum: 100, interval: 20, animation: { enable: false }
}
}
}
</script> -->
<template>
<div>
<ejs-bulletchart id="bulletChart" :dataSource="data" valueField="value" targetField="target" :minimum="minimum"
:maximum="maximum" :interval="interval" title="Sales Rate in dollars" labelFormat="${value}"
subtitle="(in dollars $)" orientation="vertical" :animation="animation" width="20%">
<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: 45 }];
const label = '${value}';
const minimum = 0;
const maximum = 100;
const interval = 20;
const animation = { enable: false };
</script>
<!-- <template>
<div>
<ejs-bulletchart id="bulletChart"
:dataSource="data"
valueField="value"
targetField="target"
:minimum="minimum"
:maximum="maximum"
:interval="interval"
title="Sales Rate in dollars"
labelFormat="${value}"
subtitle="(in dollars $)"
orientation="vertical"
:animation="animation"
width="20%"
>
<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 } from '@syncfusion/ej2-vue-charts';
export default {
name: "App",
components: {
"ejs-bulletchart":BulletchartComponent,
"e-bullet-range-collection":BulletDirective,
"e-bullet-range":BulletDirective,
},
data () {
return {
data: [{ value: 55, target: 45 }], label: '${value}',
minimum: 0, maximum: 100, interval: 20, animation: { enable: false }
}
}
}
</script> -->
<template>
<div>
<ejs-bulletchart id="bulletChart"
:dataSource="data"
valueField="value"
targetField="target"
:minimum="minimum"
:maximum="maximum"
:interval="interval"
title="Sales Rate in dollars"
labelFormat="${value}"
subtitle="(in dollars $)"
orientation="vertical"
:animation="animation"
width="20%"
>
<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: 45 }], label: '${value}',
minimum: 0, maximum: 100, interval: 20, animation: { enable: false }
}
}
}
</script>
Right-to-left (RTL)
The Bullet Chart supports the right-to-left rendering that can be enabled by setting the enableRtl
property to true.
<template>
<div>
<ejs-bulletchart id="bulletChart" :dataSource="data" valueField="value" targetField="target" :minimum="minimum"
:maximum="maximum" :interval="interval" title="Sales Rate" enableRtl="true">
<e-bullet-range-collection>
<e-bullet-range end="500" color="red"></e-bullet-range>
<e-bullet-range end="1500" color="blue"></e-bullet-range>
<e-bullet-range end="2000" 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: 1500, target: 1000 }];
const minimum = 0;
const maximum = 2000;
const interval = 200;
</script>
<template>
<div>
<ejs-bulletchart id="bulletChart" :dataSource="data" valueField="value" targetField="target" :minimum="minimum"
:maximum="maximum" :interval="interval" title="Sales Rate" enableRtl="true">
<e-bullet-range-collection>
<e-bullet-range end="500" color="red"></e-bullet-range>
<e-bullet-range end="1500" color="blue"></e-bullet-range>
<e-bullet-range end="2000" 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: 1500, target: 1000 }],
minimum: 0, maximum: 2000, interval: 200
}
}
}
</script>
Animation
The actual and the target bar supports the linear animation via the animation
setting. The speed and the delay are controlled using the duration
and delay
properties respectively.
<template>
<div>
<ejs-bulletchart id="bulletChart" :dataSource="data" valueField="value" targetField="target" :minimum="minimum"
:maximum="maximum" :interval="interval" title="Sales Rate" :animation="animation">
<e-bullet-range-collection>
<e-bullet-range end="500" color="red"></e-bullet-range>
<e-bullet-range end="1500" color="blue"></e-bullet-range>
<e-bullet-range end="2000" 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: 1500, target: 1000 }];
const minimum = 0;
const maximum = 2000;
const interval = 200;
const animation = { enable: true };
</script>
<template>
<div>
<ejs-bulletchart id="bulletChart" :dataSource="data" valueField="value" targetField="target" :minimum="minimum"
:maximum="maximum" :interval="interval" title="Sales Rate" :animation="animation">
<e-bullet-range-collection>
<e-bullet-range end="500" color="red"></e-bullet-range>
<e-bullet-range end="1500" color="blue"></e-bullet-range>
<e-bullet-range end="2000" 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: 1500, target: 1000 }],
minimum: 0, maximum: 2000, interval: 200,
animation: { enable: true }
}
}
}
</script>
Theme
The Bullet Chart supports different type of themes via the theme
property.
<template>
<div>
<ejs-bulletchart id="bulletChart" :dataSource="data" valueField="value" targetField="target" :minimum="minimum"
:maximum="maximum" :interval="interval" title="Profit in %" :theme="theme">
<e-bullet-range-collection>
<e-bullet-range end="15" 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: 50, target: 45 }];
const minimum = 0;
const maximum = 100;
const interval = 10;
const theme = "HighContrast";
</script>
<template>
<div>
<ejs-bulletchart id="bulletChart" :dataSource="data" valueField="value" targetField="target" :minimum="minimum"
:maximum="maximum" :interval="interval" title="Profit in %" :theme="theme">
<e-bullet-range-collection>
<e-bullet-range end="15" 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: 50, target: 45 }],
minimum: 0, maximum: 100, interval: 10, theme: "HighContrast"
}
}
}
</script>