@progress/kendo-treemap-vue-wrapper/docs/data-binding.md

Kendo UI TreeMap wrapper for Vue.js

---
title: Data Binding
page_title: Data Binding - TreeMap - Kendo UI for Vue
description: "Bind the Kendo UI TreeMap wrapper for Vue to local data arrays."
slug: databinding_treemap
position: 1
---

<div><WrapperBanner></WrapperBanner></div>

# Data Binding

The TreeList provides support for binding it to local data arrays.

To populate the TreeMap with local data:
1. Define the local data array in the `data` object of the Vue application.
2. Refer it in the TreeMap initialization through the `:data-source` or `:data-source-ref` props.

{% meta height:450 %}
{% embed_file data-binding/main.vue preview %}
{% embed_file data-binding/main.js %}
{% endmeta %}

## Suggested Links

* [Kendo UI DataSource Component](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource)
* [Kendo UI TreeMap for jQuery](https://docs.telerik.com/kendo-ui/controls/charts/treemap/overview)
* [API Reference of TreeMap Widget](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/treemap)