How to create tooltip template conditionally using kendo stacked column chart using angular js

[developer]

Hi..

I created kendo stacked column chart in my project using angular js. im giving condition tool tip template. here is the dojo example http://dojo.telerik.com/aZEgu

 

 

[developer]

Hi..
I created kendo stacked column chart in my project using angular js. im giving condition tool tip template. here is the dojo example http://dojo.telerik.com/aZEgu.tooltip is not disaplying with conditional tooltip template.

Kindly help to resolve the issue.

Thanks in advance

 

[Alex Hajigeorgieva]

Hello,

To fix the Kendo UI Chart Tooltip in the code provided, place the string values in quotes so that they can be evaluated against the series name and escape them like below:

k-tooltip="{visible:true,template :'#= series.name #(#= series.name == \'Verified\' ? dataItem.verified :series.name == \'Unverified\' ? dataItem.unverified:series.name == \'Non Compliant\' ? dataItem.nonCompliant:0 #): #= value #%'}"

Regards,
Alex
Telerik by Progress

 

 

[developer]

Hi Alex..

Thank you for your reply , it's working.

I'm facing issue with reduce the gap between two columns in a chart i'm using gap property.if i reduce gap columns width is getting increase how to reduce the space or gap between columns

 

[developer]

Hi..

I'm expecting chart to be displayed in shared image file.

Thank you in advance

[Alex Hajigeorgieva]

Hi,

The gap property of the Kendo UI Chart series and  defaultSeries  is the correct property to use:

http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.gap

It can also be assigned to the seriesDefaults property:

http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-seriesDefaults.gap

In the example provided, the columns are created based on the category name. Since there are only two categories, then the available space is equally split between them, therefore it looks as if there is a big gap between them. I added more columns to the Kendo UI Chart to demonstrate how the chart changes its visualisation. It is available at: 

http://dojo.telerik.com/ONiyO

I am not certain what is the expected behaviour. Could you please elaborate? 

Finally, this thread is no longer concerning the Tooltip template for the Kendo UI Chart in an AngularJS application and I would recommend opening another thread so we can keep the related topics tidy.

Thank you for your understanding.

Regards,
Alex
Telerik by Progress