Conditional tooltip based on Model property

[Robert]

     I have a column chart that I need to conditionally hide the tooltip based on a property of the model data that fills said chart.

public class chartModel
{
    public int ID { get; set; }
    public string Name {get; set;}
    public bool ShowTooltip { get; set; }
    public double FeesYTD { get; set; }
}

 

@(Html.Kendo().Chart<chartModel>()
               .Name("topFees")
               .ChartArea(chartArea => chartArea
                   .Background("transparent")
                   .Height(300)
               )
               .DataSource(ds => ds.Read(read => read.Action("FeeChartData", "PracticeAnalytics")))
               .SeriesDefaults(sd => sd.Column().Stack(false).Gap(.7).Overlay(ChartBarSeriesOverlay.None))
               .Series(series => series
                   .Column(model => model.FeesYTD)
               )
               .Tooltip(tooltip => tooltip
                   .Visible(true)
                   .Shared(true)
                   .SharedTemplate(
                       "# for (var i = 0; i < points.length; i++) { #" +
                           "# if (points[i].value !== 0) { #" +
                               "<div>#: points[i].series.Name# #: points[i].series.name# : #: kendo.format('{0:C}',points[i].value) #</div>" +
                           "# } #" +
                       "# } #"
                   )
               )
       )

 

Basically if the model.ShowToolTip is true then I want to show the tooltip, otherwise hide it.  Best I could find that is similar is using SharedTemplate, but I don't think I can access my model properties, only category and series.  So where in my example I have if (points[i].value != 0) I need something like if (model.ShowToopTip).

 

 

 

 

 

 

 

 

 

 

[Alex Hajigeorgieva]

Hi, Robert,

Thank you very much for the provided configuration.

When the Kendo UI Chart for ASP.NET MVC has a shared tooltip, its appearance is set in motion anywhere in the category division.

Instead, I would suggest using the Series.Tooltip and showing it when it meets the dataItem condition on SeriesHover. Here is a simple Dojo of this proposed option:

https://dojo.telerik.com/@bubblemaster/unEfI

.Events(e=>e.SeriesHover("onSeriesHover"))

function onSeriesHover(e){
        var seriesValue = e.value;
          e.sender.showTooltip(function(point) {
            if(seriesValue === point.value && point.value === 2){
              return true;
            }
          });

}

Naturally, the tooltip template would not have the same properties as available in the shared template so you would meed to obtain them programmatically.

Let us know what you think.

Regards,
Alex Hajigeorgieva
Progress Telerik