The Chart widget uses modern browser technologies to render high-quality data visualizations. All graphics are rendered on the client using SVG with a fallback to VML for legacy browsers.

Kendo UI DataViz includes the following chart types:

Bar / Column
Line / Vertical Line
Area / Vertical Area
Pie
Scatter
Scatter Line

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

Creating a Chart

To create a chart, add an empty div in the HTML and give it an ID.

Example

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

Optionally, set the width and height of the desired chart inline or with CSS.

Example

<div id="chart" style="width: 400px; height: 600px"></div>

The chart is rendered by selecting the div with a jQuery selector and calling the kendoChart() function.

Example

$("#chart").kendoChart();

This will render the chart shown below: Empty Chart

The chart can then be given a title by specifying the "text" property of the "title" object in the Kendo Chart.

Example

$("#chart").kendoChart({
    title: {
         text: "Kendo Chart Example"
    }
});

Data Binding

The Charts can visualize series bound to both local and remote data.

Start by creating a series that displays inline data.

Example

$("#chart").kendoChart({
    title: {
         text: "Kendo Chart Example"
    },
    series: [
         { name: "Example Series", data: [200, 450, 300, 125] }
    ]
});

This will render a column chart by default. Column Chart without categories

You will notice that the columns have no label across the category axis. You specify the labeling for the series in the categoryAxis property.

Example

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

Next Steps

Explore the Chart demos for a quick overview of the major features. Detailed reference is available in the Configuration, Methods and Events tabs.