The code below displays two bars in a stacked bar chart using a pane. My problem is that only part of the chart is shown, you can see that the x-axis starts at 94%. So it looks like the value 50(bar 1) is smaller than 2(bar 2). Why is only part of the chart shown and how can I fix this?
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
visible: false
},
seriesDefaults: {
type: "bar",
stack: {
type: "100%"
},
labels: {
visible : true,
position: "insideBase"
}
},
panes:[{
name: "pane1"
}],
series: [{
data: [50],
axis: "axis1",
categoryAxis: "catAxis1"
},
{
data: [2],
axis: "axis1",
categoryAxis: "catAxis1"
}],
valueAxis: [{
name: "axis1",
pane: "pane1"
}],
categoryAxis: [{
name: "catAxis1",
pane: "pane1"
}]
});
</script>
Just add a min value of 0 to the valueAxis:
valueAxis: [{
min: 0,
name: "axis1",
pane: "pane1"
}],