Chart.js number Y-AXIS label format for many decimal places

Question

I'm having problems with chart.js Y-axis labels. I have the following data.

var data = {
labels: ["1","2","3","4","5"],
datasets: [
    {
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,0.8)",
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(220,220,220,1)",
        data: [0.15000000000000088,0.15000000000000133,0.15000000000000177,0.15000000000000221,0.15000000000000308]
    },
]
};

and I get this result.

Image of the Graph Result

As you can see the labels in the Y-axis are cut after the fifth decimal place. How do I show all the decimal places from my data in the Y-Axis labels?

TIA.

Solution 1

Try this

var data = {
labels: ["1","2","3","4","5"],
datasets: [
    {
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,0.8)",
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(220,220,220,1)",
        data: [15000000000000088,15000000000000133,15000000000000177,15000000000000221,15000000000000308]
    },
]
};

// create chart
var ctx = document.getElementById("radaranalytics").getContext('2d');
var radar = new Chart(ctx).Bar(data, {
  scaleBeginAtZero: false,
  scaleLabel: "<%=value/100000000000000000%>",
  tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value/100000000000000000 %>",
});

---

Fiddle - https://jsfiddle.net/2g794kxh/

---

Note that there will be a rounding off of the values in the chart beyond a limit. See https://stackoverflow.com/a/30373552/360067 for more information.

If you want to avoid that your best bet would be to treat the static part of your scale / value as a string i.e. your data would be 88, 133, 177, etc. and your scale / value prefix would be 0.150000.....

Solution 2

This has likely changed since the question was asked, but this now appears to be the preferred method:

var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
    scales: {
        yAxes: [{
            ticks: {
                // Include a dollar sign in the ticks
                callback: function(value, index, values) {
                    return '$' + value;
                }
            }
        }]
    }
}
});

http://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats