Properties

NameTypeDefault
animationDuration Number null

Sets ot gets the bulletcharts's animationDuration.

Possible values

number

'slow'

'fast'

<template>
  <JqxBulletChart ref="myBulletChart"
    :width="500" :height="120" :animationDuration="500"
  />
</template>
 
<script>
  import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
 
  export default {
    components: {
      JqxBulletChart
    }
  }
</script>

Get the animationDuration property.

let animationDuration = this.$refs.myBulletChart.animationDuration;
barSize String | Number 50%

Sets ot gets the bulletcharts's bar size. 

<template>
  <JqxBulletChart ref="myBulletChart"
    :width="500" :height="120" :barSize="'40%'"
  />
</template>
 
<script>
  import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
 
  export default {
    components: {
      JqxBulletChart
    }
  }
</script>
description String 'Description'

Sets ot gets the bulletcharts's description. 

<template>
  <JqxBulletChart ref="myBulletChart"
    :width="500" :height="120" :description="'Description'"
  />
</template>
 
<script>
  import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
 
  export default {
    components: {
      JqxBulletChart
    }
  }
</script>
disabled Boolean false

Disables the bullet chart. 

<template>
  <JqxBulletChart ref="myBulletChart"
    :width="500" :height="120" :disabled="true"
  />
</template>
 
<script>
  import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
 
  export default {
    components: {
      JqxBulletChart
    }
  }
</script>
height Number | String 100

Sets ot gets the bulletcharts's height. 

<template>
  <JqxBulletChart ref="myBulletChart"
    :width="500" :height="120"
  />
</template>
 
<script>
  import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
 
  export default {
    components: {
      JqxBulletChart
    }
  }
</script>
labelsFormat String null

Sets ot gets the bulletcharts's labelsFormat.

Possible values:

"null"

"d" - decimal numbers

"f" - floating-point numbers

"n" - integer numbers

"c" - currency numbers

"p" - percentage numbers

<template>
  <JqxBulletChart ref="myBulletChart"
    :width="500" :height="120" :labelsFormat="'c'"
  />
</template>
 
<script>
  import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
 
  export default {
    components: {
      JqxBulletChart
    }
  }
</script>
labelsFormatFunction Function null

Sets ot gets the bulletcharts's labelsFormatFunction. 

<template>
  <JqxBulletChart ref="myBulletChart"
    :width="500" :height="120" :labelsFormatFunction="labelsFormatFunction"
  />
</template>
 
<script>
  import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
 
  export default {
    components: {
      JqxBulletChart
    },
    methods: {
      labelsFormatFunction: function (value, position) {
        return value + 'C'
      }
    }
  }
</script>
orientation String "horizontal"

Sets ot gets the bulletcharts's orientation.

Possible values:

"horizontal"

"vertical"

<template>
  <JqxBulletChart ref="myBulletChart"
    :width="500" :height="120" :orientation="'horizontal'"
  />
</template>
 
<script>
  import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
 
  export default {
    components: {
      JqxBulletChart
    }
  }
</script>
pointer Object { value: 65, label: "Value", size: "25%", color: "" }

Sets ot gets the bulletcharts's pointer. 

<template>
  <JqxBulletChart ref="myBulletChart"
    :width="500" :height="120" :pointer="pointer"
  />
</template>
 
<script>
  import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
 
  export default {
    components: {
      JqxBulletChart
    },
    data: function () {
      return {
        pointer: {
          value: 270,
          label: 'Value',
          thickness: 8,
          color: 'White'
        }
      }
    }
  }
</script>
rtl Boolean false

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts. 

<template>
  <JqxBulletChart ref="myBulletChart"
    :width="500" :height="120" :rtl="true"
  />
</template>
 
<script>
  import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
 
  export default {
    components: {
      JqxBulletChart
    }
  }
</script>
ranges Array [{ startValue: 0, endValue: 50, color: "#000000", opacity: 0.7 }, { startValue: 50, endValue: 80, color: "#000000", opacity: 0.5 }, { startValue: 80, endValue: 100, color: "#000000", opacity: 0.3}]

Sets ot gets the bulletcharts's range.

Possible values

'startValue' - the value from which the range will start

'endValue' - the value where the current range will end

'color' - the colour of the range

'opacity' - the opacity of the range

<template>
  <JqxBulletChart ref="myBulletChart"
    :width="500" :height="120" :ranges="ranges"
  />
</template>
 
<script>
  import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
 
  export default {
    components: {
      JqxBulletChart
    },
    data: function () {
      return {
        ranges: [
          {
            startValue: 0, endValue: 200, color: 'Blue', opacity: 0.6
          },
          {
            startValue: 200, endValue: 250, color: 'Black', opacity: 0.3
          }
        ]
      }
    }
  }
