This is a migrated thread and some comments may be shown as answers.

Stacked Column Chart - Bars Exceed Max Axis

10 Answers 958 Views

Charts

This is a migrated thread and some comments may be shown as answers.

Greg asked on 19 Apr 2012, 02:54 AM

2012-04-18-18-46-00.png

Hey All,

I have been working with the column charts, and finally figured out how to stack the bars in the chart with the help of this article.
http://www.kendoui.com/forums/dataviz/chart/stack-multiple-series.aspx

There's a problem though. The largest value bars are going 'over the top' of the chart (they are exceeding the max y-axis value).
The funny thing is that it seems like the value has to be an ODD number to get it to go over the top axis.

Below is all the code to replicate. Attached is a screenshot of what I am seeing.

Is this a bug? Am I doing something wrong?

This happens with both default and black Kendo Skins.
Tested on Chrome 18.0.1025.162, Firefox 8.0.1, and IE9.
I am using Kendo UI Complete v2012.1.322

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/file/Kendo/kendo.common.min.css"/>
<link rel="stylesheet" href="/file/Kendo/kendo.black.min.css"/>
</head>
<body>
<script type="text/javascript" src="/file/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/file/Kendo/kendo.all.min.js"></script>
<script type="text/javascript">
var data = [{"Period":"1-3","Comp1":1,"Comp2":2,"Comp3":4,"Comp4":0},{"Period":"3-5","Comp1":2,"Comp2":5,"Comp3":0,"Comp4":2},{"Period":"5-7","Comp1":3,"Comp2":1,"Comp3":4,"Comp4":2},{"Period":"7-9","Comp1":2,"Comp2":3,"Comp3":5,"Comp4":1},{"Period":"9+","Comp1":3,"Comp2":1,"Comp3":2,"Comp4":2}];

function createCharts () {
$("#chartIVPayers").kendoChart({
theme: $(document).data("kendoSkin") || "black",
title: {
text: "Comps"
},
dataSource: data,
series: [{
type: "column",
field: "Comp1",
name: "Comp1",
stack: "Comp2,Comp3,Comp4"
},{
type: "column",
field: "Comp2",
name: "Comp2"
},{
type: "column",
field: "Comp3",
name: "Comp3"
},{
type: "column",
field: "Comp4",
name: "Comp4"
}],
categoryAxis: {
field: "Period"
}
});
}

setTimeout(function() {
createCharts();
},
400);

</script>
<div id="chartIVPayers"></div>
</body>
</html>

10 Answers, 1 is accepted

answered on 15 May 2012, 05:37 PM

Hi Iliana,

What exactly is it that was wrong with the chart definition? The example you pointed me to has the data hardcoded, and I need to drive the data from a DataSource or a JSON string. Can you provide some insight into how to correctly format the chart and/or data so that the chart will render correctly??

Does the JSON have to have a "data" sub-object? If that is the cause of this, its going to take a lot of work to format the data properly on the back end. Just seems a bit strange that you would be forced to set it up that way. All of the other charts seems to support a simple JSON data object.

Thanks
Greg

Accepted

answered on 17 May 2012, 06:16 AM

stackBarChartUpdated.zip

Hi Greg,

By design, there are two approaches that could be applied in order to stack the bars in your Kendo UI Chart:

Set stack: true property to the SeriesDefaults:

$("#chart").kendoChart({

  seriesDefaults: {

    type: "column",

    stack: true

  },

  ...

});

For convenience I created a jsFiddle example, which illustrates such approach in action. Also, I updated the code snippet you provided - see the attachments.

Stack with group name for each of the series - this approach is illustrated in the online demo I suggested in my previous post.

Regarding your JSON-related question - the stack of the bars does not depend on the type of data binding you use - both local and remote are supported. Please take a closer look at the example I provided - it illustrates stacked bar chart bound to remote data.

I hope this information helps.

Regards,
Iliana Nikolova
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!