haiiaaa / chartjs-gauge

Gauge chart for Chart.js
53 stars 35 forks source link

TextHeight calculation can be improved #4

Closed av01d closed 4 years ago

av01d commented 4 years ago

Line 243 of chartjs-gauge.js measures text height like this:

var textHeight = ctx.measureText('M').width;

This works fine for some fonts, but not so much for other (f.e. Google) fonts. A better method is:

var textHeight = Math.max(ctx.measureText('m').width, ctx.measureText('\uFF37').width);

Now you need to change the default padding to:

padding: { top: 5, right: 5, bottom: 10, left: 5 }

In my tests (I tested with a LOT of Google fonts), these small changes result in a much better design for the needle-value-box.

haiiaaa commented 4 years ago

Thanks! Try version 0.1.2

av01d commented 4 years ago

Perfect, looks much better. Thank you!