Chartjs-Customize Chart js dataset data

by

0👍

✅

I have prepared a demo here. The convert function is taken from here. You can modify Chart JS tooltips as follows:

function convert(time) {   
    // Hours, minutes and seconds
    var hrs = ~~(time / 3600);
    var mins = ~~((time % 3600) / 60);
    var secs = ~~time % 60;

    // Output like "1:01" or "4:03:59" or "123:03:59"
    var ret = "";
    if (hrs > 0) {
        ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
    }
    ret += "" + mins + ":" + (secs < 10 ? "0" : "");
    ret += "" + secs;
    return ret;
}

var ctx = document.getElementById("myBarChart");
    var myLineChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['activity 1', 'activity 2', 'activity 3'],
            datasets: [{
                label: "Value",
                backgroundColor: "rgba(2,117,216,1)",
                borderColor: "rgba(2,117,216,1)",
                data: [545, 3600, 32110],
            }],
        },
      options: {
        responsive: true,
            tooltips: {
                callbacks: {
                    label: function(context) {
                        let str = convert(context.yLabel);
                        return str;
                    }
                }
            },
            scales: {
                xAxes: [{
                    time: {
                        unit: 'month'
                    },
                    gridLines: {
                        display: false
                    },
                    ticks: {
                        maxTicksLimit: 3
                    }
                }],
                yAxes: [{
                    ticks: {
                        min: 0,
                        max: 36000,
                        stepSize: 3600,
                        beginAtZero: true,
                        callback: function (label, index, labels) {
                            return convert(label);
                        }
                    },
                }],
            },
            legend: {
                display: false
            }
        }
    });

From ChartJS docs, it suggests wrapping tooltips in plugins object inside options, but it didn’t seem to work with version provided by the CDN in the demo. So you may need to wrap with plugins.

Leave a comment