How to Create a Chart Using Kendo UI

Data presentation is important for effectively communicating information and making it credible. One attractive way to present data on your web page is to use charts. In this post we are going to learn how to use Kendo UI to generate a bar chart from a data set.

Requirements.

The jQuery and Kendo UI libraries need to be included on our website:

<script src="https://code.jquery.com/jquery-3.5.1.min.js">
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js">

Implementation.

In the HTML we need an element where the chart will be created:

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

Using JavaScript we need to define:

• a data set
• the chart options
• the initialization of the chart

The data set to generate our chart is the following:

var ChartData =
          {
            Year: "2019",
            Net: [-19, -4.42, 1.08, 3.89, 7.75, 8.75, 10.2],
            Benchmark: [-20.15, -4.73, 0.85, 3.15, 6.30, 7.15, 8.7]
          };

The basic options that we are going to use to create the chart in this example are:

var ChartOptions = {
    title: {
            text: ""
        },
    legend: {
        position: "bottom",
        visible: true,
    },
    chartArea: {
        background: '#ffffff''
        height: 500,
    },
    seriesDefaults: {
        type: "column",
    },
    series: [
    {
        name: "Total Fund",
        data: ChartData.Net,
        color: "#05347A",
        zIndex: 2,
    }, {
        name: "Benchmark",
        data: ChartData.Benchmark,
        color: "#FF9D52",
        zIndex: 1,
    }],
    valueAxis: {
        labels: {
          format: "{0}%",
        },
        majorUnit: 5, 
        axisCrossingValue: [0, -60]
    },
    categoryAxis: [
        {
        },
        {
          categories: ["1 Year", "3 Year", "5 Year", "10 Year", "20 Year", "25 Year", "30 Year"],      
        }
    ],
};

In this object we have defined; legend position, background color, chart height, chart type, series names, series color, category names.

For more information about the chart options see the Kendo UI documentation.

Kendo initialization:

$(document).ready(function(){ 
     $("#chart").kendoChart(ChartOptions);
});

Conclusion.

This tutorial is a brief introduction to the basic use of Kendo UI to generate charts. It also provides an example of the most used configuration options. These options can be applied to other types of charts, not just bar charts.

You can demo the code here.