Charts.js Кольцевая диаграмма, изменение легенды и толщина диаграммы

https://www.chartjs.org/docs/latest/charts/doughnut.html#doughnut Нужно чтобы заголовки указывающие цвет каждого куска пончика расположились сбоку, а также сделать тоньше сами куски, чтобы круг в центре был больше, как показано на картинке Готовый пример диаграммы

но получается пока что так моя диаграмма

Исходный код

var ctx = document.getElementById('myChart3').getContext('2d');
var chart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: [
            'Bithumb',
            'Bitfinex',
            'Coinone',
            'Coinone'
        ],
        datasets: [{
            label: 'Total Trade Volume',
            data: [60, 30, 30, 25],
            backgroundColor: [
                'rgb(9, 15, 63)',
                'rgb(72, 157, 215)',
                'rgb(248, 186, 26)',    
                'rgb(207, 18, 87)'    
            ],
            hoverOffset: 10,
            borderWidth: 0,
        }]
    },
});

Ответы (0 шт):