regaddi/chart.js

Simple HTML5 Charts using the <canvas> tag

chart.js's Issues

Tooltips not showing on Firefox 19.0.2

Hi,

First of all, thank you for your excellent work on Chart.js. You did exactly the additions I needed.
I have a rendering problem with Firefox (it works perfectly on the latest Chrome and IE 9), the tooltips do not appear at all. And sometimes, I get the following error:

TypeError: Value not an object. (l. 262)
context.putImageData(chart.savedState,0,0);

Do you experienced a similar thing ?

Thank you.

Val

Check Edges of Tooltip on "retina" displays

Hey,

I'm working with a MacBook Pro with "retina" display, so the screen DPI is 2. This was causing some problems with the "check edges" on the tooltips, so I made the following change...

// check edges
if(posX + rectWidth > ctx.canvas.width / window.devicePixelRatio) {
  posX -= posX+rectWidth-ctx.canvas.width / window.devicePixelRatio;
  }

Solved the issue for me. Not the cleanest solution, but it may be worth including down the road.

--d

Tooltip doesn't seems to work when parent div position is relative.

If I wrap the canvas with relative positioned div, the tooltip no longer show up. When I remove position:relative, the tooltip works again. Can you replicate this as well?

Thanks

On iOS, tapping a pie segment causes a flash before showing tooltip

Hey, nice work with the labels and tooltips.

On iOS, tapping a pie segment causes a flash before showing the tooltip. Anyway to prevent this?

Cheers
Jarrod

Pie chart crash when data has only one value > 0

When the animation ends, the pie chart disappear.

This is my test:

var ctx = $(canvas).get(0).getContext("2d");
var data = [
{
value: 2,
color:"#F38630",
label : 'Sleep',
labelColor : 'white',
labelFontSize : '16'
},
{
value : 0,
color : "#E0E4CC"
},
{
value : 0,
color : "#69D2E7"
}
]
var options = {
showTooltips: false
}
var myNewChart = new Chart(ctx).Pie(data,options);

show label for Polar chart, why not?

Hi nnnick,
i verry need show some label in polar chart (see picture below).
please help me.

Labels don't work with Doughnuts

Is that a known problem or am I doing something wrong?

Could i fixed tooltip value label?

By default, ,tooltip will be showed when i move over mouse, could tooptip be showned all the time, not just only be showed when i move over mouse?

Possible to format tooltip labels?

Hi there, I've been playing with your tooltip branch of Chart.js, so far, so good.

In the original script you can end it y-axis label like so:

//Interpolated JS string - can access value
scaleLabel : "<%=value%>"

In my case, I'm using numbers to 2 decimal places (for money), e.g.

//Interpolated JS string - can access value
scaleLabel : "£<%=Math.round(value)%>"

Any chance of being able to do something similar in the tooltip? For example:

January: £123.00

Instead of:

January: 123

Cheers, Rikki

Is tool tip feature available in the latest master ?

Tooltips not showing on scroll (Firefox & IE)

In the changes proposed by @peachananr in #2 there was a small problem. If you scroll on Firefox and IE, the tooltips does not appear or with some shift. After some search, it seems that e.scrollTop property is not supported if a doctype is present.

I replaced :

function getPosition(e) {
        var xPosition = 0;
        var yPosition = 0;

        while(e) {
            xPosition += (e.offsetLeft - e.scrollLeft + e.clientLeft);
            yPosition += (e.offsetTop - e.scrollTop + e.clientTop);
            e = e.offsetParent;
        }
        return { x: xPosition, y: yPosition };
    }

    context.canvas.onmousemove = function(e) {
        if(chart.tooltips.length > 0) {
            chart.savedState = chart.savedState == null ? context.getImageData(0,0,context.canvas.width,context.canvas.height) : chart.savedState;
            var rendered = 0;
            for(var i in chart.tooltips) {
                var position = getPosition(context.canvas),
                    mx = e.x - position.x,
                    my = e.y - position.y;
                if(chart.tooltips[i].inRange(mx,my)) {
                    chart.tooltips[i].render(mx,my);
                    rendered++;
                }
            }
            if(rendered == 0) {
                context.putImageData(chart.savedState,0,0);
            }
        }
    }

