---
title: How to Create a Chart Using Kendo UI
description: Good presentation helps communicate data effectively and credibly. In this post, we'll learn how to use Kendo UI to generate a bar chart from a data set.
publish date: 2021-02-22
author: Dario Mora
image: https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2021-02-Kendo-UI-charts/blog_hero_kendo_ui.jpg?rev=0283988f40c54bf18c9f1f3ca32fe5e9
url: http://www.oshyn.com/blog/2021/02/how-to-create-a-chart-using-kendo-ui
---
# How to Create a Chart Using Kendo UI

![Data and charts on laptop screen](https://media2.oshyn.com/-/media/Oshyn/Insights/Blog/2021-02-Kendo-UI-charts/blog_hero_kendo_ui.jpg?rev=0283988f40c54bf18c9f1f3ca32fe5e9&hash=C210A7DE3081C0F3C03C8F3920BFCC1D)

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.