Hi,
I am building a stacked bar chart with three series. I am fetching the data from a remote service and binding to the chart. But the problem is that my chart does not show all three series. it shows only two series. But if i remove the stack:true property, it shows all three series in the normal column chart. Could any body help if I am missing anything to show all the series. Below is my code.
function createChart() {
$("#chart").kendoChart({
dataSource: {
transport: {
read: {
url: "http://localhost:8080/rest/service/summary",
dataType: "json"
}
},
},
title: {
text: "Summary"
},
legend: {
visible: false
},
seriesDefaults: {
type: "column",
/stack: true
},
series: [{
field:"A",
name: "A",
color: "#3CB371"
}, {
field:"B",
name: "B",
color: "#FFA500"
},{
name: "C",
field:"C",
color: "#FF0000"
}],
valueAxis: {
line: {
visible: true
},
minorGridLines: {
visible: true
}
},
categoryAxis: {
field:"boothId",
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
I am building a stacked bar chart with three series. I am fetching the data from a remote service and binding to the chart. But the problem is that my chart does not show all three series. it shows only two series. But if i remove the stack:true property, it shows all three series in the normal column chart. Could any body help if I am missing anything to show all the series. Below is my code.
function createChart() {
$("#chart").kendoChart({
dataSource: {
transport: {
read: {
url: "http://localhost:8080/rest/service/summary",
dataType: "json"
}
},
},
title: {
text: "Summary"
},
legend: {
visible: false
},
seriesDefaults: {
type: "column",
/stack: true
},
series: [{
field:"A",
name: "A",
color: "#3CB371"
}, {
field:"B",
name: "B",
color: "#FFA500"
},{
name: "C",
field:"C",
color: "#FF0000"
}],
valueAxis: {
line: {
visible: true
},
minorGridLines: {
visible: true
}
},
categoryAxis: {
field:"boothId",
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);