with this

    function getPosition(e) {
        var xPosition = 0;
        var yPosition = 0;

        while(e) {
            xPosition += (e.offsetLeft - window.pageXOffset + e.clientLeft);
            yPosition += (e.offsetTop - window.pageYOffset + e.clientTop);
            e = e.offsetParent;
        }
        return { x: xPosition, y: yPosition };
    }

    context.canvas.onmousemove = function(e) {

        if(chart.tooltips.length > 0) {
            chart.savedState = chart.savedState == null ? context.getImageData(0,0,context.canvas.width,context.canvas.height) : chart.savedState;
            var rendered = 0;
            for(var i in chart.tooltips) {
                var position = getPosition(context.canvas),
                    mx = (e.clientX) - position.x - window.pageXOffset,
                    my = (e.clientY) - position.y - window.pageYOffset;

                if(chart.tooltips[i].inRange(mx,my)) {
                    chart.tooltips[i].render(mx,my);
                    rendered++;
                }
            }
            if(rendered == 0) {
                context.putImageData(chart.savedState,0,0);
            }
        }
    }

Hope it help.

Cheers.

Val

Bar Chart, max legend length

Hi,

What is the max length of the bar chart legend?

I try a string with more than 30 chars and the Chart.js overflow at line 1619.

Please, give me some information about resize popup window canvas with bar chart inside.

Cheers, hjordao.

Chart labels sometimes break in IE10

So, it seems that in IE10, sometimes colors reported by window.getComputedStyle().color are reported as rgb(x,x,x) and sometimes rgba(x,x,x,x). This causes the regex on line 1755 to crash when rgba values are returned.

The following patch fixes the issue for me:
diff --git a/assets/js/Chart.js b/assets/js/Chart.js
index ab32034..5fd1a26 100644
--- a/assets/js/Chart.js
+++ b/assets/js/Chart.js
@@ -1753,8 +1753,11 @@ window.Chart = function(context, options){
pseudoEl.style.color = secColor;
rgbSec = window.getComputedStyle(pseudoEl).color;
var regex = /rgb *( *([0-9]{1,3}) *, *([0-9]{1,3}) *, *([0-9]{1,3}) *)/,

•                   valuesP = regex.exec(rgbPrim),
  

•                   valuesS = regex.exec(rgbSec),
  

•                   regexrgba = /rgba *( *([0-9]{1,3}) *, *([0-9]{1,3}) *, *([0-9]{1,3}), *([0-9]{1,3}) *)/,
  

•                   rgbvaluesP = regex.exec(rgbPrim)
  

•                   rgbvaluesS = regex.exec(rgbSec),
  

•                   valuesP = rgbvaluesP != null ? rgbvaluesP : regexrgba.exec(rgbPrim),
  

•                   valuesS = rgbvaluesS != null ? rgbvaluesS : regexrgba.exec(rgbSec),
                  rP = Math.round(parseFloat(valuesP[1])),
                  gP = Math.round(parseFloat(valuesP[2])),
                  bP = Math.round(parseFloat(valuesP[3])),
  

tooltip not working with chrome but work with ff

hey,
the same value works fine with ff, but not working with the latest version of chrome ..

retina devices display issue

chartjs#161

Does this fix exist on the tooltips branch?

We were gonna push this to production, but once we did we had to back out the tooltip changes because on the retina displays on our macs we were seeing this behaviour.

Let me know if you need more info

Best regards

How to add label for bar chart

I want to add the labels on top of each bar. How to do it? Thanks

Turn tooltip green on "uptick"

I've coded this into Chart.js. What is the preferred way for me to contribute my changes so that if you like the idea, it can be rolled in to the code.

Thanks for your time,

Clay

Chart Animations Lag in Chrome

My chart animations are seamless in FireFox and IE 10. But when I use Chrome, the chart animation appears to lag/progress noticeably slow.

HP Envy Touchscreen Notebook - Tooltips don't work correctly

I've tried the to use my charts on non-touchscreen notebooks and the tooltip functionality appears to work fine.

However, on my touchscreen notebook, the tooltip only shows when I physically touch the graph. The tooltips do not display on mouseover.

Any ideas?

Tooltips with scrolled div (not only body)

In the code:

    function getPosition(e) {
            var xPosition = 0;
            var yPosition = 0;

            while(e) {
                    xPosition += (e.offsetLeft + e.clientLeft);
                    yPosition += (e.offsetTop + e.clientTop);
                    e = e.offsetParent;
            }
            if(window.pageXOffset > 0 || window.pageYOffset > 0) {
                    xPosition -= window.pageXOffset;
                    yPosition -= window.pageYOffset;
            } else if(document.body.scrollLeft > 0 || document.body.scrollTop > 0) {
                    xPosition -= document.body.scrollLeft;
                    yPosition -= document.body.scrollTop;
            }
            return { x: xPosition, y: yPosition };
    }

If the chart is in a DIV that has been scrolled the mouseover detection doesn't work properly. The code checks the scrollTop/Left of the body, but all block elements can have scrollTop/Left.

If we change the code for this one, works perfectly.

function getPosition(e) {
    var xPosition = 0;
    var yPosition = 0;

    while(e) {
        xPosition += (e.offsetLeft - e.scrollLeft + e.clientLeft);
        yPosition += (e.offsetTop - e.scrollTop + e.clientTop);
        e = e.offsetParent;
    }
    return { x: xPosition, y: yPosition };
}

how to use tooltips ?)

