The following properties can be used to customize majorTicklines
and minorTicklines
.
<template>
<div>
<ejs-bulletchart id="bulletChart"
:dataSource="data"
valueField="value"
targetField="target"
:minimum="minimum"
:maximum="maximum"
:interval="interval"
title="Revenue"
:majorTickLines="majorTickLines"
:minorTickLines="minorTickLines"
>
<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,
majorTickLines: { color: 'blue', width: 5 },
minorTickLines: { color: 'red', width: 5 }
}
}
}
</script>
The major and the minor ticks can be placed inside or outside the ranges using the tickPosition
property.
<template>
<div>
<ejs-bulletchart id="bulletChart"
:dataSource="data"
valueField="value"
targetField="target"
:minimum="minimum"
:maximum="maximum"
:interval="interval"
title="Revenue"
tickPosition="Inside"
>
<e-bullet-range-collection>
<e-bullet-range end="20" color="red"></e-bullet-range>
<e-bullet-range end="25" color="blue"></e-bullet-range>
<e-bullet-range end="30" 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: 23, target: 22 }],
minimum: 0, maximum: 30, interval: 5
}
}
}
</script>
Axis numeric labels can be formatted by using the labelFormat
property. Axis labels support all globalize formats.
<template>
<div>
<ejs-bulletchart id="bulletChart"
:dataSource="data"
valueField="value"
targetField="target"
:minimum="minimum"
:maximum="maximum"
:interval="interval"
title="Revenue"
labelFormat="c"
>
<e-bullet-range-collection>
<e-bullet-range end="500" color="red"></e-bullet-range>
<e-bullet-range end="1000" color="blue"></e-bullet-range>
<e-bullet-range end="1500" 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: 1100, target: 950 }],
minimum: 0, maximum: 1500, interval: 500
}
}
}
</script>
The following table describes the result of applying some commonly used formats to numeric axis labels.
Label Value | Label Format property value | Result | Description |
1000 | n1 | 1000.0 | The Number is rounded to 1 decimal place |
1000 | n2 | 1000.00 | The Number is rounded to 2 decimal place |
1000 | n3 | 1000.000 | The Number is rounded to 3 decimal place |
0.01 | p1 | 1.0% | The Number is converted to percentage with 1 decimal place |
0.01 | p2 | 1.00% | The Number is converted to percentage with 2 decimal place |
0.01 | p3 | 1.000% | The Number is converted to percentage with 3 decimal place |
1000 | c1 | * 000.0 | The Currency symbol is appended to number and number is rounded to 1 decimal place |
1000 | c2 | * 000.00 | The Currency symbol is appended to number and number is rounded to 2 decimal place |
To separate the groups of thousands, set the enableGroupSeparator
property to true.
<template>
<div>
<ejs-bulletchart id="bulletChart"
:dataSource="data"
valueField="value"
targetField="target"
:minimum="minimum"
:maximum="maximum"
:interval="interval"
title="Revenue"
enableGroupSeparator=true
>
<e-bullet-range-collection>
<e-bullet-range end="500" color="red"></e-bullet-range>
<e-bullet-range end="1000" color="blue"></e-bullet-range>
<e-bullet-range end="1500" 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: 1100, target: 950 }],
minimum: 0, maximum: 1500, interval: 500
}
}
}
</script>
Using the labelFormat
property, axis labels can be specified with a custom defined format in addition to the axis value. The label format uses a placeholder such as ${value}K, which represents the axis label.
<template>
<div>
<ejs-bulletchart id="bulletChart"
:dataSource="data"
valueField="value"
targetField="target"
:minimum="minimum"
:maximum="maximum"
:interval="interval"
title="Revenue"
labelFormat="${value}K"
>
<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>
Label can be placed Inside or Outside of the ranges using the labelPosition
property.
<template>
<div>
<ejs-bulletchart id="bulletChart"
:dataSource="data"
valueField="value"
targetField="target"
:minimum="minimum"
:maximum="maximum"
:interval="interval"
title="Revenue"
labelPosition="Inside"
>
<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>
To place an axis opposite to its original position, set the opposedPosition
property to true.
<template>
<div>
<ejs-bulletchart id="bulletChart"
:dataSource="data"
valueField="value"
targetField="target"
:minimum="minimum"
:maximum="maximum"
:interval="interval"
title="Revenue"
opposedPosition=true
>
<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>
The Bullet Chart supports X-axis label by specifying the property from the data source to the categoryField
. It helps to understand the input data in a more efficient way.
<template>
<div>
<ejs-bulletchart id="bulletChart"
:dataSource="data"
valueField="value"
targetField="target"
:minimum="minimum"
:maximum="maximum"
:interval="interval"
title="Revenue"
categoryField="category"
>
<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, category: "Product A" }],
minimum: 0, maximum: 300, interval: 50
}
}
}
</script>
The label color, opacity, font size, font family, font weight, and font style can be customized by using the categoryLabelStyle
setting for category and the labelStyle
setting for axis label. The useRangeColor
property specifies the color of the axis label and represents the color from the corresponding range colors.
<template>
<div>
<ejs-bulletchart id="bulletChart"
:dataSource="data"
valueField="value"
targetField="target"
:minimum="minimum"
:maximum="maximum"
:interval="interval"
title="Revenue"
categoryField="category"
:categoryLabelStyle="categoryStyle"
>
<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, category: "Product A" }],
minimum: 0, maximum: 300, interval: 50,
categoryStyle: { color: "Orange" }
}
}
}
</script>