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/

Answer 2

A bit late, but perhaps still useful for you or someone else.

I'm doing quite a bit of custom styling to my grids, and the following allows me to place the labels on top of the chart on the same line.

function chartBound(e) {
    var chartData = e.sender;
    var oldPrivateRedraw = chartData._redraw;
    if (oldPrivateRedraw.toString().indexOf('Extend') == -1) { //not already extended
        //Extends kendos function so we can do custom styling to svg components etc
        chartData._redraw = function () {
            oldPrivateRedraw.apply(chartData);
            PostGraphDrawEvents();
        };
    }
}
function PostGraphDrawEvents() {
    // Move the labels to the top of the graph
    $.each($('#@chartId svg > g > text[style*="11px"]'), function (index, node) {
        var clonedNode = node.cloneNode(true);
        $(clonedNode).attr('y', 10);
        $(node).before(clonedNode);
    });
}

Answer 3

Heading ------- will be displayed in a monospaced font. The first four spaces will be stripped off, but all other whitespace will be preserved.

Markdown and HTML are turned off in code blocks:
<i>This is not italic</i>, and [this is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

The $ character is just a shortcut for window.jQuery. If you want to have a preformatted block within a list, indent by eight spaces:

1. This is normal text.

2. So is this, but now follows a code block:

   Skip a line and indent eight spaces.
   That's four spaces for the list
   and four to trigger the code block.