score:1

Accepted answer

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>


Related Query

More Query from same tag