как отобразить значение в середине графика

Question

Я хочу добавить значение в середине графика вместе со значениями на обеих сторонах графика.

сейчас мой график выглядит так:

вот мой код:

html:

<canvas id="myChart"></canvas>

css:

.chart-container {
    position: relative;
    margin: auto;

 }

js:

var myChart = new Chart('myChart', {
type: 'doughnut',
data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
            'rgba(255, 99, 132, 1)',    
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
    }]
},
options: {
    responsive:true,
    circumference: Math.PI,
    rotation:Math.PI,
    title: {
        display: true,
        text: '50',
        position: 'bottom'
     },
    legend: {
        position: 'top',
    },
    animation: {
        animateScale: true,
        animateRotate: true
    }
}
});
}

Я хочу вот так:

как мне это сделать ..