Chart Overview

The Kendo UI Chart uses modern browser technologies to render high-quality data visualizations.

All graphics are rendered on the client by using Scalable Vector Graphics (SVG) with a fallback to Canvas. The Charts support a set of series types such as Bar, Line, Area, Bullet, Pie, Scatter, Bubble, Polar, and other.

The Chart contains the following building block elements:

  • Title
  • Legend
  • Chart Area
  • Plot Area
  • Axes
  • Series

The following image displays the structure of the Chart.

Chart Structure

Basic Configuration

To create a Chart, add an empty div to the HTML, provide it with an ID, and , optionally, set the width and height of the desired Chart inline or with CSS.

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

To render the Chart, select the div with a jQuery selector and call the kendoChart() function.

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

The previous example results in the following output.

An empty Chart

You can add a title to the Chart by specifying the text property of the title object.

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

The Chart can also visualize series that are bound to both local and remote data. The following example demonstrates how to bind the Chart to local data.

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

The previous example results in the following output.

A chart without categories

To add labels across the category axis of the Chart columns, specify the labeling for the series in the categoryAxis property.

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

The previous example results in the following output.

A chart with categories

Functionality and Features

See Also

In this article
Not finding the help you need? Improve this article