0

When I use small version numbers (the label), my canvas is shown as it should:

Good Canvas view

But when my labels get too long it starts to look very unreadable, and I don't know how to avoid this?:

Bad Canvas view

Can I change my options to solve this, if yes, how?

Here is my javascript function, and nameArray is the array with version numbers, and I have to shorten these somehow.

function renderBarChart(nameArray, passArray, failArray, divId, title) {
    var ctx = document.getElementById(divId).getContext('2d');

    var newChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: nameArray,
            datasets: [{
                    label: 'Passed',
                    data: passArray,
                    backgroundColor: 'rgb(150,238,144)'
                },
                {
                    label: 'Failed',
                    data: failArray,
                    backgroundColor: 'rgb(204,0,0)'
                }
            ]
        },
        options: {
            title: {
                display: true,
                text: title
            },
            tooltips: {
                mode: 'index',
                intersect: false,
            },
            hover: {
                mode: 'nearest',
                intersect: true
            },
            responsive: false,
            maintainAspectRatio: false,
            scales: {
                xAxes: [{
                    stacked: true,
                    ticks: {
                        stepSize: 1,
                        min: 0,
                        autoSkip: false
                    }
                }],
                yAxes: [{
                    stacked: true,
                    ticks: {
                        maxTicksLimit: 5,
                        min: 0
                    }
                }]
            }

        }
    });
}

EDIT 1

Right now I'm trying to do something like this, but I can't make it work. Inspiration form: How to shorten Chart.js label

function renderBarChart(nameArray, passArray, failArray, divId, title) {
    var ctx = document.getElementById(divId).getContext('2d');

    var newChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: nameArray,
            datasets: [{
                    label: 'Passed',
                    data: passArray,
                    backgroundColor: 'rgb(150,238,144)'
                },
                {
                    label: 'Failed',
                    data: failArray,
                    backgroundColor: 'rgb(204,0,0)'
                }
            ]
        },
        options: {
            title: {
                display: true,
                text: title
            },
            tooltips: {
                enabled: true,
                mode: 'label',
                callbacks: {
                    title: function(tooltipItems, data) {
                        var idx = tooltipItems[0].index;
                        return 'Title:' + data.labels[idx]; //do something with title
                    },
                    label: function(tooltipItems, data) {
                        //var idx = tooltipItems.index;
                        //return data.labels[idx] + ' €';
                        return tooltipItems.xLabel + ' €';
                    }
                }
            },
            hover: {
                mode: 'nearest',
                intersect: true
            },
            responsive: false,
            maintainAspectRatio: false,
            scales: {
                xAxes: [{
                    stacked: true,
                    ticks: {
                        stepSize: 1,
                        min: 0,
                        autoSkip: false,
                        callback: function(value) {
                            if (value.length > 4) {
                                return value.substr(0, 4) + '...'; //truncate
                            } else {
                                return value
                            }

                        },
                    }
                }],
                yAxes: [{
                    stacked: true,
                    ticks: {
                        maxTicksLimit: 5,
                        min: 0
                    }
                }]
            }

        }
    });
}

0 Answers0