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}%"
                }
            }]
        }
    }
})

Functionality and Features

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