Why so much different chart tooltips, that all can do different things but all are very limited?

[Dirk]

Hello,

I' ve tried to set up a tooltip for an stacked area and stacked line (lines for comparison) chart.
From my point of view the categoryaxis crosshair tooltip would be great for showing details of chart data, because there is the vertical crosshair, which shows all datapoints.

1. But the only thing you can show in this tooltip is the category value. Does this make sense? This value is shown at the bottom of the chart. Why can't I access all the dataItems?
2. Why can't I change the relative position of all of the tooltips to the mouse pointer? On my chart the tooltip (standard for all the chart) now hides the points of interest, because it is just to the right of the mouse pointer.
3. The most 'datafull' tooltip ist the standard, but this one jumps an falls to the nearest point of data on moving the mouse pointer.

What I'd like to suggest is to build a general purpose tooltip (templates are cool!), that:

1. can access all data (especially dataItems) so you can provide additional data that is only used on tooltip
2. can be positioned:

• at a static point, static X or Y value or
• relative to the upper left corner of the chart or
• relative to the mouse pointer

Did I miss any feature or ist there no way to achive my goals (poitioning and showing all data) at this time?

Best regards
Dirk

[Iliana Dyankova]

Hi Dirk,

Up to the questions: 

1. I believe using shared tooltip is suitable for this requirement;
2. I am not quite sure if I understand this question correctly - I tested the default tooltip and everything is rendered as expected. Could you please elaborate a bit more or better yet provide a jsBin example / picture which demonstrates the issue? This way I would be able to advice you further and provide concrete recommendations;
3. Same as the above point.

On a side note, as a different approach I can suggest hiding the default tooltip and show it in the seriesHover event with a custom position. For a sample code take a look at this forum thread.

Regards,
Iliana Nikolova
Telerik

[Dirk]

Hello Iliana,

up to the answers:

1. you suggest to use the shared tooltip but all data you can access within is "... points - the category" and "pointscategory - the category name...", taken from API Docs. So there's no access to all dataItems. And the problem is there's no tooltip type that is a) able to access and be freely positioned (see following). Another point is, that the shared tooltip is shown on title and legend, which I don' like and no way to configure...
2. and 3. I can't position the tooltip freely. Let's say I'd like to see the tooltip always 100px to the right of the current mouse pointer position (vertical crosshair).

Suggestion to use custom tooltip in seriesHover event:
as I'm using the vertical crosshair it should not matter if the mouse pointer is over a series or not the tooltip should always show data (exact values) of six series, that are stacked. This is luckily partially achievable by using the 'standard' tooltip of the chart, which shows up if the mouse pointer was over a series at the minimum of one time. The problem is, that I can't tell the tooltip to show up 100px to the right of the mouse pointer (not relative to data point in the chart).

Generally speaking I'like to have a (one) tooltip that I can position freely and that is able to access ALL data (all dataItems, category etc.) within the chart. This is a wish not a question.


Best regards
Dirk

[Iliana Dyankova]

Hi Dirk,

Actually using a shared tooltip you could reach the original data through the dataItem in a sharedTemplate. For example: 

//....
tooltip: {
   visible: true,
   shared: true,
   sharedTemplate: " <div>#: category #</div>"+
   " # for (var i = 0; i < points.length; i++) { #"+
   "<div>#: points[i].series.name# : #: points[i].dataItem.blog #</div>"+
    "# } #"
}

Regarding the tooltip position, you are right - at this point there is no option for changing the tooltip position, however we keep this idea in mind for future releases. 

Regards,
Iliana Nikolova
Telerik

[Dirk]

Hi Iliana,

The shared tooltip you suggested works fine, since the dataItem is accessible via points[x] - which I did not know.

So I did not find anything on this topic (e.g. points[x]) in API Reference.
Did I miss something in API Reference?

Some might say that documentation of Kendo UI is a problem since you can do almost everything with the widgets/controls but little is documented - or just hard to find.

A 'workaround' is the extraordinary support you provide.

Thanks a lot
Dirk

[Alex Gyoshev]

Hello Dirk,

Indeed, the properties of a given category point are not well described in the documentation. Aside from that, the size of the chart documentation makes it hard to search. We are continuously looking for ways to improve that.

In that particular case, you can use a console.log in the template to see all the available data. (# console.log(points[i]); #).

Regards,
Alex Gyoshev
Telerik