- Default Tooltip
- Tooltip Template
- Customize the Appearance of Tooltip
- Tooltip Customization
Contact Support
Tool tip in Vue Bullet chart component
13 Jun 20245 minutes to read
When the mouse is hovered over a bar in the Bullet Chart, the tooltip displays important summary about the actual and the target bar values.
Default Tooltip
The tooltip is not visible by default. To make it visible, set the enable
property in the tooltip
to true and injecting BulletTooltip
module using BulletChart.Inject(BulletTooltip)
and injecting BulletTooltip
module using BulletChart.Inject(BulletTooltip)
.
<template>
<div>
<ejs-bulletchart id="bulletChart" :dataSource="data" valueField="value" targetField="comparativeMeasureValue"
:minimum="minimum" :maximum="maximum" :interval="interval" title="Profit in %" height="400px">
<e-bullet-range-collection>
<e-bullet-range end="5" color="red"></e-bullet-range>
<e-bullet-range end="15" color="blue"></e-bullet-range>
<e-bullet-range end="20" 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: 5, comparativeMeasureValue: 7.5, category: '2001' },
{ value: 7, comparativeMeasureValue: 5, category: '2002' },
{ value: 10, comparativeMeasureValue: 6, category: '2003' },
{ value: 5, comparativeMeasureValue: 8, category: '2004' },
{ value: 12, comparativeMeasureValue: 5, category: '2005' },
{ value: 8, comparativeMeasureValue: 6, category: '2006' }
];
const minimum = 0;
const maximum = 20;
const interval = 5;
</script>
<template>
<div>
<ejs-bulletchart id="bulletChart" :dataSource="data" valueField="value" targetField="comparativeMeasureValue"
:minimum="minimum" :maximum="maximum" :interval="interval" title="Profit in %" height="400px">
<e-bullet-range-collection>
<e-bullet-range end="5" color="red"></e-bullet-range>
<e-bullet-range end="15" color="blue"></e-bullet-range>
<e-bullet-range end="20" 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: 5, comparativeMeasureValue: 7.5, category: '2001' },
{ value: 7, comparativeMeasureValue: 5, category: '2002' },
{ value: 10, comparativeMeasureValue: 6, category: '2003' },
{ value: 5, comparativeMeasureValue: 8, category: '2004' },
{ value: 12, comparativeMeasureValue: 5, category: '2005' },
{ value: 8, comparativeMeasureValue: 6, category: '2006' }
],
minimum: 0, maximum: 20, interval: 5
}
}
}
</script>
Tooltip Template
Any HTML elements can be displayed in the tooltip by using the template
property of the tooltip
. You can use the ${target} and ${value} as place holders in the HTML element to display the value and target values from the data source of corresponding data point.
Customize the Appearance of Tooltip
Tooltip Customization
The following properties can be used to customize the Bullet Chart tooltip.