Chart.js rotating x-axis text labels

Question

I have this simple Chart.js graph:

 var ctx_danceability = document.getElementById('chart_danceability').getContext('2d'); var chart_01 = new Chart(ctx_danceability, { type: 'line', data: { labels: [ "You", "Creep", "How Do You?", "Stop Whispering", "Thinking About You", "Anyone Can Play Guitar", "Ripcord", "Vegetable", "Prove Yourself", "I Can't", "Lurgee", "Blow Out" ], datasets: [{ label: 'Danceability', borderColor: '#306090', fill: false, data: [ 0.222, 0.515, 0.185, 0.212, 0.365, 0.293, 0.255, 0.382, 0.25, 0.27, 0.42, 0.271 ], pointRadius: 5 }] }, options: { scales: { xAxes: [{ ticks: { minRotation: 90 } }] } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <canvas id='chart_danceability'></canvas> </div>

It works fine, and displays the graph successfully.

However, the issue I have is that the x-axis labels, while rotated by 90 degrees, are right-aligned, so the end of each axis label hits up against the x-axis.

That's fine - but for longer label names, the start of the label name is cut off.

Is there a way to align the x-axis labels so that they are rotated by 180 degrees, but aligned to start below the x-axis?

I tried doing this:

var ctx_danceability = document.getElementById('chart_danceability').getContext('2d');

var chart_01 = new Chart(ctx_danceability, {
    type: 'line',
    data: {
        labels: [ "You", "Creep", "How Do You?", "Stop Whispering", "Thinking About You", "Anyone Can Play Guitar", "Ripcord", "Vegetable", "Prove Yourself", "I Can't", "Lurgee", "Blow Out" ],
        datasets: [{
            label: 'Danceability',
            borderColor: '#306090',
            fill: false,
            data: [ 0.222, 0.515, 0.185, 0.212, 0.365, 0.293, 0.255, 0.382, 0.25, 0.27, 0.42, 0.271 ],
            pointRadius: 5
        }]
    },
    options: {
        scales: {
            xAxes: [{
                ticks: {
                    minRotation: 270
                }
            }]
        }
    }
});

But the graph then looks like this:

 var ctx_danceability = document.getElementById('chart_danceability').getContext('2d'); var chart_01 = new Chart(ctx_danceability, { type: 'line', data: { labels: [ "You", "Creep", "How Do You?", "Stop Whispering", "Thinking About You", "Anyone Can Play Guitar", "Ripcord", "Vegetable", "Prove Yourself", "I Can't", "Lurgee", "Blow Out" ], datasets: [{ label: 'Danceability', borderColor: '#306090', fill: false, data: [ 0.222, 0.515, 0.185, 0.212, 0.365, 0.293, 0.255, 0.382, 0.25, 0.27, 0.42, 0.271 ], pointRadius: 5 }] }, options: { scales: { xAxes: [{ ticks: { minRotation: 270 } }] } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/> <canvas id='chart_danceability'></canvas>

I reviewed the Chart.js docs but am not able to figure it out.

Answer 1

I'm aware this is not exactly the answer to your question but a proposal for an alternative approach that may solve your problem.

You can convert long labels into multi-line labels by simply defining them as string arrays.

Please take a look at your amended code and see how it works.

 new Chart('chart_danceability', { type: 'line', data: { labels: [ "You", "Creep", "How Do You?", ["Stop", "Whispering"], ["Thinking", "About You"], ["Anyone Can", "Play Guitar"], "Ripcord", "Vegetable", "Prove Yourself", "I Can't", "Lurgee", "Blow Out" ], datasets: [{ label: 'Danceability', borderColor: '#306090', fill: false, data: [ 0.222, 0.515, 0.185, 0.212, 0.365, 0.293, 0.255, 0.382, 0.25, 0.27, 0.42, 0.271 ], pointRadius: 5 }] }, options: { scales: { xAxes: [{ ticks: { minRotation: 90 } }] } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> <div class="container"> <canvas id='chart_danceability'></canvas> </div>