[Chartjs]-How can I have different values for the chart and the tooltip in chart.js?

by

5👍

✅

You could accomplish that using tooltip’s callbacks function …

var ctx = document.getElementById('chart-human');

var real_data = [
    ['1.85m', '100lbs', '120%'],
    ['1.95m', '90lbs', '150%']
];

var data = {
    labels: ['Size', 'Weight', 'IPD'],
    datasets: [{
        label: 'Sam Smith',
        data: [1.10, 0.95, 1.23],
        backgroundColor: 'rgba(0,119,204,0.2)',
        borderColor: 'rgba(0,119,204, 0.5)',
        borderWidth: 1,
        pointBackgroundColor: 'rgba(0, 0, 0, 0.4)'
    }, {
        label: 'John Doe',
        data: [1.20, 0.85, 1.43],
        backgroundColor: 'rgba(255, 0, 0, 0.15)',
        borderColor: 'rgba(255, 0, 0, 0.45)',
        borderWidth: 1,
        pointBackgroundColor: 'rgba(0, 0, 0, 0.4)'
    }, {
        label: 'Average',
        data: [1, 1, 1],
        backgroundColor: 'rgba(0, 255, 0, 0.15)',
        borderColor: 'rgba(0, 255, 0, 0.45)',
        borderWidth: 1,
        pointBackgroundColor: 'rgba(0, 0, 0, 0.4)'
    }]
};

var options = {
    tooltips: {
        callbacks: {
            title: function(t, d) {
                let title = d.datasets[t[0].datasetIndex].label;
                return title;
            },
            label: function(t, d) {
                let title = d.datasets[t.datasetIndex].label;
                let label = d.labels[t.index];
                let value = (title != 'Average') ? real_data[t.datasetIndex][t.index] : d.datasets[t.datasetIndex].data[t.index];
                return label + ': ' + value;
            }
        }
    }
};

var chart = new Chart(ctx, {
    type: 'radar',
    data: data,
    options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chart-human"></canvas>

Leave a comment