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
Copy link

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.

Copy link

artemeff commented Mar 25, 2013

Awesome 👍

@wojons

This comment has been minimized.

Copy link

wojons commented Mar 25, 2013

When is this planned to be merged into master?

@stephanstapel

This comment has been minimized.

Copy link

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.

Copy link

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.

Copy link

stephanstapel commented Mar 25, 2013

sounds cool, thanks!

@peachananr

This comment has been minimized.

Copy link

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.

Copy link

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.

Copy link

mouhsinelonly commented Dec 15, 2013

i'm using the latest version

Version 31.0.1650.63 m

@Wikunia

This comment has been minimized.

Copy link

Wikunia commented Dec 15, 2013

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

@alternativshik

This comment has been minimized.

Copy link

alternativshik commented Dec 26, 2013

Chrome 32.0.1700.68 beta - doesn't work.

@Wikunia

This comment has been minimized.

Copy link

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.

Copy link

mouhsinelonly commented Dec 27, 2013

@Wikunia yes your version works in chrome.

@Wikunia

This comment has been minimized.

Copy link

Wikunia commented Dec 27, 2013

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

@mouhsinelonly

This comment has been minimized.

Copy link

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.

Copy link

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.

Copy link

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.

Copy link

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.

Copy link

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.

Copy link

chipowster commented Feb 12, 2014

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

@cpcbell

This comment has been minimized.

Copy link

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.

Copy link

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.

Copy link

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.

Copy link

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.

Copy link

Regaddi commented Mar 5, 2014

Touch check is fixed in my latest master.

@Strainy

This comment has been minimized.

Copy link

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.

Copy link

Regaddi commented Mar 5, 2014

@Strainy Minified or Non-Minified?

@Strainy

This comment has been minimized.

Copy link

Strainy commented Mar 5, 2014

@Regaddi - It seems both aren't working.

@Regaddi

This comment has been minimized.

Copy link

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.

Copy link

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.

Copy link

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.

Copy link

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.

Copy link

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