Vue
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Customization in Vue Bullet Chart component

23 Jun 2022 / 3 minutes to read

Orientation

The Bullet Chart can be rendered in different orientations such as Horizontal or Vertical via the orientation property. By default, the Bullet Chart is rendered in the Horizontal orientation.

Source
Preview
app.vue
Copied to clipboard
<template>
  <div>
      <ejs-bulletchart id="bulletChart"
        :dataSource="data"
        valueField="value"
        targetField="target"
        :minimum="minimum"
        :maximum="maximum"
        :interval="interval"
        title="Sales Rate in dollars"
        labelFormat="${value}"
        subtitle="(in dollars $)"
        orientation="vertical"
        width="20%"
      >
      <e-bullet-range-collection>
          <e-bullet-range end="35" color="red"></e-bullet-range>
          <e-bullet-range end="50" color="blue"></e-bullet-range>
          <e-bullet-range end="100" 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: 55, target: 45 }],
      minimum: 0, maximum: 100, interval: 20
    }
  }
}
</script>

Right-to-left (RTL)

The Bullet Chart supports the right-to-left rendering that can be enabled by setting the enableRtl property to true.

Source
Preview
app.vue
Copied to clipboard
<template>
  <div>
      <ejs-bulletchart id="bulletChart"
        :dataSource="data"
        valueField="value"
        targetField="target"
        :minimum="minimum"
        :maximum="maximum"
        :interval="interval"
        title="Sales Rate"
        enableRtl="true"
      >
      <e-bullet-range-collection>
          <e-bullet-range end="500" color="red"></e-bullet-range>
          <e-bullet-range end="1500" color="blue"></e-bullet-range>
          <e-bullet-range end="2000" 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: 1500, target: 1000 }],
      minimum: 0, maximum: 2000, interval: 200
    }
  }
}
</script>

Animation

The actual and the target bar supports the linear animation via the animation setting. The speed and the delay are controlled using the duration and delay properties respectively.

Source
Preview
app.vue
Copied to clipboard
<template>
  <div>
      <ejs-bulletchart id="bulletChart"
        :dataSource="data"
        valueField="value"
        targetField="target"
        :minimum="minimum"
        :maximum="maximum"
        :interval="interval"
        title="Sales Rate"
        :animation="animation"
      >
      <e-bullet-range-collection>
          <e-bullet-range end="500" color="red"></e-bullet-range>
          <e-bullet-range end="1500" color="blue"></e-bullet-range>
          <e-bullet-range end="2000" 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: 1500, target: 1000 }],
      minimum: 0, maximum: 2000, interval: 200,
      animation: { enable: true }
    }
  }
}
</script>

Theme

The Bullet Chart supports different type of themes via the theme property.

Source
Preview
app.vue
Copied to clipboard
<template>
  <div>
      <ejs-bulletchart id="bulletChart"
        :dataSource="data"
        valueField="value"
        targetField="target"
        :minimum="minimum"
        :maximum="maximum"
        :interval="interval"
        title="Profit in %"
        :theme="theme"
      >
      <e-bullet-range-collection>
          <e-bullet-range end="15" color="red"></e-bullet-range>
          <e-bullet-range end="50" color="blue"></e-bullet-range>
          <e-bullet-range end="100" 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: 50, target: 45 }],
      minimum: 0, maximum: 100, interval: 10, theme: "HighContrast"
    }
  }
}
</script>
Previous
Next