Stacked bar charts
Column bar chart with stacked bars
by anup1986
HTML
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<div id="chartWrapper">
<div id="chart"></div>
</div>
JavaScript
var data = [{
group: "Grupp1",
name: "Dåligt",
count: 3
}, {
group: "Grupp1",
name: "Bra",
count: 4
}, {
group: "Grupp2",
name: "Dåligt",
count: 1
}, {
group: "Grupp2",
name: "Bra",
count: 6
}, {
group: "Grupp3",
name: "Dåligt",
count: 5
}, {
group: "Grupp3",
name: "Bra",
count: 2
}];
$(document).ready(function () {
$("#chart").kendoChart({
title: {
text: "Organisationens läge"
},
legend: {
visible: false
},
dataSource: {
data: data,
group: {
field: "name",
dir: "desc"
}
},
series: [{
stack: true,
type: "column",
field: "count"
}],
// seriesColors: ["#73c8e9", "#24e124"],
valueAxis: {
labels: {
visible: true
},
line: {
visible: false
}
},
categoryAxis: {
field: "stack",
labels: {
template: "#= dataItem.group #",
visible: true
},
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= dataItem.group #, #= series.name #"
}
});
});