Tooltips

[Regaddi]

I implemented some basic tooltips, which show (if defined) the label and value onmouseover.
Every tooltip can be registered by a configurable area:

1. a simple rectangle: (x,y,width,height)
2. a circle: (x,y,radius)
3. any shape: (array of {x,y} objects)

Tooltip Defaults can be overwritten by adding a 2nd parameter to the "new Chart()" function, i.e.

var myChart = new Chart(context, { background: 'black', fontColor: 'white' });

The following Tooltip options are available:

tooltipDefaults = {
    background: 'rgba(0,0,0,0.6)',
    fontFamily : "'Arial'",
    fontStyle : "normal",
    fontColor: 'white',
    fontSize: '12px',
    padding: {
        top: 10,
        right: 10,
        bottom: 10,
        left: 10
    },
    offset: {
        left: 0,
        top: 0
    },
    border: {
        width: 0,
        color: '#000'
    }
}

The tooltip moves relative to the current mouse cursor position and shows only, if hovering a valid chart point or area.
Tooltips can be disabled via specific chart option "showTooltips" i.g.

myChart.Pie(pieChartData, { showTooltips: false });

They can be styled individually and do right now a basic job:
Showing the hovered label and value.

[artemeff]

Awesome 👍

[wojons]

When is this planned to be merged into master?

[stephanstapel]

Are you planning to extend this so that no special area needs to be configured but tooltip is automatically shown when the mouse hovers over a diagram shape?

[Regaddi]

Currently the tooltip appears when the user hovers:

1. a data point in Line or Radar chart
2. a data area in Bar, Pie, Polararea or Doughnut chart
   The area recognition is already done in the specific chart types at the end of the animation.

For other chart types the tooltip registration has to be done manually when programming the rendering algorithm.

[stephanstapel]

sounds cool, thanks!

[peachananr]

I just couldn't get the tooltips to work on a Doughnut chart. Can you post some example code for it?

[wbashir]

I am just wondering if this feature has already been merged in place with the current branch?

[mouhsinelonly]

i'm using the latest version

Version 31.0.1650.63 m

[Wikunia]

Yeah me too. It works on my page. Did you test it @mouhsinelonly ?

[alternativshik]

Chrome 32.0.1700.68 beta - doesn't work.

[Wikunia]

@alternativshik did you test my version here -> https://github.wikunia.de/Table2Chart/ It work works for 31.0.1650.63 m

[mouhsinelonly]

@Wikunia yes your version works in chrome.

[Wikunia]

@mouhsinelonly I've add this jhdavids8@194261a commit from @jhdavids8 in my version!

[mouhsinelonly]

tested the commit but with no luck !! still the same probleme in chrome

2013/12/27 Ole Kröger [email protected]

@mouhsinelonly https://github.com/mouhsinelonly I've add this jhdavids8@
194261ahttps://github.com/jhdavids8/Chart.js/commit/194261ac579a257ad97a3838777afe4487b22d84commit from
@jhdavids8 https://github.com/jhdavids8 in my version!

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/51#issuecomment-31272310
.

*Mouhsine Bakhich * ,Developper Trans Gulf For Information Technology
Phone : 0637685059
Email : [email protected]
Rue 41 N° 6 Av Sidi Said
biougra chtouka ait baha 87200
MA

[Wikunia]

Oh that's strange I think I didn't change sth. else which can affect tooltips in Chrome ...

[Cristy94]

@Wikunia There is a bug with this tooltip branch on Chrome 31, Nexus 7 (I think any android device, KitKat). Once the bar chart reaches almost 100% the canvas fails to draw correctly (the bars disappear and the scale is only visible in the bottom-part of the canvas). This problems does not occur on the Chart.js homepage demo. See my SO question: https://stackoverflow.com/questions/20767973/chart-js-disappears-on-android

[Wikunia]

@Cristy94 and I realized that the problem is only for the bar chart, so there is no problem with the stacked bar chart. Let me see... :D

[ghost]

Works in most browsers, except Chrome. I've tested it with Line and Bar charts, neither seem to work in Chrome. IE and FF work great. Tested Chrome version: 32.0.1700.107

The charts render fine btw (in all browsers)...

[chipowster]

Would have some estimate of when it will work in chrome?

[cpcbell]

Must be something really silly about how the event is handled. Works in Safari but not Chrome, very odd.

[cpcbell]

Okay I was able to make it work by taking the event out of the if/else that was using window.touch, so it has something to do with Chrome thinking window.touch is always on perhaps?

I will look for a better way to write that if, but in the meantime you can just take the onmousemove call out of that if assuming you don't care about mobile.

[cpcbell]

My theory is confirmed, https://stackoverflow.com/questions/18459747/chrome-29-window-touch basically window.Touch in chrome no longer returns undefined, so we have to do a better check for mobile touch devices.

[cpcbell]

This makes Chrome work as expected:

/**
if(window.Touch) {
*/
if('ontouchstart' in document.documentElement){

I would push my changes but I've changed a bunch of other stuff today and I don't want to push those yet.

[Regaddi]

Touch check is fixed in my latest master.

[Strainy]

@Regaddi - your latest master doesn't work for me at all in FireFox 27.0.1

[Regaddi]

@Strainy Minified or Non-Minified?

[Strainy]

@Regaddi - It seems both aren't working.

[Regaddi]

@Strainy both are just fine for me with Firefox 27.0.1.
Could you please open an issue at my master with detailed information?

[gsprenger]

@jhdavids8 I took your fork that has mouse events for Line points and added mouse events for Polar Area Charts. If anyone is interested, it's here.

[Stafie]

@Wikunia There is a bug with this tooltip branch on Chrome 31, Nexus 7 (I think any android device, KitKat). Once the bar chart reaches almost 100% the canvas fails to draw correctly (the bars disappear and the scale is only visible in the bottom-part of the canvas). This problems does not occur on the Chart.js homepage demo. See my SO question: https://stackoverflow.com/questions/20767973/chart-js-disappears-on-android

@Cristy94 Did you found a workaround/solution for this on Android by any chance? Experiencing the same thing here..

[olanchuy]

This is great! really really nice! Just have some questions. If I have multiple data on one chart. Is there a way to edit the template to its specific data? because right now, It only shows the x and y axis labels

[FVANCOP]

I have developped an alternative version of Chart.js that you will find on https://github.com/FVANCOP/ChartNew.js.

The tooltips have been implemented in another way : in ChartNew.js, you have to specify option "annotateDisplay : true" to see the "hover" display.

In this version, the display is fully configurable through option "annotateLabel" option. The value for the annotateLabel must be a "template" value (like the scaleLabel parameter described in Nick's version). Other options are also available to configure the "hover" displays (options starting with "annotate").