How can i show labels top of the columns kendo bar chart?

5 posts, 2 answers
  1. Gokhan
    Gokhan avatar
    15 posts
    Member since:
    Jan 2014

    Posted 22 Jul 2014 Link to this post

    i'm trying to show value labels at top of the my chart's columns. I use Kendo UI.I find this example but i havent done it.

    It's example:
    http://jsfiddle.net/8YnKv/31/


    How can i show 100 and 20 values like in the example chart?

    I have tried this code but i failed.

     .Labels(labels => labels
    .Visible(true).Format("C").Position(ChartBarLabelsPosition.OutsideEnd)
    )


    Here is my chart code. What can i do?
    How can i add this functionality?
    Thanks for your help. 


    @(Html.Kendo().Chart(Model.TarihVM)
    .Name("chart")
    .Title(title => title
    .Text("my chart title")
    .Position(ChartTitlePosition.Top))
    .Legend(legend => legend
    .Visible(true)
    .Position(ChartLegendPosition.Top))
    .Series(series =>
    {
    series
    .Column(model => model.deneme, categoryExpression: model => model.EvrakTarih).Name("deneme")
    .Aggregate(ChartSeriesAggregate.Count);
    series
    .Column(model => model.digerdeneme, categoryExpression: model => model.EvrakTarih).Name("digerdeneme")
    .Aggregate(ChartSeriesAggregate.Count);

    series
    .Column(model => model.deneme2, categoryExpression: model => model.EvrakTarih).Name("deneme2")
    .Aggregate(ChartSeriesAggregate.Count);

    })
    .CategoryAxis(axis => axis
    .Date()
    .BaseUnit(ChartAxisBaseUnit.Months)


    .MajorGridLines(lines => lines.Visible(true))
    )
    .Theme("metro")
    .Tooltip(tooltip => tooltip
    .Visible(true)
    .Template("#= series.name #: #= value #"))
  2. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 22 Jul 2014 Link to this post

    Hi Gokhan,

    By design the labels in Kendo UI Chart are part of the series / seriesDefaults and must be added in the series / seriesDefaults configuration. Please try the following and let me know if it helps: 
    //....
    .Series(series =>
    {
    series
    .Column(model => model.deneme, categoryExpression: model => model.EvrakTarih)
       .Name("deneme")
       .Aggregate(ChartSeriesAggregate.Count)
       .Labels(labels => labels.Visible(true).Format("C").Position(ChartBarLabelsPosition.OutsideEnd)
    );

    Regards,
    Iliana Nikolova
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Gokhan
    Gokhan avatar
    15 posts
    Member since:
    Jan 2014

    Posted 23 Jul 2014 in reply to Iliana Nikolova Link to this post

    Hi Iliana,

    Thank you very much for your help. It works like a charm. But i have another problem.

    I dont want to show zero(0) values on my chart. I find this link:

    http://www.telerik.com/forums/is-it-possible-to-conditionally-display-the-series-label-

    but i failed with javascript code. I dont want 0 values on my chart. How  can i disable them? 

    What's the trick with this code? Thanks again.

    <script>function onDB(e) {  e.sender.options.series[0].labels.visible = function (point) {     if (point.value < 0) {        return false     }     else { return point.value}  }}</script>





  5. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 23 Jul 2014 Link to this post

    Hi Gokhan,

    The provided code snippet in the forum thread will hide the 0 values only in the first series. From the provided picture it appears there are 3 series and the 0 value is in the third one. Hence in order to achieve the desired outcome you should execute the same logic for all series. As an example: 
    function hideLabels(point){
     if (point.value < 0) {
       return false
     }
     else {
       return point.value
     }       
    }
             
    function onDB(e) {
       var series =  e.sender.options.series;
       for(i=0;i<series.length;i++){
          series[i].labels.visible = hideLabels
       }
    }

    Regards,
    Iliana Nikolova
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Gokhan
    Gokhan avatar
    15 posts
    Member since:
    Jan 2014

    Posted 24 Jul 2014 in reply to Iliana Nikolova Link to this post

    Thank you Iliana. it looks good. & works great.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready