Display Image in Chart CategoryAxis Label
| Product | Progress® Kendo UI® Chart for jQuery |
Description
How can I display an image in the categoryAxis label of the Chart?
Solution
- You may use the
labels.visualfunction of the Chart categoryAxis. In this function, you can create akendo.geometry.Rectinstance, and then usekendo.drawing.Imageto draw a bitmap image with a given source URL into the configured rectangle.
The following example demonstrates how to achieve the desired scenario:
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
field: "value",
type: "bar"
},
],
dataSource: [
{ year: "Diego", value: 1, img: 'https://demos.telerik.com/kendo-ui/content/dataviz/diagram/people/diego.jpg' },
{ year: "Elie", value: 3, img: 'https://demos.telerik.com/kendo-ui/content/dataviz/diagram/people/elizabeth.jpg' },
{ year: "Daniel", value: 4, img: 'https://demos.telerik.com/kendo-ui/content/dataviz/diagram/people/daniel.jpg' }
],
categoryAxis: {
field: "year",
labels: {
visual: function(e) {
var rect = new kendo.geometry.Rect(e.rect.origin, [e.rect.size.width, 100]);
var layout = new kendo.drawing.Layout(rect, {
orientation: "vertical",
alignContent: "center"
});
layout.append(new kendo.drawing.Text(e.dataItem.year));
var imageRect = new kendo.geometry.Rect(
new kendo.geometry.Point(5, 5),
new kendo.geometry.Size(50, 50)
);
// Create the image. Uses a URL to create a bitmap image.
var imageUrl = e.dataItem.img;
var image = new kendo.drawing.Image(imageUrl, imageRect);
layout.append(image)
layout.reflow();
return layout;
}
}
}
});
</script>