This is a migrated thread and some comments may be shown as answers.

Label template of Column chart

1 Answer 467 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Vo
Top achievements
Rank 1
Vo asked on 11 Mar 2015, 11:05 AM
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?

1 Answer, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 13 Mar 2015, 08:35 AM
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.

 
Tags
Chart
Asked by
Vo
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Share this question
or