ChartJS - Set different hover-text than x-axis description

Viewed 8069

I'm using chartjs to visualize some data in a bar diagram. The labels are quite long, so I cut them. However, I'd like to have the text for the tooltips (on hover) to be the original one. Can I achieve this with the default chartjs configuration?

I use the following to generate the charts:

function DrawChart(canvasID, remoteFields, remoteData, remoteColors, remoteBorderColors) {
    var ctx = document.getElementById(canvasID).getContext('2d');

    var orig = remoteFields;
    var maxLabelLength = 20;
    for(var i = 0; i < remoteFields.length; i++) {
        if(remoteFields[i].length > maxLabelLength) {
            remoteFields[i] = remoteFields[i].substring(0,maxLabelLength) + "...";
        }
    }
    var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
    labels: remoteFields,
        datasets: [{
            data: remoteData,
            backgroundColor: remoteColors,
            borderColor: remoteBorderColors,
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true,
                    stepSize: 1
                }
            }]
        },
        responsive: true,
        maintainAspectRatio: false,
        legend: {
        display: false
    }
    }
});
}
1 Answers
Related