Document method of truncating decimals

[emilhem]

Expected Behavior

An option to truncate decimals.

Current Behavior

Currently many decimals are being displayed when hovering over a datapoint. I have no problem of them being used in calculating positions but for display purposes it would be nice to be able to truncate some decimals.

Possible Solution

Implement an option to allow truncation of decimals.

Context

Many decimals are not always useful when showing a graph to another person.

Environment

• Chart.js version: 2.7.1
• Browser name and version: Firefox 52.4.0 ESR

[jcopperfield]

You could add a personalized callback to the tooltip labels, where you round the values
e.g.

1. tooltipItem.yLabel.toFixed(2) would return a value with 2 decimal places.

2.123.toFixed(2)
>> "2.12"
2.0001.toFixed(2)
>> "2.00"

2. Math.round(tooltipItem.yLabel * 100) / 100 would return a value rounded to the nearest 2nd decimal place.

Math.round(2.123 * 100) / 100
>> 2.12
Math.round(2.00001 * 100) / 100
>> 2

tooltips: {
    callbacks: {
        label: function(tooltipItem, data) {
            var label = data.datasets[tooltipItem.datasetIndex].label || '';

            if (label) {
                label += ': ';
            }
            label += tooltipItem.yLabel.toFixed(2);
            return label;
        }
    }
}

[etimberg]

@jcopperfield has the recommend solution. I think this is a good opportunity to update our documentation with this example to help future users.

[D0nVitalio]

For version 3.8, I needed 5 decimals:

options: { 
                title: { ... },
                plugins: { ... },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            let label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            if (context.parsed.y !== null) {
                                label += Math.round( context.parsed.y * 100000) / 100000;
                            }
                            return label;
                        }
                    }
                }
            },