New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltips #51

Closed
wants to merge 55 commits into
base: master
from

Conversation

Projects
None yet
@Regaddi

Regaddi commented Mar 23, 2013

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.

Screenshot from 2013-03-23 16:25:00

@artemeff

This comment has been minimized.

Show comment
Hide comment
@artemeff

artemeff Mar 25, 2013

Awesome 👍

artemeff commented Mar 25, 2013

Awesome 👍

@wojons

This comment has been minimized.

Show comment
Hide comment
@wojons

wojons Mar 25, 2013

When is this planned to be merged into master?

wojons commented Mar 25, 2013

When is this planned to be merged into master?

@stephanstapel

This comment has been minimized.

Show comment
Hide comment
@stephanstapel

stephanstapel Mar 25, 2013

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?

stephanstapel commented Mar 25, 2013

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

This comment has been minimized.

Show comment
Hide comment
@Regaddi

Regaddi Mar 25, 2013

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.

Regaddi commented Mar 25, 2013

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

This comment has been minimized.

Show comment
Hide comment
@stephanstapel

stephanstapel Mar 25, 2013

sounds cool, thanks!

stephanstapel commented Mar 25, 2013

sounds cool, thanks!

@peachananr

This comment has been minimized.

Show comment
Hide comment
@peachananr

peachananr Mar 26, 2013

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

peachananr commented Mar 26, 2013

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

@wbashir

This comment has been minimized.

Show comment
Hide comment
@wbashir

wbashir Mar 26, 2013

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

wbashir commented Mar 26, 2013

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

@mouhsinelonly

This comment has been minimized.

Show comment
Hide comment
@mouhsinelonly

mouhsinelonly Dec 15, 2013

i'm using the latest version

Version 31.0.1650.63 m

mouhsinelonly commented Dec 15, 2013

i'm using the latest version

Version 31.0.1650.63 m

@Wikunia

This comment has been minimized.

Show comment
Hide comment
@Wikunia

Wikunia Dec 15, 2013

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

Wikunia commented Dec 15, 2013

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

@alternativshik

This comment has been minimized.

Show comment
Hide comment
@alternativshik

alternativshik Dec 26, 2013

Chrome 32.0.1700.68 beta - doesn't work.

alternativshik commented Dec 26, 2013

Chrome 32.0.1700.68 beta - doesn't work.

@Wikunia

This comment has been minimized.

Show comment
Hide comment
@Wikunia

Wikunia Dec 27, 2013

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

Wikunia commented Dec 27, 2013

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

@mouhsinelonly

This comment has been minimized.

Show comment
Hide comment
@mouhsinelonly

mouhsinelonly Dec 27, 2013

@Wikunia yes your version works in chrome.

mouhsinelonly commented Dec 27, 2013

@Wikunia yes your version works in chrome.

@Wikunia

This comment has been minimized.

Show comment
Hide comment
@Wikunia

Wikunia Dec 27, 2013

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

Wikunia commented Dec 27, 2013

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

@mouhsinelonly

This comment has been minimized.

Show comment
Hide comment
@mouhsinelonly

mouhsinelonly Dec 27, 2013

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

2013/12/27 Ole Kröger notifications@github.com

@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 : Mouhsine.bakhich@gmail.com
Rue 41 N° 6 Av Sidi Said
biougra chtouka ait baha 87200
MA

mouhsinelonly commented Dec 27, 2013

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

2013/12/27 Ole Kröger notifications@github.com

@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 : Mouhsine.bakhich@gmail.com
Rue 41 N° 6 Av Sidi Said
biougra chtouka ait baha 87200
MA

@Wikunia

This comment has been minimized.

Show comment
Hide comment
@Wikunia

Wikunia Dec 27, 2013

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

Wikunia commented Dec 27, 2013

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

@Cristy94

This comment has been minimized.

Show comment
Hide comment
@Cristy94

Cristy94 Dec 29, 2013

@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: http://stackoverflow.com/questions/20767973/chart-js-disappears-on-android

Cristy94 commented Dec 29, 2013

@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: http://stackoverflow.com/questions/20767973/chart-js-disappears-on-android

@Wikunia

This comment has been minimized.

Show comment
Hide comment
@Wikunia

Wikunia Jan 1, 2014

@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

Wikunia commented Jan 1, 2014

@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

@miniche miniche referenced this pull request Jan 15, 2014

Closed

Highcharts licence #2

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Feb 9, 2014

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)...

ghost commented Feb 9, 2014

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

This comment has been minimized.

Show comment
Hide comment
@chipowster

chipowster Feb 12, 2014

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

chipowster commented Feb 12, 2014

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

@cpcbell

This comment has been minimized.

Show comment
Hide comment
@cpcbell

cpcbell Feb 12, 2014

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

cpcbell commented Feb 12, 2014

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

@cpcbell

This comment has been minimized.

Show comment
Hide comment
@cpcbell

cpcbell Feb 12, 2014

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 commented Feb 12, 2014

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

This comment has been minimized.

Show comment
Hide comment
@cpcbell

cpcbell Feb 12, 2014

My theory is confirmed, http://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 commented Feb 12, 2014

My theory is confirmed, http://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 comment has been minimized.

Show comment
Hide comment
@cpcbell

cpcbell Feb 12, 2014

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.

cpcbell commented Feb 12, 2014

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.

@chenkan0104 chenkan0104 referenced this pull request Mar 5, 2014

Closed

Assign tooltips manually #24

@Regaddi

This comment has been minimized.

Show comment
Hide comment
@Regaddi

Regaddi Mar 5, 2014

Touch check is fixed in my latest master.

Regaddi commented Mar 5, 2014

Touch check is fixed in my latest master.

@Strainy

This comment has been minimized.

Show comment
Hide comment
@Strainy

Strainy Mar 5, 2014

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

Strainy commented Mar 5, 2014

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

@Regaddi

This comment has been minimized.

Show comment
Hide comment
@Regaddi

Regaddi Mar 5, 2014

@Strainy Minified or Non-Minified?

Regaddi commented Mar 5, 2014

@Strainy Minified or Non-Minified?

@Strainy

This comment has been minimized.

Show comment
Hide comment
@Strainy

Strainy Mar 5, 2014

@Regaddi - It seems both aren't working.

Strainy commented Mar 5, 2014

@Regaddi - It seems both aren't working.

@Regaddi

This comment has been minimized.

Show comment
Hide comment
@Regaddi

Regaddi Mar 5, 2014

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

Regaddi commented Mar 5, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@gsprenger

gsprenger Mar 6, 2014

@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.

gsprenger commented Mar 6, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@Stafie

Stafie Mar 7, 2014

@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: http://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..

Stafie commented Mar 7, 2014

@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: http://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 comment has been minimized.

Show comment
Hide comment
@olanchuy

olanchuy Apr 29, 2014

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

olanchuy commented Apr 29, 2014

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

This comment has been minimized.

Show comment
Hide comment
@FVANCOP

FVANCOP May 1, 2014

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").

FVANCOP commented May 1, 2014

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").

@Regaddi Regaddi closed this Jul 1, 2014

@Regaddi Regaddi deleted the Regaddi:tooltips branch Jul 1, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment