Ranges in Vue Bullet Chart component

18 May 2022 / 2 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.

Source

Preview

app.vue

<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 Vue from 'vue';
import { BulletChartPlugin } from '@syncfusion/ej2-vue-charts';
Vue.use(BulletChartPlugin);

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

Source

Preview

app.vue

<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 Vue from 'vue';
import { BulletChartPlugin } from '@syncfusion/ej2-vue-charts';
Vue.use(BulletChartPlugin);

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