Add icons on chart surface

[Robert]

How would I add icons in a horizontal row on a linear chart?  As I figure it, I would need to do two things:

1. First, I would need to "extend" the chart's vertical "majorGridLines" so that there was room to add a row of icons/images without overlapping the data.
2. Second, I would need a method to add an image for each x-axis point and be able to specify the y-location (position) at which it was drawn.  Ideally, the the image's file name would come from the data set.

Is this what chart annotations are intended to handle?  I have not been able to find any information on annotations, other than they were introduced in 2013 Q2.

I have attached an image of what I am describing. 

Thank you for your assistance.

[Alexander Popov]

Hi Robert,

I am afraid that this behavior is not supported out of the box, however you can achieve similar results by positioning floating div elements over the Chart's surface. The chart annotation (notes) currently support only text, as seen in this demo. Adding images is on the way and will be included in further releases, although I cannot provide you an exact date at this point. 

Regards,
Alexander Popov
Telerik

[Robert]

Thanks.  Two follow-up questions:

First, you said "... you can achieve similar results by positioning floating div elements over the Chart's surface."

Is there a way to identify the horizontal coordinate of major gridlines or series values; and to identify the vertical coordinate of data values?

Second, can you address the question of extending the chart surface (and major grid lines) vertically without expanding the chart itself (to leave more "headroom" on the top of the chart, but still below the series name).

Thanks again.

 - Robert

[Alexander Popov]

Hello again,

Extending the chart surface is also not supported out of the box, however it could be done in the following manner:

• Let's say you are expecting values between 0 and 10
• Set the valueAxis' max to 30 and use a label template that does not show any label if the value is bigger than 10
• You can get the points' coordinates by using the Charts _plotArea internal method

Here is a small example of the above - I hope it helps.

Regards,
Alexander Popov
Telerik

[Kiran]

We have same kind of requirement for our project to add custom image at particular dates, along with providing plotBands color with from and to date range.

We are using Kendo Stock Chart. Refer below image for the output we are trying to achieve. 

1. Issue with plotBands - It is not considering date range, instead it is considering number value. How to achieve plot band color with date range?

2. How to add custom icon for few dates. 

 

Let me know how best we use kendo properties to do so. I can see this post is open since 2013, it there any other version update which can handle injecting image?

[Kiran]

Prototype attached.

[Alexander Popov]

Hello Kiran,

I am afraid that this scenario is unsupported and implementing it would require a custom solution that is beyond the scope of our support services. The icon's position could be determined after the Chart is fully drawn, so I would recommend using the Chart's DataBound event as shown in this example.

Regards,
Alexander Popov
Telerik

 

 

[andywalkers]

Hi,

Do you have any updates on adding custom icons on kendo chart?
We have a requirement similar to what Robert has asked for.

Thanks in advance.

[Iliana Dyankova]

Hi Andy,

Adding custom icons to Kendo UI Chart is still not supported out-of-the-box - as a workaround you can use the approach suggested by my colleague Alexander.

Regards,
Iliana Nikolova
Telerik