CODEWITHSUNDEEP
kendo-uikendo-datavizkendo-chart
user2439903
user2439903

Reputation: 1305

Kendo bar chart- series labels at the top?

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.

Upvotes: 4

Views: 11348

Answers (2)

Nic
Nic

Reputation: 12875

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

Upvotes: 0

OnaBai
OnaBai

Reputation: 40917

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/

Upvotes: 6

Related Questions