Vue UI Components Documentation

Sets or gets the alterTextCase property used to specify the field by which tags should be sorted.
Possible values are 'none', 'allLower', 'allUpper', 'firstUpper', 'titleCase'

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
    :alterTextCase="'titleCase'"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    }
  }
</script>

Enables or disables the ability to follow tag links in jqxTagCloud.

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
    :disabled="true"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    }
  }
</script>

Sets or gets the displayLimit property used to filter highest values tags up to the number specified.

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
    :displayLimit="3"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    }
  }
</script>

Sets or gets the field name used for the tag label.

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    }
  }
</script>

Sets or gets the displayValue property used to specify whether to add the tag value field after the text.

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
    :displayValue="true"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    }
  }
</script>

Sets or gets the fontSizeUnit property used to set the font size unit possible values 'px', 'em', '%'

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
    :fontSizeUnit="'em'"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    }
  }
</script>

Sets or gets the jqxTagCloud's height.

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
    :height="50"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    }
  }
</script>

Sets or gets the maxColor property used to specify color of the tags for the elements with highest value attribute.
Together with minColor property will set color of tags in a gradient fashion depending on their value attribute towards the highest value.
Possible values: all browser supported colors including rgba.

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
    :maxColor="'darkgreen'" :minColor="'lime'"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    }
  }
</script>

Sets or gets the maxFontSize property used to set the font size of the tags with the highest value attribute.

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
    :maxFontSize="5"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    }
  }
</script>

Sets or gets the maxValueToDisplay property used to filter tags with value higher than the specified.

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
    :maxValueToDisplay="50"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    }
  }
</script>

Sets or gets the minColor property used to specify color of the tags for the elements with lowest value attribute.
Together with maxColor property will set color of tags in a gradient fashion depending on their value attribute towards the highest value.
Possible values: all browser supported colors including rgba.

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
    :maxColor="'darkgreen'" :minColor="'lime'"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    }
  }
</script>

Sets or gets the minFontSize property used to set the font size of the tags with the lowest value attribute.

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
    :minFontSize="1"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    }
  }
</script>

Sets or gets the minValueToDisplay property used to filter tags with value lower than the specified.

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
    :minValueToDisplay="30"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    }
  }
</script>

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

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
    :rtl="true"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    }
  }
</script>

Sets or gets the sortBy property used to specify the field by which tags should be sorted.
Possible values are 'none', 'label', 'value'

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
    :sortBy="'label'"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    }
  }
</script>

Sets or gets the sortOrder property used to specify the direction in which tags should be sorted.
Possible values are 'ascending', 'descending'

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
    :sortBy="'label'" :sortOrder="'descending'"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    }
  }
</script>

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    }
  }
</script>

A callback function used for custom tags rendering.

function tagRenderer (itemData, minValue, valueRange)

itemData - the record information of the current tag

minValue - the lowest value attribute of all elements in the cloud

valueRange - the difference between the lowest and highest value attributes in the cloud ( can be used for custom logic )

The function must return valid content for an anchor tag, usually a string but can be also be a jquery element object.

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
    :tagRenderer="tagRenderer"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    },
    methods: {
      tagRenderer: function (itemData, minValue, valueRange) {
        return '<i>' + itemData.countryName + '</i>';
      }
    }
  }
</script>

Sets or gets the takeTopWeightedItems property. Property indicates if displayLimit will prioritize highest value members

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
    :takeTopWeightedItems="true"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    }
  }
</script>

Sets or gets the textColor property used to specify color of the tags in the case where the minColor and maxColor properties are not set.
Possible values: all browser supported colors including rgba.

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
    :textColor="'red'"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    }
  }
</script>

Sets or gets the field name used for common base URL path for all tags.

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
    :urlBase="'http://jqwidgets.com/'" :urlMember="'url'"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    }
  }
</script>

Sets or gets the field name used by the anchor element.

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
    :urlMember="'url'"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    }
  }
</script>

Sets or gets the field name used for value/weight.

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    }
  }
</script>

Sets or gets the jqxTagCloud's width.

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    }
  }
</script>

This event is triggered when the widget has completed binding to a dataAdapter.

Code examples

Bind to the bindingComplete event of jqxTagCloud.

<template>
  <JqxTagCloud ref="myTagCloud" @bindingComplete="onBindingComplete($event)"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    },
    mounted: function () {
      this.$refs.myTagCloud.source = this.source;
    },
    methods: {
      onBindingComplete: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a tag element is clicked. Event Arguments:

• label - item's label.
• value - item's value.
• url - item's url.
• visibleIndex - item's visible index.
• index - item's index.
• originalEvent - the Click event object.
• target - item's html element.

Code examples

Bind to the itemClick event of jqxTagCloud.

<template>
  <JqxTagCloud ref="myTagCloud" @itemClick="onItemClick($event)"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    },
    methods: {
      onItemClick: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Calls the widget's destroy function.

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    },
    mounted: function () {
      this.$refs.myTagCloud.destroy();
    }
  }
</script>

Returns the index of the first tag with the specified label (displayMember).

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    },
    mounted: function () {
      const value = this.$refs.myTagCloud.findTagIndex('Germany');
    }
  }
</script>

Returns an array with indices of all hidden tags.

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    },
    mounted: function () {
      const value = this.$refs.myTagCloud.getHiddenTagsList();
    }
  }
</script>

Returns an array with a copy of all tags that have been rendered in the order that they have been rendered.
This array excludes filtered values. But includes hidden ones.

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    },
    mounted: function () {
      const value = this.$refs.myTagCloud.getRenderedTags();
    }
  }
</script>

Returns an array with a copy of all tags.
This list is used before any filtering/sorting/hiding is done.

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    },
    mounted: function () {
      const value = this.$refs.myTagCloud.getTagsList();
    }
  }
</script>

Hides an element with specified index.

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    },
    mounted: function () {
      this.$refs.myTagCloud.hideItem(1);
    }
  }
</script>

Inserts an element before an element with specified index

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    },
    mounted: function () {
      this.$refs.myTagCloud.insertAt(1,{ countryName: "Bulgaria", technologyRating: 50, url: "community" });
    }
  }
</script>

Deletes an element with specified index.

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    },
    mounted: function () {
      this.$refs.myTagCloud.removeAt(1);
    }
  }
</script>

Updates an element with specified index.

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    },
    mounted: function () {
      this.$refs.myTagCloud.updateAt(1,{ countryName: "USA", technologyRating: 70, url: "community" });
    }
  }
</script>

Reveals a hidden element with specified index.

<template>
  <JqxTagCloud ref="myTagCloud"
    :source="source" :width="800" :displayMember="'countryName'" :valueMember="'technologyRating'"
  />
</template>
 
<script>
  import JqxTagCloud from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtagcloud.vue';
 
  export default {
    components: {
      JqxTagCloud
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source)
      }
    },
    beforeCreate: function () {
      let data = [
        { countryName: "Australia", technologyRating: 35, url: "community" },
        { countryName: "United States", technologyRating: 60, url: "community" },
        { countryName: "Germany", technologyRating: 55, url: "community" },
        { countryName: "Brasil", technologyRating: 20, url: "community" },
        { countryName: "United Kingdom", technologyRating: 50, url: "community" },
        { countryName: "Japan", technologyRating: 80, url: "community" }
      ];
      this.source = {
        localdata: data,
        datatype: "array",
        datafields: [
          { name: 'countryName' },
          { name: 'technologyRating' },
          { name: 'url' }
        ]
      };
    },
    mounted: function () {
      this.$refs.myTagCloud.showItem(1);
    }
  }
</script>