All Components

Chart Overview

The Chart renders a wide range of high-quality data visualizations.

The Chart wrapper for Vue is a client-side wrapper for the Kendo UI Chart widget.

Basic Usage

The following example demonstrates the Chart in action.

<div id="vueapp" class="vue-app">
    <kendo-chart :title-text="'Kendo Chart Example'"
                 :legend-position="'bottom'"
                 :series="series"
                 :category-axis-categories="categories"
                 :value-axis="axis"
                 :theme="'sass'">
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            series: [{
                name: 'Temperature',
                data: [20, 25, 32],
                axis: "temperature"
            },
            {
                name: 'Humidity',
                data: [40, 50, 80],
                axis: "humidity"
            }],
            categories: ["Aug", "Sep", "Oct"],
            axis: [{
                name: "temperature",
                labels: {
                    format: "{0}C"
                }
            },
            {
                name: "humidity",
                labels: {
                    format: "{0}%"
                }
            }]
        }
    }
})

Features and Functionalities

The Chart enables you to bind it to local data arrays or remote data services.

Events

The following example demonstrates basic Chart events. You can subscribe to all Chart events by the handler name.

<div id="vueapp" class="vue-app">
    <kendo-chart :title-text="'Kendo Chart Example'"
                 :legend-position="'bottom'"
                 :series="series"
                 :category-axis-categories="categories"
                 :value-axis="axis"
                 :theme="'sass'"
                 @axis-label-click="onAxisLabelClick">
    </kendo-chart>
</div>
Vue.use(ChartInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            series: [{
                name: 'Temperature',
                data: [20, 25, 32],
                axis: "temperature"
            },
            {
                name: 'Humidity',
                data: [40, 50, 80],
                axis: "humidity"
            }],
            categories: ["Aug", "Sep", "Oct"],
            axis: [{
                name: "temperature",
                labels: {
                    format: "{0}C"
                }
            },
            {
                name: "humidity",
                labels: {
                    format: "{0}%"
                }
            }]
        }
    },
    methods: {
        onAxisLabelClick: function(e) {
            console.log("Event :: axisLabelClick");
        }
    }
})
In this article