CODEWITHSUNDEEP
chart.jschart.js2
Jaitropmange
Jaitropmange

Reputation: 392

Chart.js: Fixed horizontal location of vertical axis

enter image description here

How can I guarantee a fixed horizontal location for the vertical axis in terms of pixel from the edge of the screen? The photo shows how the axis location varies depending on number of digits in the scale labels. (I need the X in the photo to be constant so the plot will line up with other elements on the page.)

I've tried adjusting:

(I'm using options > responsive = false.)

Upvotes: 0

Views: 280

Answers (1)

Jaitropmange
Jaitropmange

Reputation: 392

Maybe there's a better way, but this worked for me.

In the chart options I set: options > layout > padding > left to a default pixel amount that works for my situation when the scale label has only two digit number labels.

Then I set an ID for the yAxes so that I can access it later: options > scales > yAxes > id.

Then in my JavaScript, after the code that defines the chart, I added the following code which adjusts the left padding if the scale label has three digits (in my case I set it to 1):

var axis = myLineChart.scales.<id of my y axis>;
var max_tick_label = axis.ticks[0];
if (max_tick_label >= 100) {
    myLineChart.options.layout.padding['left'] = 1;
    myLineChart.update();
}

Upvotes: 0

Related Questions