Vue UI Components Documentation

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;

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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 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>

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>