Chartjs-Rotate label to right with 45 degree

1šŸ‘

Iā€™m not sure will it work for your scenario, but you can try this.

options:{
    scales: {
        xAxis:{
            ticks: {
                offset: true,
                padding: 20,
                labelOffset: 25,
                align: 'start',
                maxRotation: 315,
                minRotation: 315,
            },
        }
    }
}

You can increase or decrease labelOffset and padding properties according your need.

Note ā€“ Note: this can cause labels at the edges to be cropped by the edge of the canvas. For solving this issue, you can increase size of canvas tag and providing some padding inside canvas.

For Example ā€“

options: {
    layout: {
        padding: 25, // in pixels
  }
}

If Iā€™m not wrong, providing canvas padding equal to tick labelOffset would solve this cropping issue.

Leave a comment