how to use tooltips ?)

Assign tooltips manually

I am currently using version 0.2 of chart.js to draw a radar chart with tooltips. I want to manually assign the values for the tooltips instead of the default values that are displayed currently. Can this be done?

Not working in chrome

Version 33.0.1750.146

Latest chrome adds touch features, breaks tooltips.

Haven't had time to see what has been changed but just a heads up that the latest chrome has added touch features which returns true on window.Touch on non touch devices.

At line 429 - If you need a quick workaround however this will remove touch functionality.

Tooltips don't work in Chrome

As the title mentions the tooltips don't work in chrome when used on Windows 8 Pc.

This is caused by the check "window.Touch'.
This is now true even when the device isn't touch enabled.

I found a solution over here (http://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript)

After ready that i replaced the code at line 334 in the chart.js file.
Old code:

    if(window.Touch) {

New Code:

    function is_touch_device() {
        return 'ontouchstart' in window // works on most browsers 
            || 'onmsgesturechange' in window; // works on ie10
    };

    if (is_touch_device()) {

Most of the credit goes to Alan Christopher Thomas

per dataset tooltip/ show all datasets tooltips on one x point

Thanks for tooltip support.

When we have multiple datasets with values closer to zero, its difficult to read the values of the tooltip.

is it possible to do these two things

1. Show the tooltip with values for all datasets (morris js does this) on hover on any x point
2. Color the tooltip based on the dataset color

The codebase seem to be really large to hack around.

Cheers!

Label Wrap in Pie Chart

I recognized that the Labels doesn´t Wrap if they have more width as the Pie:

http://d.pr/i/PrE8

Maybe something like that helps:

http://james.padolsey.com/javascript/wordwrap-for-javascript/

Duplicate function definition

In the current chart.js there is a duplicate function definition of the method populateLabels which could be removed

round corner the tooltip box and add top/left/right/bottom arrows

RT

Tooltips on line charts

The tooltip hover points on the line chart seem to be shifted up 20-30px or so. I'm gonna try to take a look tomorrow to figure out what's happening.

showTooltips : false - not working

"showTooltips : false" isn't working for me...can you help? I want the labels to show, but don't want the tooltips to appear when hovering over the chart. I have tried to remove it on a pie chart and a bar graph. Thanks!

With custom scale, graph data (or scale) off by 1 iteration

When using a custom scale, chart data gets off by one iteration in relation to the chart labels.

This pull request on @nnick's repository will fix the issue:

callado4@9364e1b