Search code examples
kendo-uikendo-dataviz

Only part of chart shown when using panes and stacked bars


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>

Solution

  • Just add a min value of 0 to the valueAxis:

    valueAxis: [{
        min: 0,
        name: "axis1", 
        pane: "pane1"
    }],
    

    DEMO