How to fix bars in Chart.js with long labels

Question

I use Chart.js( Version: 2.7.2 ) in my application and some labels in resulting rows are rather long

        var barCanvas = document.getElementById("canvasVoteNames");
        var ctx = barCanvas.getContext('2d');

        var numberWithCommas = function(x) {
            return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        };
        var self = this;
        var myChart = new Chart(ctx, {  // stacked bar report https://jsfiddle.net/sdfx/hwx9awgn/
            type: 'bar',
            data: {
                labels:monthsXCoordItems,
                datasets: [

                    {
                        label: 'Correct Votes',
                        data: voteValuesCorrect,
                        borderWidth: 1,           // The stroke width of the bar in pixels.

                        backgroundColor : formatColor('#05b932'), //rgba(0, 0, 0, 0.1), // The fill color of the bar. See Colors
                        borderColor: formatColor('#05b932'),// rgba(255, 0, 0, 0.1) // The color of the bar border.

                        hoverBackgroundColor : formatColor('#05b932'),   // The fill colour of the bars when hovered.
                        hoverBorderColor: formatColor('#05b932'),        //    The stroke colour of the bars when hovered.
                        hoverBorderWidth : 1                             //    The stroke width of the bars when hovered.
                    },

                    {
                        label: 'Incorrect Votes',
                        data: voteValuesNoneCorrect,
                        borderWidth: 1,           // The stroke width of the bar in pixels.

                        backgroundColor : formatColor('#b1a19a'), //rgba(0, 0, 0, 0.1), // The fill color of the bar. See Colors
                        borderColor: formatColor('#b1a19a'),// rgba(255, 0, 0, 0.1) // The color of the bar border.
                        hoverBackgroundColor : formatColor('#b1a19a'),   // The fill colour of the bars when hovered.
                        hoverBorderColor: formatColor('#b1a19a'),        //    The stroke colour of the bars when hovered.
                        hoverBorderWidth : 1                             //    The stroke width of the bars when hovered.
                    },

                ]
            },

            options: { // options of Report By Vote Names
                animation: {
                    duration: 10,
                },

                tooltips: { // tooltip text of Report By Vote Days ( 'bar' report )
                    mode: 'label',
                    callbacks: {
                        label: function(tooltipItem, data) {
                            return data.datasets[tooltipItem.datasetIndex].label + ": " + numberWithCommas(tooltipItem.yLabel);
                        }
                    }
                }, // tooltips: { // tooltip text of Report By Vote Days ( 'bar' report )

                scales: { // options for x and y scales
                    xAxes: [{
                        stacked: true,    // Stacked bar charts can be used to show how one data series i
                        gridLines: { display: false },
                    }],
                    yAxes: [{
                        stacked: true,  // Stacked bar charts can be used to show how one data series i
                        ticks: {
                            callback: function(value) { // on Y scale show only integer without decimals
                                if (Math.floor(value) === value) {
                                    return value;
                                }
                            },  // callback: function(value) { return numberWithCommas(value); },
                        },
                    }],
                }, // scales: { // options for x and y scales
                legend: {display: true}
            } // options: { // options of Report By Vote Names

        }); // var myChart = new Chart(ctx, {  // stacked bar report https://jsfiddle.net/sdfx/hwx9awgn/

}

The chart I got is what I need https://imgur.com/a/n1SsW7w but with long labels for any bar it does not look good and I did not find if there is a way to fix it somehow ? Why labels has big marging, not as relative bars?

Some options for xAxes or additive legends?

Thanks!

Sorry, I still search for some decision . I googled and found several examples, but they all with short labels and no problems similar mine... No ideas? — user2054381
I found a similar example and modified some labels to repeate my problem: jsfiddle.net/hwx9awgn/1259 some labels on xAxes are not showm at all : actually 1,3,5... labels are shown can be any decision? — user2054381

R.Duteil R.Duteil · Accepted Answer · 2018-10-02T08:39:58

You were using ChartJs version 2.1.3 in your JSFiddle, which does not seem to handle multiline labels

You can use multilines labels with the following solutions:

var dates = [["Some l-o-o-o-o-", "o-o-o-o-o-o-o-", "n-n-n-n-n-n-g-g-g-", "g-g-g-g label"], "DDD", ["EEE", "FFF", "GGG"], "HHH", "III"];

You can replace a label by an array, and each element of the array will be considered as a new line (See JSFiddle): https://jsfiddle.net/cyuwxh3q/

If your labels are generated dinamically, you can split them with a plugin in your chart configuration :

type: 'bar',
data: {...},
options: {...},
plugins: [{
    beforeInit: function (chart) {
        chart.data.labels.forEach(function (value, index, array) {
            var a = [];
            a.push(value.slice(0, 5));
            var i = 1;
            while(value.length > (i * 5)){
                a.push(value.slice(i * 5, (i + 1) * 5));
                i++;
            }
            array[index] = a;
        })
    }
}]

This function will turn each label into an array of element which length is less or equal to the given value (here 5) (See JSFiddle) : https://jsfiddle.net/jhr5nm17/

Those are two easy ways to handle long labels by replacing them by multiline labels, hope it helps.

How to fix bars in Chart.js with long labels

1 Answers