</script>
showTooltip Boolean true

Sets ot gets the bulletcharts's showTooltip.

<template>
  <JqxBulletChart ref="myBulletChart"
    :width="500" :height="120" :showTooltip="false"
  />
</template>
 
<script>
  import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
 
  export default {
    components: {
      JqxBulletChart
    }
  }
</script>
target Object { value: 85, label: "Target", size: 4, color: "" };

Sets ot gets the bulletcharts's target. 

<template>
  <JqxBulletChart ref="myBulletChart"
    :width="500" :height="120" :target="target"
  />
</template>
 
<script>
  import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
 
  export default {
    components: {
      JqxBulletChart
    },
    data: function () {
      return {
        target: { value: 270, label: 'Value', thickness: 8, color: 'White' }
      }
    }
  }
</script>
ticks Object { position: "far", interval: 20, size: 10 }

Sets ot gets the bulletcharts's ticks.

Possible values for ticks.position

"near" - positions the ticks at the top of the ranges bar if the orientation is set to "horizontal" and at the left if the orientation is set to "vertical";

"far" - positions the ticks at the bottom of the ranges bar if the orientation is set to "horizontal" and at the right if the orientation is set to "vertical";

"both"

"none"

<template>
  <JqxBulletChart ref="myBulletChart"
    :width="500" :height="120" :ticks="ticks"
  />
</template>
 
<script>
  import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
 
  export default {
    components: {
      JqxBulletChart
    },
    data: function () {
      return {
        ticks: { position: 'near', interval: 20, size: 10 }
      }
    }
  }
</script>
title String 'Title'

Sets ot gets the bulletcharts's title. 

<template>
  <JqxBulletChart ref="myBulletChart"
    :width="500" :height="120" :title="'Title'"
  />
</template>
 
<script>
  import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
 
  export default {
    components: {
      JqxBulletChart
    }
  }
</script>
tooltipFormatFunction Function null

Sets ot gets the bulletcharts's tooltipFormatFunction.

<template>
  <JqxBulletChart ref="myBulletChart"
    :width="500" :height="120" :tooltipFormatFunction="tooltipFormatFunction"
  />
</template>
 
<script>
  import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
 
  export default {
    components: {
      JqxBulletChart
    },
    methods: {
      tooltipFormatFunction: function (pointerValue, targetValue) {
        return 'Current: ' + pointerValue + '; Average: ' + targetValue
      }
    }
  }
</script>
width Number | String 500

Sets ot gets the bulletcharts's width. 

<template>
  <JqxBulletChart ref="myBulletChart"
    :width="500" :height="120"
  />
</template>
 
<script>
  import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
 
  export default {
    components: {
      JqxBulletChart
    }
  }
</script>

Events

change Event

This event is triggered when the value is changed.

Code examples

Bind to the change event of jqxBulletChart. 

<template>
  <JqxBulletChart ref="myBulletChart" @change="onChange($event)"
    :width="500" :height="120"
  />
</template>
 
<script>
  import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
 
  export default {
    components: {
      JqxBulletChart
    },
    methods: {
      onChange: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Methods

NameArgumentsReturn Type
destroy None None

Destroy the jqxBulletChart widget. 

<template>
  <JqxBulletChart ref="myBulletChart"
    :width="500" :height="120"
  />
</template>
 
<script>
  import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
 
  export default {
    components: {
      JqxBulletChart
    },
    mounted: function () {
      this.$refs.myBulletChart.destroy();
    }
  }
</script>
render None None

Renders the jqxBulletChart widget. 

<template>
  <JqxBulletChart ref="myBulletChart"
    :width="500" :height="120"
  />
</template>
 
<script>
  import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
 
  export default {
    components: {
      JqxBulletChart
    },
    mounted: function () {
      this.$refs.myBulletChart.render();
    }
  }
</script>
refresh None None

Refresh the jqxBulletChart widget. 

<template>
  <JqxBulletChart ref="myBulletChart"
    :width="500" :height="120"
  />
</template>
 
<script>
  import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
 
  export default {
    components: {
      JqxBulletChart
    },
    mounted: function () {
      this.$refs.myBulletChart.refresh();
    }
  }
</script>
val value Number

Sets or gets the selected value. 

<template>
  <JqxBulletChart ref="myBulletChart"
    :width="500" :height="120"
  />
</template>
 
<script>
  import JqxBulletChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbulletchart.vue';
 
  export default {
    components: {
      JqxBulletChart
    },
    mounted: function () {
      const value = this.$refs.myBulletChart.val(50);
    }
  }
</script>