Kendo bar chart- series labels at the top?

Question

How to change the kendo bar chart- series labels positioning? Consider the following fiddle: http://jsfiddle.net/ZPUr4/149/

In the chart, for the positive values, the bar values are at the top and for negative values, the bar values are at the bottom.

How to position the series label values at the top of the bars for positive and negative values?

How to have all the label values in the same horizontal line, even though the bar values vary?

Let me know if my question is not clear.

Below is the HTML code:

    <div id="example" class="k-content">
    <div id="chart"></div>
</div>

JS code:

function createChart() {
        $("#chart").kendoChart({
            title: {
                text: "Site Visitors"
            },
            legend: {
                position: "bottom"
            },
            seriesDefaults: {
                type: "column",
                labels: {
                    visible: true,
                    background: "transparent",

                }
            },
            series: [{
                name: "Total Visits",
                data: series1,
                gap: 1.0,
                spacing: 0
            }, {
                name: "Unique visitors",
                data: series2,
                gap: 1.0
            }],
            valueAxis: {
                min: -200000,
                max: 200000,
                axisCrossingValue: 50000,  
                line: {
                    visible: false
                },
                title: {
                    text: "Availability"
                },

                color: 'blue'
            },
            categoryAxis: {
               color: "blue",
                width: 25,
                majorGridLines: {
                    visible: true,
                    position: "bottom"
                },
                line: {
                    width: 3,
                }
            },
            tooltip: {
                visible: true,
                format: "{0}"
            }
        });
    }

var series1=[56000, 63000, 74000, 91000, 117000, 158000];
var series2= [-52000, 34000, 23000, -98000, 67000, 83000];

    $(document).ready(function () {
        createChart();

        $("#example").bind("kendo:skinChange", createChart);

        var chart = $("#chart").data("kendoChart"),
            firstSeries = chart.options.series;
    });

Thanks.

Answer 1

In order to specify that values are on top, you should use:

labels: {
    visible: true,
    position: "top"
}

But with this, you have the number placed inside the bar. In order to move it outside, you need to do:

labels: {
    visible: true,
    position: "top",
    padding: {
        top: -20
    }
}

Adding padding.top places it 20pix up that should be enough.

Your JSFiddle modified here: http://jsfiddle.net/OnaBai/ZPUr4/178/