[Chartjs]-ChartJS : Hook before values are given to doughnut (absolute value in chart and real values in the tooltips)

by

1👍

✅

Here’s how you could accomplish that …

♦ create a temporary data array with absolute values from your original data and use that data array     when creating the chart

♦ use the following callback function for tooltips

callbacks: {
    label: function(t, d) {
        return d.labels[t.index] + ': ' + data[t.index];
    }
}

var ctx = document.getElementById("chart").getContext("2d");

// original data array
var data = [1, -2, 3, -4];

// temporary data array \w absolute values
var temp_data = data.map(function(e) {
    return Math.abs(e);
});

var myDoughnut = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["January", "February", "March", "April"],
        datasets: [{
            data: temp_data,
            backgroundColor: ['#ff3d67', '#ff9f40', '#ffcd56', '#4bc0c0'],
        }]
    },
    showDatapoints: true,
    options: {
        responsive: false,
        legend: false,
        tooltips: {
            displayColors: false,
            callbacks: {
                label: function(t, d) {
                    return d.labels[t.index] + ': ' + data[t.index]; // 'data' represents the original data array
                }
            }
        }
    }
});
body{margin-top:0;overflow:hidden}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chart" width="218"></canvas>

Leave a comment