Chartjs-Y-axis label in chartjs 2.0.0

by

4👍

✅

1.As you can see on the left i have a strange 0.150000000000000000000002 value

The original axis label function had code to round the label to the number of decimal points in the stepvalue. I couldn’t see it in the new one. However you can easily fix it by changing the template string

labels: {
    template: "<%= Number(value.toFixed(2)) + ' A'%>",

or by replacing it with a callback function to format the number as you wish

labels: {
    userCallback: function (tick) {
        return Number(tick.toFixed(2)) + ' A';
    },

2.Top Y-axis labels are cutted

There is already a bug logged for this – https://github.com/nnnick/Chart.js/issues/1274 and it’s part of the 2.0 milestone. So it should be fixed before the final 2.0 release.

Till then you can easily work around it by adding some top padding to the canvas parent (and styling the wrapper instead of the canvas – background-color, border…)

Fiddle – https://jsfiddle.net/fonvw25m/

2👍

I ran into the same problem with Version: 2.1.6.

potatopeelings’ updated solution looks like this:

    var options = {
        scales: {
            yAxes: [{
                ticks: {
                    callback: function (value, index, values) {
                        return parseFloat(value).toFixed(2) + '%';
                    }
                }
            }]
        }
    };

Leave a comment