This is a migrated thread and some comments may be shown as answers.

Conditional tooltip based on Model property

1 Answer 99 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Robert
Top achievements
Rank 1
Veteran
Robert asked on 14 Apr 2020, 05:45 PM

     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).

 

 

 

 

 

 

 

 

 

 

 

1 Answer, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 16 Apr 2020, 03:55 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Chart
Asked by
Robert
Top achievements
Rank 1
Veteran
Answers by
Alex Hajigeorgieva
Telerik team
Share this question
or