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

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});

Leave a comment