Dynamically set tooltip background color on point hover

3 posts, 0 answers
  1. Luis
    Luis avatar
    27 posts
    Member since:
    Jun 2014

    Posted 01 Dec 2014 Link to this post

    Hello all.
    I currently have a kendo chart configured with two different series as can be seen in the following code:

    @(Html.Kendo().Chart(Model)
                .Name("financialChart")            
                .DataSource(dataSource => dataSource                
                    .Sort(s => s.Add(fc => fc.Date))
                )
                .Legend(legend => legend
                    .Position(ChartLegendPosition.Bottom)
                    .Labels(labels => labels
                        .Template("#= series.name #"))
                )
                .ChartArea(chartArea => chartArea
                    .Background("transparent")
                )
                .SeriesDefaults(seriesDefaults =>
                    seriesDefaults.Line().Style(ChartLineStyle.Smooth)
                )
                .Series(series =>
                {
                    series.Line(value => value.MyValue, category => category.Date)                  
                      .DashType(ChartDashType.Dash)
                      .Name("Series1")
                      .Color("red")                                    
                      .Aggregate("selectLastPoint1");
                    
                 series.Line(value => value.MyValue, category => category.Date)
                     .Name("Series2")
                     .Color("blue")                 
                     .Aggregate("selectLastPoint2");
                })
                .CategoryAxis(axis => axis                        
                            .Labels(labels => labels.Rotation(0).Format("MMM 'yy"))
                            .Date()                        .
                            .BaseUnit(ChartAxisBaseUnit.Months)                                        
                )
                .ValueAxis(axis => axis.Numeric()                
                    )
                .Tooltip(t => t
                    .Visible(true)
                    .Format("{0:c}")
                    .Template("#= kendo.format('{0:C}', dataItem.MyValue) #")                               
                )            
                .HtmlAttributes(new { style = "margin: 0 15px 0 15px" })            
    )

    As you can see, Series1 is red and Series 2 is blue. However, Series1 and Series 2 have both a common point that is:

    Series 1:
    Jan 2014 - $50 - Point A
    Feb 2014 - $100 - Point B

    Series 2
    Feb 2014 - $100 - Point C
    Mar 2014 - $150 - Point D

    When I hover over the points A and B the point fills in red and the tooltip has a red background. When I hover over points C and D the point fills in blue and the tooltip appears blue also.What I want is that point C has a RED fill and a RED tooltip as if it belonged to Series 1 and not Series 2.
    The question is: Is there anyway that I can dinamycally set the tooltip color on the hover of the point?










  2. Luis
    Luis avatar
    27 posts
    Member since:
    Jun 2014

    Posted 01 Dec 2014 in reply to Luis Link to this post

    EDIT:
    I have added a JSFiddle in order to illustrate whats happening:
    http://jsfiddle.net/nmcLh0x1/

    When hovering on the second point for 2003 from the left, a red point and a red tooltip is displayed. When hovering from the right, a blue tooltip and a blue point is displayed. I want this point to be ALWAYS red.
  3. Daniel
    Admin
    Daniel avatar
    2230 posts

    Posted 03 Dec 2014 Link to this post

    Hello Luis,

    The tooltip background cannot be dynamically set but it is possible to set the background to an element in the template. The background of the tooltip element can be hidden in this case via CSS and some configuration options. I updated the example to demonstrate this approach.

    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top