Chartjs-How to place extra text on canvas (not using HTML) beside chart?

by

0👍

✅

I found out that you can create an Extend function for each of the different chart types (for instance you may want to place the text at different places depending on chart type), here’s an example for a line chart:

            let myLineExtend = Chart.controllers.line.prototype.draw;
            Chart.helpers.extend(Chart.controllers.line.prototype, {
                draw: function () {
                    myLineExtend.apply(this, arguments);
                    self.Context.save();
                    self.Context.fillStyle = "#032f55";
                    var ctx = self.Context;
                    ctx.textAlign = "left";
                    ctx.textBaseline = "middle";
                    ctx.font = "12px arial";
                    ctx.fillText("Random text", (self.chart.canvas.width * 1) / 10, (self.chart.canvas.height * 3) / 4);
                    self.Context.restore();
                }
            });

Leave a comment