[Chartjs]-Chartjs is stripping trailing zeros in decimal datasets

by

1👍

✅

You can do this with a tooltip label callback.

The following runnable code snippet (derived from https://www.chartjs.org/docs/latest/charts/bar.html) rounds the value in the tooltip to two decimal places and always displays two decimal digits.

new Chart(document.getElementById("myChart"), {
    "type": "bar",
    "data": {
        "labels": ["January", "February", "March", "April", "May", "June", "July"],
        "datasets": [{
            "label": "My Dataset",
            "data": [65.11, 59.1, 80, 81.8, 56.577, 55.8477, 40],
            "fill": false,
            "backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
            "borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
            "borderWidth": 1
        }]
    },
    "options": {
        "tooltips": {
            callbacks: {
                label: (tooltipItem, data) => {
                    var label = data.datasets[tooltipItem.datasetIndex].label || '';
                    return label + ' ' + (Math.round(tooltipItem.yLabel * 100) / 100).toFixed(2);
                }
            }
        },
        "scales": {
            "yAxes": [{
                "ticks": {
                    "beginAtZero": true
                }
            }]
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>

Leave a comment