I'm trying to create a 100% stacked column chart that can scroll left and right with the mouse. Scrolling works properly with normal columns, but not with 100% stacked ones. Here's a sample that shows the problem:
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/bar-charts/pan-and-zoom">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.material.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.504/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.504/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.504/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.504/styles/kendo.mobile.all.min.css">
<script src="http://kendo.cdn.telerik.com/2016.2.504/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.504/js/jszip.min.js"></script>
</head>
<body>
<div id="example">
<div class="box wide">
<p>Use SHIFT + Mouse Drag Region Selection combination on mouse-enabled devices to zoom in data for a specific period of time</p>
</div>
<div class="demo-section k-content wide">
<div id="chart"></div>
</div>
<script>
// Sample data
var data = [];
for (var i = 0; i < 100; i++) {
var val = Math.round(Math.random() * 10);
data.push({
category: "Cfdsfsfds fsf dsf ds sf ds f" + i,
value: val
});
}
function createChart() {
$("#chart").kendoChart({
renderAs: "canvas",
dataSource: {
data: data
},
categoryAxis: {
min: 0,
max: 10,
labels: {
rotation: "90"
}
},
seriesDefaults:{
type: "column",
stack: {
type:"100%"
}
},
series: [{
field: "value",
categoryField: "category"
},{
field: "value",
categoryField: "category"
}],
valueAxis:{
min:0,
max:1
},
pannable: {
lock: "y"
}
});
}
$(document).ready(createChart);
$("#example").bind("kendo:skinChange", createChart);
</script>
</div>
</body>
</html>
1 Answer, 1 is accepted
Thank you for reporting this issue. I've logged it on GitHub for tracking purposes.
You can use the workaround suggested there for the time being. See the updated snippet.
Apologies for the caused inconvenience.
Regards,
T. Tsonev
Telerik