angular-chart.js - define set Y axis width

0
votes

I'm using angular-chart.js (which uses Chart.js) to create a bar chart, there is also a table under this showing the same data.

The problem I am having is when I change the data being displayed, the Y axis labels change width and throw everything out of alignment, for example:

Chart and table aligned in the first picture, but when the data changes (max Y axis label 3 characters reduced from 4), it looks like the second picture.

enter image description here enter image description here

I couldn't find anything in the chart.js docs, is there a way I can set a width for the Y axis labels globally?

1
javascriptangularjschartschart.jsangular-chart

1 Answers

0
votes

Actually, I think I figured out a very basic and static way for setting the width.

In chart.js (version 1.0.2), line 1576:

this.yLabelWidth = (this.display && this.showLabels) ? longestText(this.ctx,this.font,this.yLabels) + 10 : 0;

I simply changed that to a static number, '93'.

this.yLabelWidth = 93;

I'm sure with a bit more tinkering I can call the width of the first cell in the table get them both to be the same.