Chart.js number Y-AXIS label format for many decim

问题:

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.

回答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.....

回答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

回答3:

Try changing the scaleStepWidth value in the chart config to something as small as the difference between your values. That should also influence the number of decimal places shown on the scale, as seen in the Chart.Core.js file in Chart.js source on github.

new Chart(ctx).Bar(datasets, {scaleStepWidth : 0.00000000000000050});