Text overlapping the another text in Layout Customized Chart.js

Question

Text overlapping the another enter image description heretext in Layout Customized Chart.js

enter image description here

Please , somebody can helpe me?

const { x, y } = datapoint.tooltipPosition();

                  const halfWidth = width / 2;
                  const halfHeight = width / 2;

                  const xLine = x >= halfWidth ? x + 100 : x - 25;
                  const yLine = y >= halfHeight ? y + 100 : y - 25;
                  const extraLine = x >= halfWidth ? 40 : -40;

                  ctx.beginPath();
                  ctx.moveTo(x, y);
                  ctx.lineTo(xLine, yLine);
                  ctx.lineTo(xLine + extraLine, yLine);
                  ctx.strokeStyle = dataset.backgroundColor[index];
                  ctx.stroke();

                  ctx.font = 'bold 12px Arial';
                  const textXPosition = x >= halfWidth ? 'left' : 'right';
                  const plusFivePx = x >= halfWidth ? 5 : -5;
                  ctx.textAlign = textXPosition;
                  ctx.fillStyle = 'black';
                  ctx.fillText(
                    chart.data.labels[index],
                    xLine + extraLine + plusFivePx,
                    yLine
                  );