CODEWITHSUNDEEP
javascripthtmltelerikkendo-ui
Carl Rippon
Carl Rippon

Reputation: 4673

Category labels on a kendo UI bar chart

I'm trying to display category labels on the x-axis on a bar chart but can't work out how to do this. Here's the HTML and JS:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div id="chart"></div>
    <script src="js/thirdParty/jquery.js"></script>
    <script src="js/thirdParty/kendo.all.min.js"></script>
    <script>
        $(function () {
            $("#chart").kendoChart({
                legend: {
                    visible: false
                },
                seriesDefaults: {
                    type: "column"
                },
                series: [{
                    name: "Category A",
                    data: [5]
                }, {
                    name: "Category B",
                    data: [20]
                }, {
                    name: "Category C",
                    data: [10]
                }],
            })
        });
    </script>
</body>
</html>

The following screen shot highlights in a red box where I am trying to put the labels:

enter image description here

Any help would be appreciated.

Upvotes: 2

Views: 4258

Answers (2)

kashyapa
kashyapa

Reputation: 1626

In your case, you have provided 3 series. if you were intention was to create single series with three different X plot points, then the right way to do that is as below:

$("#chart2").kendoChart({
                legend: {
                    visible: true
                },
                seriesDefaults: {
                    type: "column"
                },
                series: [{
                    data: [5,10,20]
                }],
              categoryAxis: [{
        categories: ["Category A", "Category B","Category C"]
      }]

            });

What I have done is - I have said that Xaxis will have 3 plot points and the series contains a single array data with 3 y plot points.

here is the JSBin - http://jsbin.com/aroquki/1/edit

Hope this helps.

Upvotes: 4

object json
object json

Reputation: 615

You see, this example will solve your problem.

JSbin Code

Document kendo Chart

Upvotes: 2

Related Questions