Vue UI Components Documentation

Sets or gets the default color used when the colorMode property is set to "autoColors".

<template>
  <JqxTreeMap ref="myTreeMap"
    :source="source" :colorRange="50" :baseColor="'#C2EEAA'"
  />
</template>
 
<script>
  import JqxTreeMap from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreemap.vue';
 
  export default {
    components: {
      JqxTreeMap
    },
    data: function () {
      return  {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
      }
    }
  }
</script>

Sets or gets the color ranges used when the colorMode property is set to "rangeColors"

<template>
  <JqxTreeMap ref="myTreeMap"
    :source="source" :colorRange="50" :colorRanges="colorRanges" :colorMode="'rangeColors'"
  />
</template>
 
<script>
  import JqxTreeMap from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreemap.vue';
 
  export default {
    components: {
      JqxTreeMap
    },
    data: function () {
      return  {
        colorRanges: [
          { color: '#52CBFF', min: 0, max: 85 },
          { color: '#52CBAA', min: 86, max: 105 }
        ],
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
      }
    }
  }
</script>

Sets or gets the range in which the base colors can vary. The value is expected to be from 0 to 255.

<template>
  <JqxTreeMap ref="myTreeMap"
    :source="source" :colorRange="100"
  />
</template>
 
<script>
  import JqxTreeMap from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreemap.vue';
 
  export default {
    components: {
      JqxTreeMap
    },
    data: function () {
      return  {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
      }
    }
  }
</script>

Sets or gets the sectors rendering behavior.

• parent - a child sector inherits the color from its parent sector. Depending on the child value and the colorRange property the color varies.
• autoColors - automatic color generation based on the baseColor/colorRange and the value.
• rangeColors - the user can sets array of color ranges. Each color range has the properties min, max and color.

<template>
  <JqxTreeMap ref="myTreeMap"
    :source="source" :colorRange="50" :colorMode="'autoColors'"
  />
</template>
 
<script>
  import JqxTreeMap from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreemap.vue';
 
  export default {
    components: {
      JqxTreeMap
    },
    data: function () {
      return  {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
      }
    }
  }
</script>

Sets or gets the displayMember property. The displayMember determines the name of an object property to display. The name is contained in the collection specified by the source property and the name is stored in the label field of each sector. The property is taken into account when the jqxTreeMap's source property points to jqxDataAdapter instance.

<template>
  <JqxTreeMap ref="myTreeMap"
    :source="source" :colorRange="50" :displayMember="'label'"
  />
</template>
 
<script>
  import JqxTreeMap from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreemap.vue';
 
  export default {
    components: {
      JqxTreeMap
    },
    data: function () {
      return  {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
      }
    }
  }
</script>

Sets or gets the jqxTreeMap's height.

<template>
  <JqxTreeMap ref="myTreeMap"
    :source="source" :colorRange="50" :height="500"
  />
</template>
 
<script>
  import JqxTreeMap from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreemap.vue';
 
  export default {
    components: {
      JqxTreeMap
    },
    data: function () {
      return  {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
      }
    }
  }
</script>

Sets or gets whether a sector will be outlined when the mouse cursor is over it.

<template>
  <JqxTreeMap ref="myTreeMap"
    :source="source" :colorRange="50" :hoverEnabled="true"
  />
</template>
 
<script>
  import JqxTreeMap from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreemap.vue';
 
  export default {
    components: {
      JqxTreeMap
    },
    data: function () {
      return  {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
      }
    }
  }
</script>

Sets or gets the height of the parent sector's header.

<template>
  <JqxTreeMap ref="myTreeMap"
    :source="source" :colorRange="50" :headerHeight="30" />
</template>
 
<script>
  import JqxTreeMap from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreemap.vue';
 
  export default {
    components: {
      JqxTreeMap
    },
    data: function () {
      return {
        source: [
          { label: 'East', value: null },
          { label: 'West', value: null },
          { label: 'USA', value: 104, parent: 'West' },
          { label: 'Republic of China', value: 88, parent: 'East' },
          { label: 'Great Britain', value: 65, parent: 'West' },
          { label: 'Russian Federation', value: 82, parent: 'East' }
        ]
      }
    }
  }
</script>

Sets or gets the Legend's label.

<template>
  <JqxTreeMap ref="myTreeMap"
    :source="source" :colorRange="50" :legendLabel="'Olympic medal count - London 2012'"
    :colorMode="'autoColors'"
  />
</template>
 
<script>
  import JqxTreeMap from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreemap.vue';
 
  export default {
    components: {
      JqxTreeMap
    },
    data: function () {
      return  {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
      }
    }
  }
</script>

Sets or gets the Legend's position. The x determines the X offset of the Legend from the left side of the jqxTreeMap. The y determines the Y offset of the Legend from the bottom side of jqxTreeMap.

<template>
  <JqxTreeMap ref="myTreeMap"
    :source="source" :colorRange="50" :legendPosition='{x: 20, y: 0}' :colorMode="'autoColors'"
  />
</template>
 
<script>
  import JqxTreeMap from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreemap.vue';
 
  export default {
    components: {
      JqxTreeMap
    },
    data: function () {
      return  {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
      }
    }
  }
</script>

Sets or gets a callback function which formats the values displayed in the jqxTreeMap's Legend.

<template>
  <JqxTreeMap ref="myTreeMap"
    :source="source" :colorRange="50" :colorMode="'autoColors'" :legendScaleCallback="legendScaleCallback"
  />
</template>
 
<script>
  import JqxTreeMap from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreemap.vue';
 
  export default {
    components: {
      JqxTreeMap
    },
    data: function () {
      return  {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
      }
    },
    methods: {
      legendScaleCallback: function (v) {
        v = v.toFixed(1);
        return v;
      }
    }
  }
