The size of the Bullet Chart is determined by the container size, and it can be changed inline or via CSS as following.
<style>
#bulletChart {
width: 350px;
}
</style>
<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() { /*
*/
}
}
</script>
<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>
<style>
#bulletChart {
width: 550px;
}
</style>
The width
and height
properties are used to adjust the size of the Bullet Chart.
<template>
<div>
<ejs-bulletchart id="bulletChart"
:dataSource="data"
valueField="value"
targetField="target"
:minimum="minimum"
:maximum="maximum"
:interval="interval"
title="Revenue"
width="100%"
height="100%"
>
<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>
Can set the size of the Bullet Chart in pixels as shown below.
<template>
<div>
<ejs-bulletchart id="bulletChart"
:dataSource="data"
valueField="value"
targetField="target"
:minimum="minimum"
:maximum="maximum"
:interval="interval"
title="Revenue"
width="600px"
height="120px"
>
<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>
By setting a value in percentage, the Bullet Chart gets its dimension with respect to its container. For example, when the height is 50%, the Bullet Chart renders to half of the container’s height.
<template>
<div>
<ejs-bulletchart id="bulletChart"
:dataSource="data"
valueField="value"
targetField="target"
:minimum="minimum"
:maximum="maximum"
:interval="interval"
title="Revenue"
width="100%"
height="100%"
>
<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>
If the size is not specified, the Bullet Chart will be rendered with a height of 126px and a width of the window.