Label template of Column chart

2 posts, 0 answers
  1. Vo
    Vo avatar
    1 posts
    Member since:
    Apr 2011

    Posted 11 Mar 2015 Link to this post

    My code:
    .Series(series => {
                series.Column(s => s.XXXXX)
                .Overlay(ChartBarSeriesOverlay.None)            
                .Labels(labels => labels                                     
                    .Background("transparent")
                    .Template("\n#= dataItem.XXXX#%\n#= dataItem.YYYY#")                
                    .Visible(true));           
            })

    I want to insert an image into label template. So, how to do it?
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 13 Mar 2015 Link to this post

    Hi Vo,

    This scenario is supported after Q1 2015 Beta (v2015.1.225) via the new labels.visual feature: 
    .Series(series => {
      series.Column(s => s.XXXXX)
          .Overlay(ChartBarSeriesOverlay.None)           
          .Labels(labels => labels                                    
             .Background("transparent")
             .Template("\n#= dataItem.XXXX#%\n#= dataItem.YYYY#")
             .Visual("labelsVisual")     
             .Visible(true));          
          })
    //....
     
    <script>
    function labelsVisual(e) {
       var src = kendo.format('/*...*/")',
         image = new kendo.drawing.Image(src, e.rect)
         center = e.rect.center(),
         text = new kendo.drawing.Text(e.text, [center.x, e.rect.origin.y]),
         group = new kendo.drawing.Group().append(image, text);
     
       return group;
    }
    </script>
    For another examples take a look at the following demos: 
    http://demos.telerik.com/kendo-ui/Beta/bar-charts/visuals
    http://demos.telerik.com/kendo-ui/Beta/line-charts/visuals

    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
Back to Top