Float problem on yAxis when all data is decimal

[hutchy2570]

I'm using the latest 2.0.0-dev build (Jan 9th) which contains fix #1567.

In a line chart, when my data is decimal there are floating point problems with the tick labels.

            var ctx = $("#testchart");
            var myLineChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ["1", "2", "3"],
                    datasets: [
                        {
                            label: "My First dataset",
                            data: [0.3, 1.2, 0]
                        },
                        {
                            label: "My Second dataset",
                            data: [0, 0.3, 1.2]
                        }
                    ]
                }
            });
        });

That data renders:

[hutchy2570]

Just an addition. I tried overriding the callback on the yAxis tick to log the value being passed in for tickValue and it already had the rounding problemon it. Hope this info helps.

[rulero]

I have the same problem with a single dataset, the problem seems to go away when the canvas is narrow though!

The problem happens in the function buildTicks() when the ticks are calculated as a multiple of spacing, since in theory they shouldn't have more decimal positions than spacing (because the multiplier is integer) I round them as a workaround:

I use function decimalPlaces() from http:https://stackoverflow.com/questions/10454518/javascript-how-to-retrieve-the-number-of-decimals-of-a-string-number

function decimalPlaces(num) {
  var match = (''+num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
  if (!match) { return 0; }
  return Math.max(
       0,
       // Number of digits right of decimal point.
       (match[1] ? match[1].length : 0)
       // Adjust for scientific notation.
       - (match[2] ? +match[2] : 0));
}

And round niceMIn, niceMax and the ticks in buildTicks()

            var niceRange = helpers.niceNum(this.max - this.min, false);
            var spacing = helpers.niceNum(niceRange / (maxTicks - 1), true);
            var roundFactor = Math.pow(10, decimalPlaces(spacing));
            var niceMin = Math.round(Math.floor(this.min / spacing) * spacing * roundFactor) / roundFactor; // Round
            var niceMax = Math.round(Math.ceil(this.max / spacing) * spacing * roundFactor) / roundFactor; // Round

            var numSpaces = Math.ceil((niceMax - niceMin) / spacing);

            // Put the values into the ticks array
            this.ticks.push(this.options.ticks.min !== undefined ? this.options.ticks.min : niceMin);
            for (var j = 1; j < numSpaces; ++j) {
                this.ticks.push(Math.round((niceMin + (j * spacing)) * roundFactor) / roundFactor); // Round
            }
            this.ticks.push(this.options.ticks.max !== undefined ? this.options.ticks.max : niceMax);

Hope this helps.

[hutchy2570]

As a workaround I configured my yAxes ticks callback to simply be the following which works for my usage (simple graph displaying rainfall rate and accumulated rainfall over 24 hours).

function (tickValue, index, ticks) {
            return Number(tickValue).toFixed(2);
        }

[etimberg]

Fixed in #1984