There is a plotted chartjs chart, and prototype.draw draws a vertical line. How to move the label of vertical lines down, if it goes beyond the canvas and is not displayed?

Chart.elements.Line.prototype.draw = function () { this._chart.ctx.save(); this._chart.ctx.strokeStyle = '#808080'; var points = this._chart.getDatasetMeta(0).data, point_x = points[points.length - 1]._model.x, point_y = points[points.length - 1]._model.y, bottom = this._chart.scales['y-axis-0'].bottom; this._chart.ctx.beginPath(); this._chart.ctx.lineWidth = 3; this._chart.ctx.moveTo(point_x, point_y); this._chart.ctx.lineTo(point_x, bottom); this._chart.ctx.textAlign = 'right'; this._chart.ctx.fillStyle = '#808080'; if ($(window).width() < 420) { this._chart.ctx.font = '500 14px "Montserrat", sans-serif'; this._chart.ctx.fillText("Окупність", point_x - 2, bottom - 14); } else { this._chart.ctx.font = '500 16px "Montserrat", sans-serif'; this._chart.ctx.fillText("Окупність", point_x - 5, bottom + 24); } this._chart.ctx.stroke(); this._chart.ctx.restore(); }

like now

enter image description here

as needed

enter image description here

  • add an explanatory sketch - Stranger in the Q
  • @StrangerintheQ there is a graph that is created when the page is initialized, it has 2 parts of the graph, one for displaying the payoff, and the second is the display of earnings. And here on the last point of a okupny line a line is drawn, along the x axis at 0 and along y at the point where the graph point is located. To this line you need to add a signature that will be displayed below the graph, and when changing parameters, move beyond the line. Now it moves and re-arranges the graph normally, but if it is displayed at the bottom of the graph, then it goes beyond the canvas and is not displayed. How to make it appear below. - taruuuch
  • @ instead of a thousand words, attach the picture as it is and as it should - Stranger in the Q
  • @StrangerintheQ added - taruuuch pm

0