Eu precisava colocar rótulos em um elemento de tela (renderizado pelo chart js), coloquei esse trecho de código lá para adicionar os rótulos de forma que falassem, adicionei uma cor de legenda e adicionei preenchimento.
_wrapText = function wrapText(context, text, x, y, maxWidth, lineHeight) {
var words = text.split(' ');
var currentXLocation = x;
i = 0;
for(var n = 0; n < words.length; n++) {
var currentWord = words[n] + ' ';
var metrics = context.measureText(currentWord);
wordWidth = metrics.width;
if(n === 0) {
prevWordWidth = 0;
currentXLocation = x;
} else {
metrics = context.measureText(words[n-1]);
prevWordWidth = metrics.width;
currentXLocation += 50 + prevWordWidth;
}
if((currentXLocation + wordWidth + 50) > maxWidth) {
y += lineHeight;
currentXLocation = x;
}
var rgb = 'rgb(' + graphColors[i]['r'] + ', ' + graphColors[i]['g'] + ', ' + graphColors[i]['b'] + ')';
context.fillStyle = rgb;
context.fillRect(currentXLocation, y - (lineHeight/2),20,20);
context.fillStyle = "#666";
context.fillText(currentWord, currentXLocation + 30, y);
i++;
if(i >= graphColors.length) {
i = 0;
}
}
}