Пользовательская подсказка или пользовательские ярлыки (chart.js 2)?

Question

Мне нужно получить такой график, и я понятия не имею, как его получить.

Я пробовал с пользовательскими подсказками, ноМне нужно показать им все одновременно.Я также попробовал с chartjs-plugin-datalabels , но метки находятся внутри холста, и они выглядят обрезанными.

Нужно ли создавать html-всплывающую подсказку для всех данных?

Есть идеи?

Обновлено:

Вот мой код:

options: {
    responsive: true,
    maintainAspectRatio: true,
    legend: {
        display: false
    },
    animation: {
        animateScale: true,
        animateRotate: true
    },
    cutoutPercentage: 60,
    circumference: 2 * Math.PI,
    showAllTooltips: true,
    tooltips: {
        enabled: false
    },
    plugins: {
        datalabels: {
            backgroundColor: function(context) {
                return context.dataset.backgroundColor;
            },
            borderColor: 'white',
            borderRadius: 50,
            borderWidth: 1,
            anchor: 'end',
            align: 'end',
            color: 'white',
            padding: 10,
            font: {
                weight: 'normal',
                size: '10'
            },
            formatter: function(value, context) {
                var percentageNum = context.chart.data.datasets[0].data[context.dataIndex]
                return percentageNum + '\n  %';
            }
        }
    }
}

и вот что я получаю: