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>