Skip to content
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

Labels not rounded to necessary precision #5574

Closed
LondonWebFactory opened this issue Jun 19, 2018 · 6 comments
Closed

Labels not rounded to necessary precision #5574

LondonWebFactory opened this issue Jun 19, 2018 · 6 comments

Comments

@LondonWebFactory
Copy link

I have found a labeling bug.

Version
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js

Browser
Google Chrome
Version 67.0.3396.87 (Official Build) (64-bit)

CodePen
https://codepen.io/LondonWebFactory/pen/VdyEmp

Description
Hover over elements 3, 6 and 7 and you will see that there is an error in the data. For some reason chart JS is adding 1 times ten to the power minus 16 (or thereabouts - it's hard to count)

@LondonWebFactory
Copy link
Author

A fix can be found in this post:

#4992

@benmccann
Copy link
Contributor

benmccann commented Jun 19, 2018

This should be fixed in 2.7.2 by #4943

@jcopperfield any chance you would be able to look at this one? It seems your fix for rounding to the necessary precision might not be working in all cases

@benmccann benmccann changed the title Labeling Bug Labels not rounded to necessary precision Jun 19, 2018
@jcopperfield
Copy link
Contributor

@LondonWebFactory @benmccann As far as I understand the requested problem lays within the tooltip not the axis.

The solution for this problem is in the tooltip documentation. It is actually the exact example demonstrated in this page.

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    var label = data.datasets[tooltipItem.datasetIndex].label || '';

                    if (label) {
                        label += ': ';
                    }
                    label += Math.round(tooltipItem.yLabel * 100) / 100;
                    return label;
                }
            }
        }
    }
});

@benmccann
Copy link
Contributor

Ah, thanks @jcopperfield. I missed that your PR only affected the axis. Would it make sense to make the change you made on the axis affect the tooltip as well?

@jcopperfield
Copy link
Contributor

@benmccann Well it could be implemented in the default label callback in core.tooltip.js. I'm not sure it is worth to make it the default behaviour, as it might lead to incorrect behaviour for other types of axis. I think the solution as described in the documents is simple enough to implement and customize.
It might be better to ask @etimberg for his opinion though.

@etimberg
Copy link
Member

Not sure why I didn't see this last june, but the issue here is the data going in.

var x = 3 * 0.1;
console.log(x);

0.30000000000000004

This is caused by using floating point numbers. I think the solution of using the label callback is the correct one since it has the most flexibility and we don't want to start making decisions on what the numbers mean

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants