The Chart widget uses modern browser technologies to render high-quality data visualizations in the browser. Rather than generating images on a server, Chart graphics are rendered in the browser using SVG (scalable vector graphics), with a fallback to VML (vector markup language) for older browsers.

Supported chart types:

• Bar
• Column
• Line
• Pie

Please visit the Kendo UI Road Map for additional information about new Chart types and features.

Getting Started

<div id="chart"></div>

   $(document).ready(function() {
       $("#chart").kendoChart({
           title: {
               text: "My Chart Title"
           },
           series: [
               {
                   name: "Series 1",
                   data: [200, 450, 300, 125]
               }
           ],
           categoryAxis: {
               categories: [2000, 2001, 2002, 2003]
           }
       });
   });

The basic configuration requires series data (Y-axis values) and categories (X-axis values). A chart title can also optionally be defined. The default chart type is column (vertical bars).

Binding to Data

A chart can be bound to both local and remote data. Rather than directly specifying an Array of values in the Chart configuration, the Chart DataSource property is used to bind to an Array or to a remote data service with the Kendo DataSource component.

var salesData = [{
    employee: "Joe Smith",
    sales: 2000
}, {
    employee: "Jane Smith",
    sales: 2250
}, {
    employee: "Will Roberts",
    sales: 1550
}]
$(document).ready(function() {
    $("#chart").kendoChart({
        title: {
            text: "Employee Sales"
        },
        dataSource:{
            data: salesData
        },
        series:[{
            type: "line",
            field: "sales",
            name: "Sales in Units"
        }],
        categoryAxis:{
            field: "employee"
        }
    });
});

$(document).ready(function(){
    $("#chart").kendoChart({
        title: {
            text: "Division Sales"
        },
        dataSource:{
            transport:{
                read:{
                    url: "company-sales.json",
                    dataType: "json"
                }
            },
            sort: {
                field: "year",
                dir: "asc"
            }
        },
        series: [{
            field: "americaSales",
            name: "North America"
        }, {
            field: "asiaSales",
            name: "Asia"
        }, {
            field: "europeSales",
            name: "Europe"
        }],
        categoryAxis:{
            field: "year"
        },
        valueAxis: {
            majorUnit: 1000
        }
    });
});

Configuring the Chart

The Kendo UI Chart is highly configurable. With simple configuration settings, you can format and display series labels, position the chart legend, format and display tooltips, and change the chart type.

Refer to the Chart demos and configuration API for a complete reference.