Search results

Tooltip in Vue Bullet Chart component

27 Oct 2021 / 2 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).

Source
Preview
app.vue
Copied to clipboard
<template>
  <div>
      <ejs-bulletchart id="bulletChart"
        :dataSource="localData"
        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 Vue from 'vue';
import { BulletChartPlugin } from '@syncfusion/ej2-vue-charts';
Vue.use(BulletChartPlugin);

export default {
  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.

  • fill - Specifies the color of tooltip.
  • border - Specifies the tooltip border color and width.
  • textStyle - Specifies the tooltip font family, font style, font weight, color and size.