Chart Tooltip position problem

[AP]

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

[Iliana Dyankova]

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

[AP]

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?

[Iliana Dyankova]

Hi Andrew,

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

Regards,
Iliana Nikolova
Telerik

[AP]

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.

[Iliana Dyankova]

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