Kendo Bar chart data labels cropped

Demonstrates problem with missing topmost grid line

by nayanakalkur

HTML

<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css">
<div class="scrollingDiv">
    <div id="chart1">
    </div>
</div>
<div class="scrollingDiv">
<div id="chart2">
</div>
</div>

CSS

.scrollingDiv {
    overflow-x:auto;
        width: 500px
}

JavaScript

var series1= [70, -60, 40];
var series2= [-50, 40, 20];
var series3= [60, 60];
var series4= [60, 20];

$("#chart1").kendoChart({
  seriesDefaults: 
        {
      type: "column",
      stack: true,
      width:2,
      gap: 50,
  },
    series: 
    [
        
        {
            data: series1,   
            color: "#00CC00",
            negativeColor: "#CC0000",
            
        },                 
        {    
            data: series2, 
            color: "#CCCCCC"    
        }
    ],
    plotArea: 
    {
        border: 
        {
            color: "#CCCCCC",
            width: 1
        }
    },
    chartArea:
    {
        border: 
        {
            color: "#CCCCCC",
            width: 1
        },
         height: (screen.height * 0.30), 
        width: (screen.width * 0.75) 
    },
    categoryAxis: 
    {
            pane: "top-pane",
            color: "#0099FF",
            majorGridLines:
            {
                visible: true,
                
            },
            line: 
            {
                width: 3,
            },
            plotBands: 
            [
                {from: 0, to:1, color: "#CCCCCC"},
            ],
                },
                seriesDefaults: 
        {
         type: "column",
            labels: 
            {    
                visible: true,
                color: "green"
            },
            
        }, 
    valueAxis:
                { 
            
            title:
            { 
                text: "A"  
            },  
            majorGridLines: 
            { 
                visible: false 
            },
            labels: 
            {    
                visible: false,      
            },
            line:
            {
                visible: false
            }
        },
    tooltip: {
            visible: true,
            /*format: "{0}"*/
                template: "Results:#=value#<br/>Target:#=value#<br/>"
        }
});
               ...