Kendo Chart Using Vue Wrappers Example

This article is an example of how to use the Kendo UI Wrappers for Vue particulary the Kendo Chart. The components in the Kendo UI Wrappers for Vue suite are wrappers of the Kendo UI for jQuery widgets. There is also a Kendo UI Native for Vue suite which has native components designed specially for the Vue framwork.

What prompted me to write this article is a StackOverflow question on how to use it. Perhaps he didn't understand the Kendo documentation so I'm writing this to supplement the Kendo documentation. To better understand this, I'll implement Donut Kendo Chart with 0% Example (which was done in Kendo UI for jQuery) using Kendo UI Wrappers for Vue. We should be able to compare the two implementations and grasp it better.

To begin with, include all the required Kendo styles, libraries, and the specific Kendo Vue package. See the head part of the HTML below. What was loaded? CSS files, jQuery, Kendo, Babel, Vue and the specific Kendo Chart wrapper for Vue.

Let's go to the body. We start off with a div with an id. Inside this div, we place the kendo-chart directive. To configure the chart, we can utilize the Kendo Chart for jQuery API configuration options as props but with a slight naming change. The :theme="'material'" is an example of setting the prop in an API-based options way. This equates to the theme configuration option in Kendo Chart for jQuery. Another option is called the Camel-Case wherein Camel case options in jQuery are converted to Kebab case (e.g. seriesDefaults to series-defaults). Next is the Composite options wherein widget configuration that accept object notation are translated into Kebab case (e.g. title.position to title-position). Now that we are happy with the configuration, it's time to instantiate the Vue app.

We instantiate our Vue app and attach it to the div named donutChart. The data option returns an object with a series field which is then bound to the prop :series="series".

Here is our code. You can edit the code below using any text editor but I prefer Visual Studio Code. Make sure you are connected to the Internet because the code pulls the Kendo library from the Telerik CDN. Take note that this is just a demonstration code and you'll need to purchase a license if you are going to use Kendo UI Wrappers for Vue or Kendo UI for jQuery for more than just evaluation purposes.

Output:

Kendo Chart Using Vue Wrappers

 

There you have it. A simple example of a Kendo Donut Chart implemented with Kendo UI Wrappers for Vue.