[Chartjs]-How can I display different values on xAxes than on tooltip Chart.js V3

by

2👍

✅

This is achievable. One solution would be to reformat the values stored at $labels so that they are consistent. For example, store each value in the format that you want to render, i.e. {'Dec 28 00:00', 'Dec 28 01:00', 'Dec 02:00'}. You can then use a callback to create a custom tick format.

options: {
    scales: {
        x: {
            stacked : true,
            ticks: {
                autoSkip: true,
                maxTicksLimit: 12,
                maxRotation: 0,
                callback: function(value) {
                    let labelValue = this.getLabelForValue(value);
                    if(labelValue.slice(-5, -3) == '00') {
                        return labelValue.slice(0, -6);
                    } else {
                        return labelValue.slice(-5);
                    }
                }
            }
        }
    }
}

JSFiddle showing this working

Leave a comment