CODEWITHSUNDEEP
javascriptchart.js
KunLun
KunLun

Reputation: 3225

Rotate label to right with 45 degree

I have this options at the chart:

options:{
    scales: {
        xAxis:{
            ticks: { maxRotation: 45, minRotation: 45 },
        }
    }
}

But is not really what I want. And I wanted with -45 and this is worst:

tried

What I really want is this:

want

It is possible to configure it like this?

Upvotes: 0

Views: 327

Answers (1)

Sachin Som
Sachin Som

Reputation: 1201

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.

Upvotes: 1

Related Questions