Bullet chart dimensions in Vue Bullet chart component

13 Jun 202413 minutes to read

Size for Container

The size of the Bullet Chart is determined by the container size, and it can be changed inline or via CSS as following.

<style>
  #bulletChart {
     width: 350px;
 }
</style>
<template>
  <div>
      <ejs-bulletchart id="bulletChart"> </ejs-bulletchart>
  </div>
</template>
<script setup>

import { BulletChartComponent } from '@syncfusion/ej2-vue-charts';


export default {
       data() { /*
        */
       }
}
</script>

<template>
  <div>
    <ejs-bulletchart id="bulletChart" :dataSource="data" valueField="value" targetField="target" :minimum="minimum"
      :maximum="maximum" :interval="interval" title="Revenue">
      <e-bullet-range-collection>
        <e-bullet-range end="100" color="red"></e-bullet-range>
        <e-bullet-range end="200" color="blue"></e-bullet-range>
        <e-bullet-range end="300" 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: 270, target: 250 }];
const minimum = 0;
const maximum = 300;
const interval = 50;

</script>
<style>
#bulletChart {
  width: 550px;
}
</style>
<template>
  <div>
    <ejs-bulletchart id="bulletChart" :dataSource="data" valueField="value" targetField="target" :minimum="minimum"
      :maximum="maximum" :interval="interval" title="Revenue">
      <e-bullet-range-collection>
        <e-bullet-range end="100" color="red"></e-bullet-range>
        <e-bullet-range end="200" color="blue"></e-bullet-range>
        <e-bullet-range end="300" 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: 270, target: 250 }],
      minimum: 0, maximum: 300, interval: 50
    }
  }
}
</script>
<style>
#bulletChart {
  width: 550px;
}
</style>

Size for Bullet Chart

The width and height properties are used to adjust the size of the Bullet Chart.

<template>
  <div>
    <ejs-bulletchart id="bulletChart" :dataSource="data" valueField="value" targetField="target" :minimum="minimum"
      :maximum="maximum" :interval="interval" title="Revenue" width="100%" height="100%">
      <e-bullet-range-collection>
        <e-bullet-range end="100" color="red"></e-bullet-range>
        <e-bullet-range end="200" color="blue"></e-bullet-range>
        <e-bullet-range end="300" 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: 270, target: 250 }];
const minimum = 0;
const maximum = 300;
const interval = 50;

</script>
<template>
  <div>
      <ejs-bulletchart id="bulletChart"
        :dataSource="data"
        valueField="value"
        targetField="target"
        :minimum="minimum"
        :maximum="maximum"
        :interval="interval"
        title="Revenue"
        width="100%"
        height="100%"
      >
      <e-bullet-range-collection>
          <e-bullet-range end="100" color="red"></e-bullet-range>
          <e-bullet-range end="200" color="blue"></e-bullet-range>
          <e-bullet-range end="300" 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: 270, target: 250 }],
      minimum: 0, maximum: 300, interval: 50
    }
  }
}
</script>

Pixel

Can set the size of the Bullet Chart in pixels as shown below.

<template>
  <div>
    <ejs-bulletchart id="bulletChart" :dataSource="data" valueField="value" targetField="target" :minimum="minimum"
      :maximum="maximum" :interval="interval" title="Revenue" width="600px" height="120px">
      <e-bullet-range-collection>
        <e-bullet-range end="100" color="red"></e-bullet-range>
        <e-bullet-range end="200" color="blue"></e-bullet-range>
        <e-bullet-range end="300" 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: 270, target: 250 }];
const minimum = 0;
const maximum = 300;
const interval = 50;

</script>
<template>
  <div>
      <ejs-bulletchart id="bulletChart"
        :dataSource="data"
        valueField="value"
        targetField="target"
        :minimum="minimum"
        :maximum="maximum"
        :interval="interval"
        title="Revenue"
        width="600px"
        height="120px"
      >
      <e-bullet-range-collection>
          <e-bullet-range end="100" color="red"></e-bullet-range>
          <e-bullet-range end="200" color="blue"></e-bullet-range>
          <e-bullet-range end="300" 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: 270, target: 250 }],
      minimum: 0, maximum: 300, interval: 50
    }
  }
}
</script>

Percentage

By setting a value in percentage, the Bullet Chart gets its dimension with respect to its container. For example, when the height is 50%, the Bullet Chart renders to half of the container’s height.

<template>
  <div>
    <ejs-bulletchart id="bulletChart" :dataSource="data" valueField="value" targetField="target" :minimum="minimum"
      :maximum="maximum" :interval="interval" title="Revenue" width="100%" height="100%">
      <e-bullet-range-collection>
        <e-bullet-range end="100" color="red"></e-bullet-range>
        <e-bullet-range end="200" color="blue"></e-bullet-range>
        <e-bullet-range end="300" 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: 270, target: 250 }];
const minimum = 0;
const maximum = 300;
const interval = 50;

</script>
<template>
  <div>
    <ejs-bulletchart id="bulletChart" :dataSource="data" valueField="value" targetField="target" :minimum="minimum"
      :maximum="maximum" :interval="interval" title="Revenue" width="100%" height="100%">
      <e-bullet-range-collection>
        <e-bullet-range end="100" color="red"></e-bullet-range>
        <e-bullet-range end="200" color="blue"></e-bullet-range>
        <e-bullet-range end="300" 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: 270, target: 250 }],
      minimum: 0, maximum: 300, interval: 50
    }
  }
}
</script>

If the size is not specified, the Bullet Chart will be rendered with a height of 126px and a width of the window.