Edit this page

Bar Charts

The Kendo UI Bar Chart widget displays data via horizontal or vertical bars whose lengths vary according to their value. Bar Charts are suitable for displaying a comparison between several sets of data. For example, for showing a summary of unique and total site visitors over a certain period of time.

The Kendo UI Bullet Chart widget is a variation of a Kendo UI Bar Chart. You can use it as a replacement for dashboard gauges and meters. The bullet graph compares a given quantitative measure, such as temperature, against qualitative ranges, such as warm, hot, mild, cool, chilly, cold, etc., and a symbol marker that encodes the comparative measure, such as the max temperature a year ago.

The Kendo UI Range Bar Chart widget is yet another variation of the Kendo UI Bar Chart. It displays data as bars where each bar represents a value range that spans between its minimum and maximum levels. A Range Bar type has floating bars unlike the standard Kendo UI Bar Chart that has anchored bars to its x-axis.

Configuration

Column Chart

The Kendo UI Column Chart is the default chart rendered if a _type_ is not specified, as demonstrated below.

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

Figure 1: A sample Column Chart with categories

Column Chart with categories

Bar Chart

Setting the type property on the series object to "bar" renders horizontal bars, as demonstrated in the example below.

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

Figure 2: A sample Bar Chart

Bar Chart

See Also

Other articles on Kendo UI Charts and chart types:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy