Ranges in Vue Bullet chart component

13 Jun 20249 minutes to read

Ranges represent the quality of a specific range such as Good, Bad and Satisfactory in the Bullet Chart scale. The ending point of a qualitative range is specified in the end property in ranges. The minimum value of a quantitative scale is considered the starting point of the first range or the previous range end point.

<template>
  <div>
    <ejs-bulletchart id="bulletChart" :dataSource="data" valueField="value" targetField="target" :minimum="minimum"
      :maximum="maximum" :interval="interval" title="Revenue" categoryField="category"
      :categoryLabelStyle="categoryStyle" height="400px">
      <e-bullet-range-collection>
        <e-bullet-range end="35" color="darkred" opacity=0.5></e-bullet-range>
        <e-bullet-range end="50" color="red" opacity=1></e-bullet-range>
        <e-bullet-range end="75" color="blue" opacity=0.7></e-bullet-range>
        <e-bullet-range end="90" color="lightgreen" opacity=1></e-bullet-range>
        <e-bullet-range end="100" color="green" opacity=1></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: 55, target: 75, category: "Year 1" },
{ value: 70, target: 70, category: "Year 2" },
{ value: 85, target: 75, category: "Year 3" }];
const minimum = 0; 
const maximum = 100; 
const interval = 10;
const categoryStyle = { color: "red", size: "13", fontWeight: "bold" };


</script>
<template>
  <div>
    <ejs-bulletchart id="bulletChart" :dataSource="data" valueField="value" targetField="target" :minimum="minimum"
      :maximum="maximum" :interval="interval" title="Revenue" categoryField="category"
      :categoryLabelStyle="categoryStyle" height="400px">
      <e-bullet-range-collection>
        <e-bullet-range end="35" color="darkred" opacity=0.5></e-bullet-range>
        <e-bullet-range end="50" color="red" opacity=1></e-bullet-range>
        <e-bullet-range end="75" color="blue" opacity=0.7></e-bullet-range>
        <e-bullet-range end="90" color="lightgreen" opacity=1></e-bullet-range>
        <e-bullet-range end="100" color="green" opacity=1></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: 55, target: 75, category: "Year 1" },
      { value: 70, target: 70, category: "Year 2" },
      { value: 85, target: 75, category: "Year 3" }],
      minimum: 0, maximum: 100, interval: 10,
      categoryStyle: { color: "red", size: "13", fontWeight: "bold" }
    }
  }
}
</script>

Color Customization

Enhance the readability of ranges with color and opacity. It can be applied using the color and opacity properties in ranges.

<template>
  <div>
    <ejs-bulletchart id="bulletChart" :dataSource="data" valueField="value" targetField="target" :minimum="minimum"
      :maximum="maximum" :interval="interval" title="Revenue" categoryField="category"
      :categoryLabelStyle="categoryStyle" height="400px">
      <e-bullet-range-collection>
        <e-bullet-range end="35" color="darkred" opacity=0.5></e-bullet-range>
        <e-bullet-range end="50" color="red" opacity=1></e-bullet-range>
        <e-bullet-range end="75" color="blue" opacity=0.7></e-bullet-range>
        <e-bullet-range end="90" color="lightgreen" opacity=1></e-bullet-range>
        <e-bullet-range end="100" color="green" opacity=1></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: 55, target: 75, category: "Year 1" },
{ value: 70, target: 70, category: "Year 2" },
{ value: 85, target: 75, category: "Year 3" }];
const minimum = 0;
const maximum = 100;
const interval = 10;
const categoryStyle = { color: "red", size: "13", fontWeight: "bold" };

</script>
<template>
  <div>
    <ejs-bulletchart id="bulletChart" :dataSource="data" valueField="value" targetField="target" :minimum="minimum"
      :maximum="maximum" :interval="interval" title="Revenue" categoryField="category"
      :categoryLabelStyle="categoryStyle" height="400px">
      <e-bullet-range-collection>
        <e-bullet-range end="35" color="darkred" opacity=0.5></e-bullet-range>
        <e-bullet-range end="50" color="red" opacity=1></e-bullet-range>
        <e-bullet-range end="75" color="blue" opacity=0.7></e-bullet-range>
        <e-bullet-range end="90" color="lightgreen" opacity=1></e-bullet-range>
        <e-bullet-range end="100" color="green" opacity=1></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: 55, target: 75, category: "Year 1" },
      { value: 70, target: 70, category: "Year 2" },
      { value: 85, target: 75, category: "Year 3" }],
      minimum: 0, maximum: 100, interval: 10,
      categoryStyle: { color: "red", size: "13", fontWeight: "bold" }
    }
  }
}
</script>