Атомарность файла. Переместиться

Это простой случай знания некоторой тригонометрии и API текста холста.

Я использовал значения cos и sin от угла центра соответствующего фрагмента, чтобы установить горизонтальное и вертикальное выравнивание текста, например так:

    this.ctx.textAlign = cos > 0 ? 'start' : 'end';
    this.ctx.textBaseline = sin > 0 ? 'top' : 'bottom';

Кроме того, я добавил еще две опции для конструктор круговой диаграммы:

    const monthlyPaymentChart = new Piechart({
        canvas: canvas,
        data: paymentInformation,
        colors: pieChartColors,
        doughnutHoleSize: 0.85,

        labelDistanceFromOuterEdge: 5,
        roomForLabels: 65,
    });

• roomForLabels - указывает, сколько места нужно зарезервировать для меток
  , отображаемых за пределами круговой диаграммы в пикселях. Если ширина какого-либо ярлыка не помещается на холсте, это значение увеличивается, чтобы вместить его.

• labelDistanceFromOuterEdge - Насколько далеко метки находятся от края
  круговой диаграммы в пикселях.

Для измерения текста я использовал функцию measureText API контекста canvas 2d. Вот почему шрифт и размер текста также задаются в начале конструктора Piechart

Полный код можно найти здесь: https://codepen.io/prtjohanson/pen/bZgQmY