O'Reilly logo

Kendo UI Cookbook by Sagar Ganatra

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating charts using kendoChart

The Kendo data visualization library provides several charting widgets that can be built with ease. In this recipe, we will first build a column chart and then customize its look and feel. A column chart displays vertical bars, visually representing the provided data.

Getting started

The kendo.all.min.js file contains all the components, that is, Web, Mobile, and DataViz widgets. However, if you're building only data visualization components, then include the kendo.dataviz.min.js file.

How to do it…

To create a chart, let's add a container to the page, specifying the dimension of the chart area, as shown in the following line of code:

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

Notice that the chart has a width ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required