fix long label being truncated by chartjs

[struan]

Split long labels into an array of strings no longer than 30 characters which chartjs will then render as multiple lines.

Fixes #436 (again)

[zarino]

Thanks @struan. I discovered that if you set ticks: { autoSkip: false } on the axis, Chart.js will render every label, even if it thinks they’re going to be too closely smooshed together, which avoids the "chart.js is hiding labels when you set the max_length to something small like 20" problem.

I’ve tried this out locally, with a max_label_length of 20, and it seems to produce pretty good results on all the charts in my local environment, at least. Even labels nearing 60 characters have been fine (broken onto 3 lines).

I’ve also bumped up the right padding on the charts to 35px, as I noticed text was still sometimes getting cut off. (I think this cutting off happens because Chart.js calculates chart dimensions based on the labels being set in Arial, but then we apply a custom font, which results in slightly wider labels.)

[struan]

I think 20 might be too short as you get lines smashing into each other vertically. I've tweaked it to 28 which is maybe a reasonable compromise.