</script>

Sets or gets callback function(s) which enable you to customize the rendering of any sector in the jqxTreeMap. To define a callback function for all sectors, use the "*" : function(sectorHtmlElement, sectorData) syntax. To define a callback function for a specific element, use its label value instead of "*".

<template>
  <JqxTreeMap ref="myTreeMap"
    :source="source" :colorRange="50" :renderCallbacks="renderCallbacks"
  />
</template>
 
<script>
  import JqxTreeMap from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreemap.vue';
 
  export default {
    components: {
      JqxTreeMap
    },
    data: function () {
      return  {
        renderCallbacks: {
            '*': function (element, data) {
                element.css({
                    color: '#ffffff'
                });
                element.html('<span style="font-size: 11px;" class="jqx-treemap-label">' + data.label + ', ' + data.value + '</span>');
                return true;
            }
        },
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
      }
    }
  }
</script>

Sets or gets whether a sector will be outlined when it is clicked..

<template>
  <JqxTreeMap ref="myTreeMap"
    :source="source" :colorRange="50" :selectionEnabled="false"
  />
</template>
 
<script>
  import JqxTreeMap from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreemap.vue';
 
  export default {
    components: {
      JqxTreeMap
    },
    data: function () {
      return  {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
      }
    }
  }
</script>

Determines whether the jqxTreeMap's Legend is displayed. Legend is possible to be displayed when the colorMode property is set to "autoColors" or "rangeColors".

<template>
  <JqxTreeMap ref="myTreeMap"
    :source="source" :colorRange="50" :showLegend="false" :colorMode="'autoColors'"
  />
</template>
 
<script>
  import JqxTreeMap from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreemap.vue';
 
  export default {
    components: {
      JqxTreeMap
    },
    data: function () {
      return  {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
      }
    }
  }
</script>

Specifies the jqxTreeMap's data source. Use this property to populate the jqxTreeMap.

<template>
  <JqxTreeMap ref="myTreeMap"
    :source="source" :colorRange="50"
  />
</template>
 
<script>
  import JqxTreeMap from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreemap.vue';
 
  export default {
    components: {
      JqxTreeMap
    },
    data: function () {
      return  {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
      }
    }
  }
</script>

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />
  
  

• Set the widget's theme property to 'material' when you initialize it.

<template>
  <JqxTreeMap ref="myTreeMap"
    :source="source" :colorRange="50" :theme="'material'"
  />
</template>
 
<script>
  import JqxTreeMap from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreemap.vue';
 
  export default {
    components: {
      JqxTreeMap
    },
    data: function () {
      return  {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
      }
    }
  }
</script>

Sets or gets the valueMember property. The valueMember determines the name of an object property to set as a value of the treemap sectors. The name is contained in the collection specified by the source property. The property is taken into account when the jqxTreeMap's source property points to jqxDataAdapter instance.

<template>
  <JqxTreeMap ref="myTreeMap"
    :source="source" :colorRange="50" :valueMember="'value'"
  />
</template>
 
<script>
  import JqxTreeMap from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreemap.vue';
 
  export default {
    components: {
      JqxTreeMap
    },
    data: function () {
      return  {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
      }
    }
  }
</script>

Sets or gets the jqxTreeMap's width.

<template>
  <JqxTreeMap ref="myTreeMap"
    :source="source" :colorRange="50" :width="500"
  />
</template>
 
<script>
  import JqxTreeMap from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreemap.vue';
 
  export default {
    components: {
      JqxTreeMap
    },
    data: function () {
      return  {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
      }
    }
  }
</script>

This event is triggered when the jqxTreeMap's source property is set to point to jqxDataAdapter instance and the jqxDataAdapter's binding is finished.

Code examples

Bind to the bindingComplete event of jqxTreeMap.

<template>
  <JqxTreeMap ref="myTreeMap" @bindingComplete="onBindingComplete($event)"
        :colorRange="50" />
</template>
<script>
  import JqxTreeMap from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreemap.vue';
  export default {
    components: {
      JqxTreeMap
    },
    data: function () {
      return {
        source: [{ label: 'USA', value: 104 },
        { label: 'Republic of China', value: 88 },
        { label: 'Great Britain', value: 65 },
        { label: 'Russian Federation', value: 82 }]
      }
    },
    mounted: function () {
      this.$refs.myTreeMap.source = this.source;
    },
    methods: {
      onBindingComplete: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Destroy the jqxTreeMap widget. The destroy method removes the jqxTreeMap widget from the web page.

<template>
  <JqxTreeMap ref="myTreeMap"
    :source="source" :colorRange="50"
  />
</template>
 
<script>
  import JqxTreeMap from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreemap.vue';
 
  export default {
    components: {
      JqxTreeMap
    },
    data: function () {
      return  {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
      }
    },
    mounted: function () {
      this.$refs.myTreeMap.destroy();
    }
  }
</script>

Renders the jqxTreeMap widget.

<template>
  <JqxTreeMap ref="myTreeMap"
    :source="source" :colorRange="50"
  />
</template>
 
<script>
  import JqxTreeMap from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreemap.vue';
 
  export default {
    components: {
      JqxTreeMap
    },
    data: function () {
      return  {
        source: [{ label: 'USA', value: 104 },
            { label: 'Republic of China', value: 88 },
            { label: 'Great Britain', value: 65 },
            { label: 'Russian Federation', value: 82 }]
      }
    },
    mounted: function () {
      this.$refs.myTreeMap.render();
    }
  }
</script>