Data label in Vue Bullet chart component

13 Jun 202410 minutes to read

Data Labels are used to identify the value of actual bar in the Bullet Chart component. The Data Labels will be shown by specifying the dataLabel setting’s enable property to true.

<template>
  <div>
    <ejs-bulletchart id="bulletChart" :dataSource="data" valueField="value" targetField="comparativeMeasureValue"
      :minimum="minimum" :maximum="maximum" :interval="interval" title="Profit in %" labelFormat="{value}%"
      :dataLabel="dataLabel" 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;
const dataLabel = { visible: true };

</script>
<template>
  <div>
    <ejs-bulletchart id="bulletChart" :dataSource="data" valueField="value" targetField="comparativeMeasureValue"
      :minimum="minimum" :maximum="maximum" :interval="interval" title="Profit in %" labelFormat="{value}%"
      :dataLabel="dataLabel" 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, dataLabel: { visible: true }
    }
  }
}
</script>

Data Label Customization

Data Labels color, opacity, font size, font family, font weight, and font style can be customized using the labelStyle.

<template>
  <div>
    <ejs-bulletchart id="bulletChart" :dataSource="data" valueField="value" targetField="comparativeMeasureValue"
      :minimum="minimum" :maximum="maximum" :interval="interval" title="Profit in %" labelFormat="{value}%"
      :dataLabel="dataLabel" 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;
const dataLabel = { enable: true, labelStyle: { color: "yellow", size: "20" } };

</script>
<template>
  <div>
      <ejs-bulletchart id="bulletChart"
        :dataSource="data"
        valueField="value"
        targetField="comparativeMeasureValue"
        :minimum="minimum"
        :maximum="maximum"
        :interval="interval"
        title="Profit in %"
        labelFormat="{value}%"
        :dataLabel="dataLabel"
        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,
        dataLabel: { enable: true, labelStyle: { color: "yellow", size: "20" }}
    }
  }
}
</script>