Chartjs-Chart.js rotating x-axis text labels

by

0👍

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>

Leave a comment