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.

score 6 · Answer 1 · answered Jun 02 '14 at 17:18

6

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/

answered Jun 02 '14 at 17:18

OnaBai

40,767
6
96
125

thanks for the answer. But can i have all the values aligned at the same line? They are at different levels as of now. – user2439903 Jun 03 '14 at 06:33
yes, not out of box, but can all the values be aligned at the top of the box in the same horizontal line? – user2439903 Jun 03 '14 at 07:59
I don't think so (I cannot see how). This is not HTML but SVG. The values are `text` nodes in the SVG but these are not the only `text` nodes. So something like `$("text").attr("y", "200")` will not only move the value but also the labels in the axis. So, I cannot see how to mark only these nodes to change only their position. – OnaBai Jun 03 '14 at 09:09
can there be any kind of overlay on kendo chart to display the label values? – user2439903 Jun 03 '14 at 13:17
Yes, you can set an overlay but how do you know what and where to correctly place the labels on that overlay. Not sure if this is a must for you, if it is wait and see if someone else answer you on how to do it but I would recommend you to go with what you have and save time going on a complex development. – OnaBai Jun 03 '14 at 14:02
just found this example: http://jsfiddle.net/An59E/7/ Can the top pane be used to display label? just a work around. I couldnt get this working in my code sample: http://jsfiddle.net/ZPUr4/181/ Can you help me with this? – user2439903 Jun 03 '14 at 14:53

Nic · Answer 2 · 2014-07-01T05:19:13.740

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);
    });
}

Kendo bar chart- series labels at the top?

2 Answers2