Chart Tooltip position problem

6 posts, 0 answers
  1. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 02 Dec 2015 Link to this post

    I have a chart, which allows the user to click on a column, to refresh the chart with data from the next level in the hierarchy.

    It works well, apart from the rightmost columns, on narrower displays. In these cases, the tooltip completely obscures the column, making clicking on them difficult.

    I've attached an example image.

    The chart definition is:-

     

    @(Html.Kendo().Chart<Dashboard.Models.BarChartDataItem>(Model)
                .Name((string)ViewBag.ChartName)
                 .Title((string)ViewBag.ChartTitle)
                 .Theme("bootstrap")             
     
                .Legend(legend => legend
                    .Position(ChartLegendPosition.Top)
                    .Visible(false)
                )
     
                .Series(series =>
                {
                    series.Column(model => model.BarValue).Name("Actual").Tooltip(t=>t.Visible(true).Template("<div>Category:#=dataItem.AxisDescription#</br>Contribution: £#=dataItem.DisplayBarValue#</div>"));
                })
                .ChartArea(area => area
                    .Height(350)
                    .Background("transparent")
                    )
     
                        .ValueAxis(axis => axis.Numeric()
                    .Labels(labels => labels.Format("{0:N0}"))
                    .Title((string)ViewBag.Yaxis)
                    .AxisCrossingValue(0, int.MinValue)
     
     
     
                    .Line(line => line.Visible(false))
                )
     
                 .CategoryAxis(axis => axis
                   .Labels(false))
                .CategoryAxis(axis => axis
     
                    .Categories(model => model.AxisValue)
                    .Labels(labels => labels.Rotation(-45).Padding(5))
                    .MajorGridLines(lines => lines.Visible(false))
                     .Title((string)ViewBag.Xaxis)
     
     
                )
                
     
     
             
     
             
                .Events(e=>e.SeriesClick("seriesClick"))
     
                .Tooltip(tooltip => tooltip
                    .Visible(true)
     
                    .Format("{0:N2}")
                )
     
    )

     

    Is it possible to change the tooltip position? There don't seem to be any position options available.

     In this case, displaying at the top of the column would be best, ensuring nothing is obscured.

    Thanks

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 04 Dec 2015 Link to this post

    Hi Andrew,

    There is no a position option for the chart tooltip. As workarounds I would suggest the following options: 
    - Set margin to the .k-chart-tooltip element;
    - Display the tooltip in the seriesClick event with a custom position (how to example).

    Regards,
    Iliana Nikolova
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 04 Dec 2015 Link to this post

    Iliana, Thanks for the response.

    I tried setting up a custom tooltip. However, I had to use the seriesHover event, as I'm already using the seriesClick event (and that's the issue - the tooltip stops the bar being clicked!).

    I did find the example didn't work, as the coordinates from the originalEvent object, weren't under x.client , but clientX.

    E.g:-

     

    var positionX = e.originalEvent.clientX;
             var positionY = e.originalEvent.clientY;
             var value = 'Category:' +e.dataItem.AxisDescription;
     
             $("#customTooltip").show().css('position', 'absolute').css("top", positionY).css("left", positionX).text(value);

    Unfortunately, whilst the tooltip is shown, it stays visible if the mouse is moved away from the chart. Is there a chart event I can use to hide the tool tip when this happens?

  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 08 Dec 2015 Link to this post

    Hi Andrew,

    You could hide the tooltip in the mouseleave event. For your convenience here is the updated dojo.

    Regards,
    Iliana Nikolova
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 08 Dec 2015 in reply to Iliana Nikolova Link to this post

    Thanks , this works.

    $("#Chart_ID_1").mouseleave(function (e) {
              hideTip();
          });
     However, I've had to define the event handler in JavaScript, as the MVC framework doesn't expose this event. Is there any reason for this? I'd prefer to be consistent and set all the chart configuration in MVC if possible.

  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 10 Dec 2015 Link to this post

    Hi Andrew,

    The mouseleave is not related to Kendo UI Chart - it is a jQuery event handler and these events have nothing to with MVC. I.e. to achieve the expected result you should define the event handler in JavaScript. 

    Regards,
    Iliana Nikolova
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready