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

6 posts, 0 answers
  1. developer
    developer avatar
    58 posts
    Member since:
    Nov 2015

    Posted 15 Jul Link to this post

    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

     

     

  2. developer
    developer avatar
    58 posts
    Member since:
    Nov 2015

    Posted 15 Jul Link to this post

    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

     

  3. Kendo UI is VS 2017 Ready
  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    117 posts

    Posted 18 Jul Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  5. developer
    developer avatar
    58 posts
    Member since:
    Nov 2015

    Posted 20 Jul Link to this post

    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

     

  6. developer
    developer avatar
    58 posts
    Member since:
    Nov 2015

    Posted 20 Jul Link to this post

    Hi..

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

    Thank you in advance

  7. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    117 posts

    Posted 22 Jul Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready