[Chartjs]-HTML in Chart.js labels

by

5👍

Looking at the Chart.js source code it appears that labels are rendered using the fillText command. fillText(text, x, y [, maxWidth]) only accepts a plain text string and so your HTML string will be render as plain text and all tags will be ignored.

One possible option would be to consider modifying the Chart.js code to use a <foreignObject> (see this article on MDN and this one which it’s based on). For example:

ctx.translate(xPos,(isRotated) ? this.endPoint + 12 : this.endPoint + 8);
ctx.rotate(toRadians(this.xLabelRotation)*-1);

var data = "data:image/svg+xml," +
    "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
        "<foreignObject width='100%' height='100%'>" +
            "<div xmlns='http://www.w3.org/1999/xhtml'>" +
                label +
            "</div>" +
        "</foreignObject>" +
    "</svg>";

var img = new Image();
img.src = data;
img.onload = function() { ctx.drawImage(img, 0, 0); }

ctx.restore();

(Much of this code is a straight copy of the demo presented here by Robert O’Callahan, simply modified to accept a label string and replace the existing Chart.js x label drawing code.)

Leave a comment