Kendo Chart Custom Visual Image Example

This article is an example of creating a custom visual image in a Kendo Chart Component. The framework used is Kendo UI for jQuery. In this example, our requirement is to show an image when a chart hits a certain point. Say for example when the values hit below 30, it will show a life saver icon. Telling the user that the value needs to be looked into so to speak.

What we need to do is implement a function for the visual option. We call the createVisual() function to save us from computing where to put the label and icon. Looping through the visual.children and finding the Text nodeType will give us the bounding box (position) coordinates for our label and icon. When we have the coordinates, we utilise Kendo's drawing API to draw the label and icon and return it as a Group object.

Here is our solution. You can edit the code below using any text editor but I prefer Visual Studio Code. Make sure you are connected to the Internet because the code pulls the Kendo library from the Telerik CDN. Take note that this is just a demonstration code and you'll need to purchase a license if you are going to use Kendo UI for jQuery for more than just evaluation purposes.

Result:

Kendo Chart Custom Visual Image

There you have it. A quick and simple example of how to create custom visual image in Kendo Chart.